Folder DS

React component library built on a complete design token system.

Installation

npm install folder-ds

Setup

Import styles once in your app entry point (main.tsx or App.tsx):

import 'folder-ds/folder-ds.css'

Usage

import { Button, TextField, Switch } from 'folder-ds'

function App() {
  const [checked, setChecked] = React.useState(false)
  const [value, setValue] = React.useState('')

  return (
    <div>
      <Button priority="primary" tone="brand" size="M">
        Save
      </Button>

      <TextField
        label="Email"
        value={value}
        onChange={setValue}
        type="email"
      />

      <Switch checked={checked} onChange={setChecked} />
    </div>
  )
}

Components

Button

<Button
  priority="primary"   // "primary" | "secondary" | "tertiary" | "inverted"
  tone="brand"         // "brand" | "default" | "error"
  size="M"             // "XS" | "S" | "M"
  leftIcon={<Icon />}
  rightIcon={<Icon />}
  disabled={false}
>
  Click me
</Button>

TextField

<TextField
  label="Email"
  value={value}
  onChange={setValue}
  type="email"
  required={false}
  disabled={false}
  error={false}
  placeholder="Enter email"
/>

Switch

<Switch
  checked={checked}
  onChange={setChecked}
  disabled={false}
/>

Customization

Override CSS variables to customize the theme:

:root {
  --bg-brand: #1976d2;
  --fg-1: #111111;
}

Documentation

Storybook →

License

MIT © Egor Nevada