# @oscarkalid/ui

A set of React components and the design tokens they are built on.

Install: bun add @oscarkalid/ui

## Primitives

Buttons, fields, toggles, avatars, surfaces and overlays.

- **Button** Buttons in every variant and size, plus a split button.
- **App Store Buttons** Download buttons for the App Store, Google Play, Galaxy Store, Mac App Store, Microsoft Store and Chrome Web Store.
- **Toaster** Notifications that stack, expand on hover and dismiss with a swipe.
- **Social Buttons** Sign in buttons for Google, Apple and other providers.
- **Field** Labels, inputs, numbers, search and textareas.
- **Toggle** Checkbox, radio, switch and segmented control.
- **Combobox** A select you can type into.
- **Avatar** Profile pictures and initials, coloured by name.
- **Surface** Cards, stats, module tiles and empty states.
- **Overlay** Modals, drawers, popovers and menus.
- **Primitives** Tags, spinners, keyboard hints, dividers, staggered entrances.

## Data

Tables, records, trees, code and diffs.

- **Table** Tables with sorting and paging.
- **Record** Description lists, steppers and timelines.
- **FileTree** A directory tree you can walk with the keyboard.
- **CodeView** Code with syntax highlighting.
- **DiffView** Line diffs with added and removed counts.
- **SchemaDisplay** Request and response shapes for API docs.
- **StackTrace** A parsed stack trace.
- **Markdown** Rendered markdown.
- **PackageInfo** Install lines and package metadata.

## Agent

Conversations, transcripts, prompts and plans.

- **AI Summary** Links that open the page in a chat app.
- **Agent** An assistant panel with its launcher and trigger.
- **AgentParts** Reasoning, tasks, citations, checkpoints and confirmations.
- **Companion** A face with eyes that morph between expressions, blink and look around.
- **AgentAvatar** An animated mark that shows the model is working.
- **Conversation** The message list, including its empty state.
- **Transcript** Turns, thinking states and per-turn rating and retry.
- **PromptInput** The message composer, with a context meter and a queue.
- **Plan** A plan view for multi-step work.
- **Queue** A grouped list of pending work.
- **Persona** The agent's identity and welcome message.
- **VoiceSelector** A voice picker with playable samples.

## Application

Navigation, toolbars, status and feedback.

- **Trust Badges** ISO 27001, SOC 2, GDPR and CCPA marks for a footer.
- **Navigation** Side nav, tabs, breadcrumbs and menus.
- **Toolbar** Table toolbars and the bulk action bar.
- **CommandPalette** A command palette.
- **Status** Badges, counts, priority marks, progress and skeletons.
- **StatusBadge** Status badges in semantic colours.
- **StatusPage** Services, incidents and uptime bars for a public status page.
- **Feedback** Alerts, banners, dialogs, toasts and tooltips.
- **MemberSelector** A people picker with avatars.

## Hooks

Keyboard shortcuts, transitions and scrolling.

- **useHotkey** Keyboard shortcuts that know whether they are on a Mac.
- **usePresence** Mount and unmount transitions that run to the end.
- **useFlip** Animates a list reordering.
- **useStickToBottom** Keeps a feed scrolled to the newest message.
- **useDragScroll** Drag to scroll a wide surface.
- **cn** Class name joining.