# tcpsystems/ui

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

Components: 107. 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
- [AnchorNav](/components/anchor-nav/): Sticky in-page anchor navigation with scroll spy Import: @tcpsystems/ui/foundation/AnchorNav
- [AppShell](/components/app-shell/): Topbar, rail, main and aside. One frame for console, docs and status. Import: @tcpsystems/ui/foundation/AppShell
- [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
- [AvatarGroup](/components/avatar-group/): A compact row of avatars that collapses overflow into a +N count. Import: @tcpsystems/ui/foundation/AvatarGroup
- [Badge](/components/badge/): Count or short annotation. Import: @tcpsystems/ui/foundation/Badge
- [Banner](/components/banner/): Full-width persistent message with tone, optional action, and optional dismiss. Import: @tcpsystems/ui/foundation/Banner
- [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
- [Callout](/components/callout/): In-content message with tone, title and optional action. Import: @tcpsystems/ui/foundation/Callout
- [CharacterCount](/components/character-count/): A counter that shows characters used and announces near the limit. Import: @tcpsystems/ui/foundation/CharacterCount
- [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
- [CodeBlock](/components/code-block/): Code on a dark surface in both themes, with title and copy. Import: @tcpsystems/ui/foundation/CodeBlock
- [Collapse](/components/collapse/): A native details disclosure with a labeled summary and rotating chevron. Import: @tcpsystems/ui/foundation/Collapse
- [ColorInput](/components/color-input/): A colour picker with an editable hex value and optional swatches. Import: @tcpsystems/ui/foundation/ColorInput
- [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
- [Container](/components/container/): Page gutter and maximum width. Import: @tcpsystems/ui/foundation/Container
- [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
- [Divider](/components/divider/): A horizontal rule that can show an optional centered label. Import: @tcpsystems/ui/foundation/Divider
- [DocPager](/components/doc-pager/): Previous and next page links. Import: @tcpsystems/ui/foundation/DocPager
- [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
- [EnvironmentBand](/components/environment-band/): A full-width, non-dismissible band that shows which environment the user is in. Import: @tcpsystems/ui/foundation/EnvironmentBand
- [ErrorSummary](/components/error-summary/): Top-of-form list of errors linking to each field. Import: @tcpsystems/ui/foundation/ErrorSummary
- [Field](/components/field/): Label, hint, control and error wired together. The label is required. Import: @tcpsystems/ui/foundation/Field
- [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
- [Footer](/components/footer/): Site footer with link groups. Import: @tcpsystems/ui/foundation/Footer
- [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
- [Hero](/components/hero/): One large statement, then copy beside the product. Import: @tcpsystems/ui/foundation/Hero
- [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
- [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
- [LoadingOverlay](/components/loading-overlay/): An overlay that blocks interaction with wrapped content while showing a loading status. Import: @tcpsystems/ui/foundation/LoadingOverlay
- [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
- [Notice](/components/notice/): One-line inline status message with a tone mark, never colour alone. Import: @tcpsystems/ui/foundation/Notice
- [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
- [Preview](/components/preview/): Stage for a live example with an actions bar. Import: @tcpsystems/ui/foundation/Preview
- [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
- [RailToggle](/components/rail-toggle/): A button that collapses or expands the navigation rail and remembers the state. Import: @tcpsystems/ui/foundation/RailToggle
- [RangeSlider](/components/range-slider/): Selects low and high numeric values with paired range and number inputs that stay ordered. Import: @tcpsystems/ui/foundation/RangeSlider
- [Rating](/components/rating/): Lets users choose a rating from a radio group, or shows a read-only rating value. Import: @tcpsystems/ui/foundation/Rating
- [Result](/components/result/): Whole-page outcome for states like 404, 403, or 500 with code, text, and request id. Import: @tcpsystems/ui/foundation/Result
- [RingProgress](/components/ring-progress/): A circular progress indicator with a centered percentage and progressbar semantics. Import: @tcpsystems/ui/foundation/RingProgress
- [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
- [SearchDialog](/components/search-dialog/): Search dialog shell. Import: @tcpsystems/ui/foundation/SearchDialog
- [SearchTrigger](/components/search-trigger/): Button that opens search, showing the shortcut. Import: @tcpsystems/ui/foundation/SearchTrigger
- [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
- [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
- [SortHeader](/components/sort-header/): Sortable column header as a link, with aria-sort. Import: @tcpsystems/ui/foundation/SortHeader
- [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
- [Spoiler](/components/spoiler/): A native details disclosure that clamps content to a fixed line count until expanded. Import: @tcpsystems/ui/foundation/Spoiler
- [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
- [Swatch](/components/swatch/): Colour chip with a label. Import: @tcpsystems/ui/foundation/Swatch
- [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
- [Tile](/components/tile/): One tile, optionally a link. Import: @tcpsystems/ui/foundation/Tile
- [Tiles](/components/tiles/): Mosaic of tiles, hairline or block. Import: @tcpsystems/ui/foundation/Tiles
- [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
- [TopNav](/components/top-nav/): Top-level sections in the topbar. Import: @tcpsystems/ui/foundation/TopNav
- [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
- [UptimeStrip](/components/uptime-strip/): One block per period with text for every block. Import: @tcpsystems/ui/foundation/UptimeStrip