vocab-ui

The Vocab mobile design system as a React 18 component library — a re-themed fork of Figma's Simple Design System, styled with Vocab's design tokens (lime #a3e635 primary, Tailwind-neutral grays, Inter). Built to be imported as a Figma Make kit.

Install

npm install vocab-ui react react-dom react-aria-components

Usage

import "vocab-ui/styles.css"; // once, at the app root
import { Button, Input, Text, Flex } from "vocab-ui";

export default function App() {
  return (
    <Flex direction="column" gap="400">
      <Text as="h1">Hello Vocab</Text>
      <Input label="Email" placeholder="[email protected]" />
      <Button>Get started</Button>
    </Flex>
  );
}

• ESM-only, React 18, ships TypeScript types and a single stylesheet.
• Light/dark mode is automatic via prefers-color-scheme.
• Design tokens are CSS custom properties prefixed --sds-*.

See GUIDELINES.md for the component list and the guidelines text to paste into a Figma Make kit.

Develop

npm install
npm run build      # -> dist/index.js, dist/styles.css, dist/index.d.ts
npm run dev        # demo app (Vite) on http://localhost:8000
npm run typecheck

Publish (public npm)

npm login
npm publish --access public   # runs the build via prepublishOnly

If vocab-ui is ever taken on npm, rename the name field (e.g. a scoped @your-org/ui) and update the import paths.

Re-theming

All tokens live in src/theme.css. The Vocab changes vs. upstream SDS are the brand (lime) and gray (neutral) primitive ramps plus the brand/disabled semantic mappings. Adjust there and re-run npm run build.

License & attribution

CC BY 4.0. Derivative of Figma's Simple Design System — see NOTICE and LICENSE.