Sumi v0.1

Sumi is a React design system package with CSS tokens and foundational UI components.

Installation

npm install @charles/sumi

Usage

Import tokens once in your app entrypoint:

import '@charles/sumi/tokens/base.css';

Use components:

import { Button, Card, Input, Modal } from '@charles/sumi';
import { useState } from 'react';

export function Example() {
  const [value, setValue] = useState('');
  const [open, setOpen] = useState(false);

  return (
    <Card variant="glass">
      <Input
        placeholder="Type here"
        value={value}
        onChange={(event) => setValue(event.target.value)}
      />

      <Button variant="primary" size="md" onClick={() => setOpen(true)}>
        Open modal
      </Button>

      <Modal isOpen={open} onClose={() => setOpen(false)} title="Sumi modal">
        Content goes here.
      </Modal>
    </Card>
  );
}

Components

• Button: variants primary, secondary, ghost; sizes sm, md, lg
• Card: variants default, glass
• Input: supports standard input props + error
• Modal: controlled with isOpen and onClose

Tokens

CSS tokens are exported at:

• @charles/sumi/tokens/base.css