@basiiik/ui
React components for the Basiiik design system. Zero runtime dependencies (React is a peer). Styled with CSS Modules that read CSS variables from the Basiiik design tokens, so Light and Dark are just a CSS switch.
Install and use
import '@basiiik/ui/tokens.css'; // design tokens (Light on :root)
import '@basiiik/ui/tokens.dark.css'; // optional: Dark via <html data-theme="dark">
import '@basiiik/ui/styles.css'; // component styles
import { Button } from '@basiiik/ui';
<Button variant="primary" size="md">Save</Button>
Dark mode: set data-theme="dark" on <html>, or import tokens.dark-media.css to follow the OS setting (a page can still force Light with data-theme="light").
The library does not bundle fonts. Load Inter yourself; the tokens include a system-font fallback stack.
Prop conventions (Figma to React)
| Figma | React prop | Values |
|---|---|---|
| Style (Primary, Secondary, ...) | variant | lowercase: primary, secondary, outline, ghost, danger |
| Style (status colours) | tone | neutral, brand, success, warning, danger |
| Type / Emphasis (Subtle, Solid) | emphasis | subtle, solid |
| Size | size | xs sm md lg xl (Small to sm, Medium to md, ...) |
| State (Hover, Focused, Pressed) | none | CSS :hover, :focus-visible, :active |
| State = Disabled | disabled | native attribute |
| Show/leading/trailing icon | leadingIcon, trailingIcon | any ReactNode (decorative, aria-hidden) |
Each component's exact mapping, with allowed values and required props, is served to AI agents by the @basiiik/mcp server.
Accessibility
- Native elements first (
<button>,<a>,<input>), ARIA only where native semantics are not enough. - Every component has axe tests. Colour contrast is verified at the token level (98 WCAG checks), because jsdom has no layout.
- Icon-only controls require
aria-label(enforced by the type system).
Licence: MIT.