# tcpsystems/ui

> Svelte 5 component library. Tokens, CSS and components for dashboards, landing pages, marketing and more.

Components: 111. Tokens: 314. Machine-readable API: /manifest.json.

## Pages
- [Components](/components/): Every component with a live preview
- [Get started](/start/): Install in SvelteKit or Vite
- [Tokens](/tokens/): Colour, type, space and motion values
- [Utilities](/utilities/): Tracking, defaults, variants and plugins
- [Guidelines](/guidelines/): How the library decides
- [Dashboard page](/dashboard/): Composed console page
- [Landing page](/landing/): Composed product landing page
- [Marketing page](/marketing/): Composed pricing and features page
- [Settings page](/settings/): Composed settings form
- [Changelog](/changelog/): What changed

## Components
- [Accordion](/components/accordion/): Native details/summary accordion with optional exclusive groups Import: @tcpsystems/ui/foundation/Accordion
- [AgentRun](/components/agent-run/): Agent step status list with text states and token, duration and cost usage. Import: @tcpsystems/ui/foundation/AgentRun
- [ApiKeyReveal](/components/api-key-reveal/): Displays an API key with reveal and copy actions, showing consequence on reveal. Import: @tcpsystems/ui/foundation/ApiKeyReveal
- [AppShell](/components/app-shell/): Topbar, rail, main and aside. One frame for console, docs and status. Import: @tcpsystems/ui/foundation/AppShell
- [ApprovalCard](/components/approval-card/): Approval request with title, command detail, approve and reject actions and decided state. Import: @tcpsystems/ui/foundation/ApprovalCard
- [AspectRatio](/components/aspect-ratio/): A container that constrains its content to a fixed aspect ratio. Import: @tcpsystems/ui/foundation/AspectRatio
- [Avatar](/components/avatar/): A circular or square identity image with initials fallback, colored by a stable name hash. Import: @tcpsystems/ui/foundation/Avatar
- [Badge](/components/badge/): Count or short annotation. Import: @tcpsystems/ui/foundation/Badge
- [Banner](/components/banner/): Persistent message with tone, optional action and dismiss; modes: banner, callout (in-content), notice (one quiet line). Import: @tcpsystems/ui/foundation/Banner
- [BarList](/components/bar-list/): A ranked list of horizontal bars for top-N questions, always printing the value. Import: @tcpsystems/ui/foundation/BarList
- [Brand](/components/brand/): Mark, wordmark and product name. Import: @tcpsystems/ui/foundation/Brand
- [Breadcrumbs](/components/breadcrumbs/): Location trail. Every parent is a link. Import: @tcpsystems/ui/foundation/Breadcrumbs
- [BulkBar](/components/bulk-bar/): Selection count and bulk actions. Import: @tcpsystems/ui/foundation/BulkBar
- [Button](/components/button/): Triggers an action, or navigates when given href. One primary per view. Import: @tcpsystems/ui/foundation/Button
- [ButtonGroup](/components/button-group/): Groups related buttons into a single joined control with shared focus layering. Import: @tcpsystems/ui/foundation/ButtonGroup
- [ChatMessage](/components/chat-message/): One transcript message: role, state, sanitized Markdown, inert tool calls, approval, citations, retry and stop. Import: @tcpsystems/ui/foundation/ChatMessage
- [ChatTranscript](/components/chat-transcript/): Host-streamed transcript: bounded tail window, follow-tail, sanitized Markdown, inert tool output, approvals, citations, retry and stop. Import: @tcpsystems/ui/foundation/ChatTranscript
- [Choice](/components/choice/): Checkbox, radio or switch with its label. Import: @tcpsystems/ui/foundation/Choice
- [Cluster](/components/cluster/): Horizontal group that wraps. Import: @tcpsystems/ui/foundation/Cluster
- [Code](/components/code/): Escaped inline code. Import: @tcpsystems/ui/foundation/Code
- [CodeTabs](/components/code-tabs/): Language tabs over shared Tabs with readable no-JS panels. Import: @tcpsystems/ui/foundation/CodeTabs
- [Collapse](/components/collapse/): A native details disclosure with a labeled summary and rotating chevron. Import: @tcpsystems/ui/foundation/Collapse
- [CommandPalette](/components/command-palette/): Search and commands: Ctrl or Cmd K, combobox over a listbox, items loaded on first open. Import: @tcpsystems/ui/foundation/CommandPalette
- [ConfirmPopover](/components/confirm-popover/): An inline confirmation beside the button that asked, with Cancel focused first. Import: @tcpsystems/ui/foundation/ConfirmPopover
- [Container](/components/container/): Page gutter and maximum width. Import: @tcpsystems/ui/foundation/Container
- [CopyButton](/components/copy-button/): Copy original text with live success and failure feedback. Import: @tcpsystems/ui/foundation/CopyButton
- [CopyableID](/components/copyable-id/): LTR identifier with keyboard disclosure and exact copy. Import: @tcpsystems/ui/foundation/CopyableID
- [DescriptionList](/components/description-list/): Term and value pairs, or a rule list. Import: @tcpsystems/ui/foundation/DescriptionList
- [Dialog](/components/dialog/): Native modal dialog with focus return. Import: @tcpsystems/ui/foundation/Dialog
- [DiffViewer](/components/diff-viewer/): Bounded controlled unified or split diff rows. Import: @tcpsystems/ui/foundation/DiffViewer
- [Divider](/components/divider/): A horizontal rule that can show an optional centered label. Import: @tcpsystems/ui/foundation/Divider
- [DnsRecordEditor](/components/dns-record-editor/): DNS record editor with type-specific validation for A, AAAA, CNAME, MX, TXT, NS, SRV, CAA records. Import: @tcpsystems/ui/foundation/DnsRecordEditor
- [Drawer](/components/drawer/): A native modal dialog docked to one edge, 480 px wide, full width on narrow screens. Import: @tcpsystems/ui/foundation/Drawer
- [Dropzone](/components/dropzone/): A file chooser that also accepts dropped files with type and size limits. Import: @tcpsystems/ui/foundation/Dropzone
- [EmptyState](/components/empty-state/): First-use, filtered, error, forbidden and unavailable states. Import: @tcpsystems/ui/foundation/EmptyState
- [EnvVarEditor](/components/env-var-editor/): Editor for environment variables with masked sensitive values and inline editing. Import: @tcpsystems/ui/foundation/EnvVarEditor
- [EnvironmentBand](/components/environment-band/): A full-width, non-dismissible band that shows which environment the user is in. Import: @tcpsystems/ui/foundation/EnvironmentBand
- [ErrorState](/components/error-state/): Diagnosis card for errors/unavailable/forbidden/not-found/offline with next actions and copyable reference. Import: @tcpsystems/ui/foundation/ErrorState
- [ErrorSummary](/components/error-summary/): Top-of-form list of errors linking to each field. Import: @tcpsystems/ui/foundation/ErrorSummary
- [Faq](/components/faq/): Questions and answers on native disclosure with matching schema.org FAQPage data. Import: @tcpsystems/ui/foundation/Faq
- [Field](/components/field/): Label, hint, control and error wired together. The label is required. Import: @tcpsystems/ui/foundation/Field
- [FileButton](/components/file-button/): A button that opens the native file chooser and reports the chosen files. Import: @tcpsystems/ui/foundation/FileButton
- [FileInput](/components/file-input/): A native file chooser with a named trigger and selected filenames. Import: @tcpsystems/ui/foundation/FileInput
- [FileList](/components/file-list/): A list of files with upload status, progress and file actions. Import: @tcpsystems/ui/foundation/FileList
- [FormatNumber](/components/format-number/): A number in the reader's locale and tabular figures: plain, compact, bytes, percent or duration, with an em dash for empty values. Import: @tcpsystems/ui/foundation/FormatNumber
- [Grid](/components/grid/): Auto-fit responsive grid. Import: @tcpsystems/ui/foundation/Grid
- [Heading](/components/heading/): A semantic heading that renders the requested heading level. Import: @tcpsystems/ui/foundation/Heading
- [Icon](/components/icon/): Inline SVG icon on a 24 px grid, 1.5 stroke, currentColor. Decorative unless given a label. Import: @tcpsystems/ui/foundation/Icon
- [Image](/components/image/): A sized image with required dimensions, lazy loading, and an optional fallback when src is empty. Import: @tcpsystems/ui/foundation/Image
- [Indicator](/components/indicator/): A badge wrapper that annotates a child with an optional count and accessible label. Import: @tcpsystems/ui/foundation/Indicator
- [Input](/components/input/): Native single-line text control. Import: @tcpsystems/ui/foundation/Input
- [InputGroup](/components/input-group/): A group that joins prefix or suffix adornments to one input control. Import: @tcpsystems/ui/foundation/InputGroup
- [JsonInput](/components/json-input/): A monospace textarea that validates JSON as you type and formats it on request. Import: @tcpsystems/ui/foundation/JsonInput
- [JsonViewer](/components/json-viewer/): Text-only <details> JSON tree: lazy children, paging, cycle and hostile-key safety, copy path and value, host edit actions. Import: @tcpsystems/ui/foundation/JsonViewer
- [Kbd](/components/kbd/): Keyboard key hint. Import: @tcpsystems/ui/foundation/Kbd
- [Link](/components/link/): Inline or quiet navigation link, with an external form. Import: @tcpsystems/ui/foundation/Link
- [List](/components/list/): A list primitive that renders disc, numbered, or markerless items. Import: @tcpsystems/ui/foundation/List
- [LoadingState](/components/loading-state/): Loading region state: skeleton, spinner, or determinate progress with accessible status. Import: @tcpsystems/ui/foundation/LoadingState
- [Markdown](/components/markdown/): Safe Markdown subset with explicit escaped or rejected raw HTML. Import: @tcpsystems/ui/foundation/Markdown
- [MaskInput](/components/mask-input/): A text input that formats as you type to a pattern, keeps paste and IME composition working. Import: @tcpsystems/ui/foundation/MaskInput
- [Menu](/components/menu/): Action menu on the popover API. Import: @tcpsystems/ui/foundation/Menu
- [Meter](/components/meter/): Usage against a limit. Warns at 80%, critical at 95%. Import: @tcpsystems/ui/foundation/Meter
- [NotificationsMenu](/components/notifications-menu/): Notification inbox trigger and popover for suite events (severity, source, actions). Import: @tcpsystems/ui/foundation/NotificationsMenu
- [NumberInput](/components/number-input/): A numeric field with decrement and increment buttons and optional unit. Import: @tcpsystems/ui/foundation/NumberInput
- [OverflowList](/components/overflow-list/): Navigation links that move into a menu when space runs out. Import: @tcpsystems/ui/foundation/OverflowList
- [PageHeader](/components/page-header/): Page title, lead, status and actions. Import: @tcpsystems/ui/foundation/PageHeader
- [Pagination](/components/pagination/): Link-based pagination with a summary. Import: @tcpsystems/ui/foundation/Pagination
- [Panel](/components/panel/): Titled surface for a group of content. Import: @tcpsystems/ui/foundation/Panel
- [PasswordInput](/components/password-input/): A password field with a toggle that reveals or hides the value. Import: @tcpsystems/ui/foundation/PasswordInput
- [PinInput](/components/pin-input/): A single one-time-code input styled as segmented characters. Import: @tcpsystems/ui/foundation/PinInput
- [Popover](/components/popover/): A button that opens a non-modal panel on the native popover API, anchored with a viewport-clamped fallback. Import: @tcpsystems/ui/foundation/Popover
- [Progress](/components/progress/): A labeled progress bar that shows determinate completion or an indeterminate wait. Import: @tcpsystems/ui/foundation/Progress
- [Prose](/components/prose/): Long-form content styles at reading width. Import: @tcpsystems/ui/foundation/Prose
- [RelativeTime](/components/relative-time/): A moment as '3 minutes ago' in a time element, with the exact time as its title and an optional live refresh. Import: @tcpsystems/ui/foundation/RelativeTime
- [RouteProgress](/components/route-progress/): A top fixed route-loading bar that announces status text while active. Import: @tcpsystems/ui/foundation/RouteProgress
- [SaveStatus](/components/save-status/): Inline save indicator showing idle, saving, saved, or error state. Import: @tcpsystems/ui/foundation/SaveStatus
- [ScopeSwitcher](/components/scope-switcher/): A popover trigger that shows the current scope and links to switch between scopes. Import: @tcpsystems/ui/foundation/ScopeSwitcher
- [ScrollArea](/components/scroll-area/): A focusable scrollable region with an accessible label. Import: @tcpsystems/ui/foundation/ScrollArea
- [Section](/components/section/): Titled page section. Import: @tcpsystems/ui/foundation/Section
- [SegmentedControl](/components/segmented-control/): Mutually exclusive options as a radio group. Works without JS. Import: @tcpsystems/ui/foundation/SegmentedControl
- [Select](/components/select/): Native select. Use for short lists. Import: @tcpsystems/ui/foundation/Select
- [SeoHead](/components/seo-head/): The head tags for search and sharing: title, description, canonical, robots, Open Graph, Twitter card, alternates and JSON-LD. Import: @tcpsystems/ui/foundation/SeoHead
- [SideNav](/components/side-nav/): Rail navigation, two levels at most. Import: @tcpsystems/ui/foundation/SideNav
- [Skeleton](/components/skeleton/): Loading placeholder with reserved size. Appears after the feedback delay. Import: @tcpsystems/ui/foundation/Skeleton
- [SkipLinks](/components/skip-links/): A set of keyboard skip links that jump focus to key page regions. Import: @tcpsystems/ui/foundation/SkipLinks
- [Slider](/components/slider/): Selects a single numeric value from a range using a native range input and output. Import: @tcpsystems/ui/foundation/Slider
- [Sparkline](/components/sparkline/): Word-sized trend with a required text alternative. Import: @tcpsystems/ui/foundation/Sparkline
- [Spinner](/components/spinner/): Inline loading indicator. Appears after the feedback delay. Import: @tcpsystems/ui/foundation/Spinner
- [Split](/components/split/): Two columns from the large breakpoint, 5 to 7. Import: @tcpsystems/ui/foundation/Split
- [SplitButton](/components/split-button/): Combines a primary action button with a menu of related actions. Import: @tcpsystems/ui/foundation/SplitButton
- [Splitter](/components/splitter/): Two panes separated by a draggable resize handle. Import: @tcpsystems/ui/foundation/Splitter
- [Stack](/components/stack/): Vertical flow with a token gap. Import: @tcpsystems/ui/foundation/Stack
- [Stat](/components/stat/): Metric with unit, delta and trend. Import: @tcpsystems/ui/foundation/Stat
- [Status](/components/status/): System state as shape plus text, never colour alone. Import: @tcpsystems/ui/foundation/Status
- [Stepper](/components/stepper/): Progress step navigation with accessible state markers Import: @tcpsystems/ui/foundation/Stepper
- [Table](/components/table/): Native table in a named, focusable scroll region. Import: @tcpsystems/ui/foundation/Table
- [Tabs](/components/tabs/): Link tabs by default, ARIA panel tabs when given a panel. Import: @tcpsystems/ui/foundation/Tabs
- [Tag](/components/tag/): User metadata or an applied filter, optionally removable. Import: @tcpsystems/ui/foundation/Tag
- [Text](/components/text/): A text primitive with size, tone, mono, and truncation options. Import: @tcpsystems/ui/foundation/Text
- [Textarea](/components/textarea/): Native multi-line control that grows with content. Import: @tcpsystems/ui/foundation/Textarea
- [ThemeSwitch](/components/theme-switch/): Light and dark toggle, persisted. Import: @tcpsystems/ui/foundation/ThemeSwitch
- [Timeline](/components/timeline/): Time-ordered events. Import: @tcpsystems/ui/foundation/Timeline
- [Toast](/components/toast/): Transient confirmation. Never the only carrier of an error. Import: @tcpsystems/ui/foundation/Toast
- [Toc](/components/toc/): On-this-page list, with a collapsed mobile form. Import: @tcpsystems/ui/foundation/Toc
- [ToggleButton](/components/toggle-button/): A button that toggles a pressed state and exposes it with aria-pressed. Import: @tcpsystems/ui/foundation/ToggleButton
- [Toolbar](/components/toolbar/): Search, filters and actions above a list. Import: @tcpsystems/ui/foundation/Toolbar
- [Tooltip](/components/tooltip/): Short text on hover and focus. Dismiss with Esc. Never essential information. Import: @tcpsystems/ui/foundation/Tooltip
- [Topbar](/components/topbar/): Suite header: brand, sections, search and account. Import: @tcpsystems/ui/foundation/Topbar
- [Tree](/components/tree/): A hierarchy of links with keyboard navigation. Import: @tcpsystems/ui/foundation/Tree
- [Truncate](/components/truncate/): Middle truncation with full text on focus. Import: @tcpsystems/ui/foundation/Truncate
- [UptimeStrip](/components/uptime-strip/): One block per period with text for every block. Import: @tcpsystems/ui/foundation/UptimeStrip