@tini-work/ui

A shared, token-driven, tree-shakeable React component library built on tini design tokens. It is designed for composition-first consumer apps: strong tokens, accessible primitives, and thin compounds instead of opinionated workflow shells.

Installation

npm install @tini-work/ui react react-dom

@tini-work/ui includes its runtime component dependencies directly. If your app also needs token APIs directly, install @tini-work/tokens too:

npm install @tini-work/tokens

Setup (Tailwind v4)

In your app's CSS entry point:

@import "@tini-work/ui/css";     /* tokens + UI keyframes */
@source "@tini-work/ui";          /* Tailwind scans UI package classes */

Reduced motion

@tini-work/ui disables non-essential entrance/exit animations under prefers-reduced-motion. For custom animations in your app code, guard them with Tailwind’s motion-safe:* variants.

Usage

import { Button, Card, CardContent, CardHeader, CardTitle } from '@tini-work/ui'

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Hello</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="default" size="default">
          Click me
        </Button>
      </CardContent>
    </Card>
  )
}

Composition First

The library is intended to be assembled into product-specific patterns in the consuming app.

• Use semantic tokens for calm surfaces, subtle metadata, separators, overlays, and focus treatment.
• Use primitives and slot-friendly compounds as the building blocks for list rows, metadata panels, filter strips, dense navigation, and search flows.
• Reach for thin compounds like CommandDialog only when they remove boilerplate without owning your app state.

Density

Use DensityProvider to apply compact, default, or relaxed density across a section of UI:

import {
  DensityProvider,
  Input,
  Textarea,
  Select,
  SelectTrigger,
  SelectValue,
  Tabs,
  TabsList,
  TabsTrigger,
} from '@tini-work/ui'

export function DensePanel() {
  return (
    <DensityProvider density="compact">
      <Input placeholder="Search..." />
      <Textarea placeholder="Notes..." />

      <Select>
        <SelectTrigger>
          <SelectValue placeholder="Pick one" />
        </SelectTrigger>
      </Select>

      <Tabs defaultValue="overview">
        <TabsList>
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="activity">Activity</TabsTrigger>
        </TabsList>
      </Tabs>
    </DensityProvider>
  )
}

Behavior summary:

• SelectTrigger and Textarea inherit density through their existing size variants when size is omitted.
• Tabs, Steps, and Sidebar read density from context and also accept explicit density props for local override.
• Table and DataTable support table-level density. DataTable does not expose column-level density controls.

Theming

All components use CSS custom properties from @tini-work/tokens. Override them to re-theme:

:root {
  --primary: oklch(0.60 0.20 280);  /* purple instead of default */
  --radius: 0.75rem;
}

Dark mode works automatically via the .dark class on a parent element.

Components

Primitives (no Radix dependency)

Button, Input, Label, Textarea, Card, Badge, FilterChip, Kbd, Separator, Skeleton, Alert, Table, Tag, Spinner, StatusDot, EmptyState, PageHeader, Footer, Fieldset, TrackingBar, Ribbon, ListGroup, ChatBubble

Compound

SplitButton, IconButton, ActionIconGroup

Form Controls (Radix-backed)

Checkbox, RadioGroup, Switch, Select, Slider, Toggle, ToggleGroup, Progress, Toast, StarRating, ImageCheck, ColorPicker, InputMask, FileUpload

Overlays

Dialog, AlertDialog, Sheet, Popover, Tooltip, HoverCard

Navigation

Tabs, Breadcrumb, Pagination, Navbar, Sidebar, Steps

Layout

SegmentedControl

Data Display

Timeline, Carousel, Chart (Recharts wrapper)

Advanced

Command, DropdownMenu, ContextMenu, Accordion, Collapsible, ScrollArea, AspectRatio, Avatar

Rich / Plugin

RichTextEditor, SignaturePad, Lightbox, ProductTour, Countup

Composed

Combobox (Command + Popover), DatePicker (Calendar + Popover)

Extended

Form (react-hook-form integration), DataTable (@tanstack/react-table), Calendar (react-day-picker)

Exports

| Export | Description | |--------|-------------| | @tini-work/ui | All base components | | @tini-work/ui/toast | Toast (Sonner) | | @tini-work/ui/command | Command palette (cmdk) | | @tini-work/ui/combobox | Combobox (Command + Popover) | | @tini-work/ui/form | Form (react-hook-form integration) | | @tini-work/ui/data-table | DataTable (@tanstack/react-table) | | @tini-work/ui/calendar | Calendar (react-day-picker) | | @tini-work/ui/date-picker | DatePicker (Calendar + Popover) | | @tini-work/ui/tailwind | Tailwind preset + animation config | | @tini-work/ui/css | CSS file with tokens + keyframes |

Optional peer dependencies are only required when using their corresponding export path.

Notable Building Blocks

• FilterChip for removable filter tokens without imposing a query model
• Kbd for consistent keyboard shortcut rendering across menus, commands, and toolbars
• CommandDialog in @tini-work/ui/command for a thin dialog shell around command search
• Density-aware Sidebar, Tabs, Pagination, SegmentedControl, Select, and Textarea

Development

pnpm --filter @tini-work/ui build    # Build ESM + CJS + DTS
pnpm --filter @tini-work/ui test     # Run unit tests
pnpm --filter showcase dev           # Start showcase app

License

MIT