The package includes typography, icon, components, theme for runzipper app.

.npmrc

@runzipper:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

.yarnrc.yml

npmScopes:
  "runzipper":
    npmRegistryServer: 'https://npm.pkg.github.com'
    npmAuthToken: '${GITHUB_TOKEN}' 

1. Generate a GitHub personal access token

2. Add the environment variable to your shell setting file

   # zsh
   echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.zshrc
   source ~/.zshrc
   
   # bash
   echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
   source ~/.bashrc

This package requires react ^19.2 and react-dom ^19.2 as peer dependencies.

# npm
npm install @runzipper/ui

# bash
yarn add @runzipper/ui

import { Icon } from '@runzipper/ui';

<Icon icon="IconCheck" width={24} height={24} />

The Icon component allows you to select an icon via the icon prop and supports all SVG attributes such as width, height, fill, stroke, etc.

• IconCheck - Check icon
• IconCloud - Cloud icon
• IconExclamation - Exclamation icon
• IconFile - File icon
• IconUpload - Upload icon
• IconX - X (close) icon

Typography components provide consistent text styling. All Typography components accept a textType prop to specify the HTML text element and support all attributes of that element.

Displays bold text.

import { Typography } from '@runzipper/ui';

<Typography.Bold textType="p" size="medium">
  Bold Text
</Typography.Bold>

Props:

• textType: HTML text element type (e.g., p, span, div)
• size (optional): small | medium | large (default: medium)
  • small: 14px / line-height 20px
  • medium: 16px / line-height 24px
  • large: 20px / line-height 28px

Displays regular weight text.

<Typography.Regular textType="p" size="medium">
  Regular Text
</Typography.Regular>

Props:

• textType: HTML text element type
• size (optional): small | medium | large (default: medium)
  • small: 14px / line-height 20px
  • medium: 16px / line-height 24px
  • large: 18px / line-height 28px

Displays heading text.

<Typography.Heading textType="h1" size="primary">
  Main Heading
</Typography.Heading>

{/* Or use with default size */}
<Typography.Heading textType="h2">
  Secondary Heading
</Typography.Heading>

Props:

• textType: HTML heading element type (h1 | h2 | h3 | h4 | h5 | h6)
• size (optional): primary | secondary | default (default: default)
  • primary: 48px / letter-spacing -1.2px
  • secondary: 30px / letter-spacing -0.75px
  • default: 14px

Displays table cell header text.

<Typography.Cell textType="span">
  Column Header
</Typography.Cell>

Displays data for the first column of a table.

<Typography.Data textType="span">
  Row Label
</Typography.Data>

A clickable button component.

import { UI } from '@runzipper/ui';

<UI.Button showShadow={true}>
  Click Me
</UI.Button>

Props:

• showShadow: Whether to show shadow effect (default: false)
• Supports all HTML button attributes (onClick, disabled, type, etc.)

A component for drag-and-drop or file selection.

<UI.FileDrop
  onDropFile={(files) => console.log(files)}
  accept=".pdf,.doc"
  multiple={true}
/>

Props:

• onDropFile: Function called when files are selected or dropped (files: FileList) => void
• multiple: Whether to allow multiple file selection (default: true)
• accept: Allowed file types (e.g., ".pdf,.doc")

A component for displaying notification messages.

<UI.Notification
  type="notification"
  title="Success"
  description="Task completed successfully"
  onClose={() => console.log('closed')}
/>

Props:

• type: Notification type - notification | warn | default
  • notification: Success message (with check icon)
  • warn: Warning message (with exclamation icon)
  • default: Default message (no icon)
• title: Title (optional)
• description: Description (optional)
• onClose: Function called when close button is clicked (optional, close button is hidden if not provided)

A component for displaying tables.

<UI.Table
  columns={['Name', 'Age', 'Email']}
  rows={[
    ['John', '25', '[email protected]'],
    ['Jane', '30', '[email protected]']
  ]}
/>

Props:

• columns: Array of table headers string[]
• rows: Array of table data string[][] (each row is an array of strings)

A component for displaying the application logo.

<UI.Logo type="primary" />

Props:

• type (optional): Logo style variant - primary | secondary (default: primary)
  • primary: Logo with primary background color
  • secondary: Logo with transparent background
• Supports all HTML div attributes

A component for toggling between two options.

import { UI } from '@runzipper/ui';

<UI.Toggle
  option1={{ label: '파일', value: 'file' }}
  option2={{ label: '폴더', value: 'directory' }}
  value={selectedValue}
  onChange={(value) => setSelectedValue(value)}
/>

Props:

• option1: First option object { label: string; value: T }
• option2: Second option object { label: string; value: T }
• value: Currently selected value T (must match one of the option values)
• onChange: Function called when selection changes (value: T) => void

Generic Type:

The component supports generic types for the value (string or number)

A component for selecting a single option from a list.

import { UI } from '@runzipper/ui';
import { useState } from 'react';

const items = [
  { label: 'English', value: 'en' },
  { label: '한국어', value: 'ko' },
  { label: '日本語', value: 'ja' },
];

const [selected, setSelected] = useState(items[0]);

<UI.Dropdown
  items={items}
  value={selected}
  onSelect={(item) => setSelected(item)}
/>

Props:

• items: Array of dropdown items DropdownItem[]
  • Each item has { label: string; value: string }
• value: Currently selected item DropdownItem
• onSelect: Function called when an item is selected (item: DropdownItem) => void
• className (optional): Additional CSS class name for the dropdown container

This package provides a theme system using Vanilla Extract. You can access design tokens through the vars object.

import { vars } from '@runzipper/ui/styles/theme.css';

const myStyle = style({
  color: vars.color.primary,
  fontSize: vars.fontSize.sizeBase,
  padding: vars.spacing['4'],
});

Colors:

• Primary: primary, primaryHover, primaryActive, primaryLight, primaryMedium
• Background: backgroundLight, backgroundDark
• Content: contentLight, contentDark
• Border: borderLight, borderDark
• Success: success, successLight, successBorder, successHover
• Error: error, errorLight, errorBorder, errorHover
• Base: black, white

Font Sizes:

• sizeXs (12px), sizeSm (14px), sizeBase (16px), sizeLg (18px)
• sizeXl (20px), size2xl (24px), size3xl (30px), size4xl (36px), size5xl (48px)

Spacing:

• 1 (4px), 2 (8px), 3 (12px), 4 (16px)
• 6 (24px), 8 (32px), 12 (48px), 16 (64px)

Border Radius:

• default (8px), md (6px), lg (12px), xl (16px), full (9999px)

Other:

• Border Width: width1 (1px), width2 (2px)
• Shadow: md, lg
• Blur: sm (4px)
• Font: pretendard