UI Kit

A customized, accessible, and fully typed React component library. It pairs core UI primitives with higher-level building blocks, all themeable through CSS custom properties.

Install

npm install @fairshare/ui-kit

React and React DOM are peer dependencies. React 17, 18, and 19 are supported.

Use

Import the stylesheet once near the root of your application, then import components from the package:

import '@fairshare/ui-kit/styles.css'
import { Badge, Button, Card } from '@fairshare/ui-kit'

export function Project() {
  return (
    <Card title="Project" extra={<Badge variant="success">Active</Badge>}>
      <Button>Open</Button>
    </Card>
  )
}

The package ships as ESM and includes TypeScript declarations.

Components

• Primitives: Accordion, Avatar, Badge, Banner, Breadcrumbs, Button, Card, Checkbox, Combobox, Dialog, Drawer, Field, Input, Label, Menu, Meter, NumberField, Pagination, Popover, Progress, RadioGroup, Select, Skeleton, Slider, Spinner, Switch, Table, Tabs, Toast, Tooltip
• Building blocks: AgentStatus, ApprovalGate, Attachments, Branch, ChainOfThought, Checkpoint, CodeBlock, Commit, ConfidenceBadge, Connection, Conversation, DiffView, FeedbackButtons, InlineCitation, Message, MessageActions, Plan, PromptInput, Queue, Shimmer, Sidebar, Sources, StackTrace, StatCard, StreamingText, SuggestionChip, Terminal, TestResults, ThinkingBlock, TokenMeter, ToolCallTimeline, Tree, UserProfile, WebPreview

Component props and supporting data types are exported from the same entry point.

Theming

Override the package's CSS custom properties globally or on a wrapping element:

:root {
  --ui-accent: #6d4aff;
  --ui-accent-hover: #5938df;
  --ui-radius: 0.5rem;
  --ui-font: Inter, system-ui, sans-serif;
}

Dark mode follows the system preference by default. Force a theme with data-theme="dark" or data-theme="light" on an ancestor such as <html>.

Density

For data-heavy screens, set data-density="compact" on <html> (or any ancestor) to halve padding and control heights. Padding and control heights scale, and so do gaps between stacked blocks; icon-to-label gaps stay fixed. Elevated surfaces keep a minimum inset so they stay roomy: Dialog and Drawer padding stops at 0.75x, Popover and Toast at 0.5rem. For a custom density, set --ui-space directly; 1 is the default and 0.5 is compact:

.my-grid {
  --ui-space: 0.75;
}

Sizing tokens you can reuse in your own layouts, given as normal / compact: --ui-control-h (32 / 26px, form controls and the default Button), --ui-control-h-sm (24 / 20px, small inline actions; <Button size="sm"> and <Button size="sm" iconOnly>), and --ui-header-h (36 / 28px, minimum height for header bars). Text uses --ui-line-height (20px) and --ui-line-height-sm (16px, for 0.75rem text and smaller), so rows land on whole pixels regardless of your page's line-height.

Popups render into <body>, so set density on <html> if menus, selects, and dialogs should follow it.

Development

npm install
npm test
npm run build

License

MIT