@zzzhangzenx/design-system

A React component library built with Vite and TypeScript, styled with design system tokens.

Installation

npm install @zzzhangzenx/design-system

Usage

import { Button, Input, NavigationBar, TabBar } from '@zzzhangzenx/design-system';

function App() {
  return (
    <div>
      <NavigationBar title="My App" />
      <Input placeholder="Enter text" />
      <Button variant="primary">Click me</Button>
      <TabBar
        tabs={[
          { label: 'Home' },
          { label: 'Profile' },
        ]}
        activeTab={0}
        onTabChange={(index) => console.log(index)}
      />
    </div>
  );
}

Components

Button

Button component with 7 variants:

• primary-large: Full-width solid black large button, 32px border radius
• primary: Solid black medium button, 12px border radius
• secondary: White outlined medium button, 12px border radius
• icon-text: Icon + text small button, 16px border radius
• icon-circle-light: Pure icon circular white button with shadow
• icon-circle-dark: Pure icon circular black button with shadow
• icon-square-ghost: Pure icon rounded square semi-transparent button

// Examples
<Button variant="primary-large" fullWidth>Full Width Button</Button>
<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="icon-text" icon={<Icon />}>Icon + Text</Button>
<Button variant="icon-circle-light" icon={<Icon />} />
<Button variant="icon-circle-dark" icon={<Icon />} />
<Button variant="icon-square-ghost" icon={<Icon />} />

Input

Text input component.

NavigationBar

Top navigation bar.

TabBar

Bottom tab bar for navigation.

Publishing

To publish to npm:

npm run build
npm publish --access public

Tokens

The library uses design system tokens from JSON files in the tokens/ directory. You can customize the styles by modifying these files.