# Design system > An AI-ready design system built by Claude Code from published specs (CLAUDE.md, design.md, content-design.md) and shipped to npm as an open React component library, with the docs site it builds. Designed and built by Robert Ritacca (https://robertritacca.com), who writes the specs Claude Code builds from. MIT licensed. [AGENTS.md](https://rift-ds.com/AGENTS.md) is the starter for a coding agent building with the package: the install, the setup, the rules and where to look things up, in one short file to save at a project root. ## Design system docs How the system works and the artifacts you can reuse. Index at https://rift-ds.com/docs. - [Overview](https://rift-ds.com/overview): How the system is built, tested, and shipped - [Get started](https://rift-ds.com/docs/get-started): Install the package and theme it - [Add AI chat](https://rift-ds.com/docs/chat): One command, the panel alone, or the engine - [Blocks](https://rift-ds.com/docs/blocks): Whole starting pages, added with one command - [Claude MD](https://rift-ds.com/blueprints/claude): The agent instructions behind this repo - [Design MD](https://rift-ds.com/blueprints/design): The design spec behind the system - [Content MD](https://rift-ds.com/blueprints/content-design): The style guide behind the words - [Skills](https://rift-ds.com/skills): The agent skills that maintain the site - [Loops](https://rift-ds.com/loops): The recurring loops that keep it current - [Release log](https://rift-ds.com/releases): One entry per npm release ## Foundations Design tokens and language. Index at https://rift-ds.com/foundations. - [Accessibility](https://rift-ds.com/foundations/accessibility): What the build enforces - [Elevation](https://rift-ds.com/foundations/elevation): The shadow and depth tokens - [Icons](https://rift-ds.com/foundations/icons): The icon font and its size scale - [Layout](https://rift-ds.com/foundations/layout): The breakpoints and the page shell's values - [Logos](https://rift-ds.com/foundations/logos): The brand marks and how they are used - [Motion](https://rift-ds.com/foundations/motion): The duration and easing tokens - [Primitive colours](https://rift-ds.com/foundations/colour-primitives): The raw values behind the colour tokens - [Semantic colours](https://rift-ds.com/foundations/colour-mode): Every colour token in both themes - [Semantic spacing](https://rift-ds.com/foundations/spatial): The spacing, radius, and border tokens - [Themes](https://rift-ds.com/foundations/themes): Every shipped look, applied live or copied into your app - [Typography](https://rift-ds.com/foundations/typography): The type scale, weights, and faces ## Templates Complete screens built from the system's components and tokens alone. Index at https://rift-ds.com/templates. - [Marketing dashboard](https://rift-ds.com/templates/marketing-dashboard): An analytics app shell built from the system alone - [Chat home](https://rift-ds.com/templates/chat-home): An assistant's home screen: a prompt over a board of live tiles - [Mobile dashboard](https://rift-ds.com/templates/mobile-dashboard): The same analytics as an iOS app, under a glass tab bar - [Relay console](https://rift-ds.com/templates/relay-console): A network operations screen flipping between globe and map - [Team calendar](https://rift-ds.com/templates/team-calendar): A month view with the sprint's to-dos on a rail beside it - [Agent workbench](https://rift-ds.com/templates/agent-workbench): A coding agent mid-task, its session beside the staged diff - [Roadmap planner](https://rift-ds.com/templates/roadmap-planner): A planning tool around the Gantt timeline and its detail rail - [Sales pipeline](https://rift-ds.com/templates/sales-pipeline): A CRM companies view built around the wired data table - [Sign in](https://rift-ds.com/templates/sign-in): A product front door: the providers beside an ambient panel - [Landing page](https://rift-ds.com/templates/landing-page): A product's front page: hero, products, figures and a call to action ## Components React component documentation with live examples. Index at https://rift-ds.com/components. Append .md to any component URL for its prop contract as markdown, generated from the same JSDoc as the published .d.ts. - [Components overview](https://rift-ds.com/components) - [Accordion](https://rift-ds.com/components/accordion): Collapsible content sections for organising related information. - [Agent plan](https://rift-ds.com/components/agent-plan): A collapsible checklist of an agent's task, with live step states and a progress readout. - [Agent rail](https://rift-ds.com/components/agent-rail): The companion rail of an agent product: the agent's portrait over tabbed panes for activity, approvals, automations, and personalization. - [Agent status](https://rift-ds.com/components/agent-status): What an agent is doing right now, as a dot matrix and status line, a floating pill, a square mark for icon slots, or a ring around any element. - [AI button](https://rift-ds.com/components/ai-button): The AI entry point: a turning gradient ring that reports the agent's status, with a hover-summoned summary and a panel for what the agent asks of you. - [AI chat](https://rift-ds.com/components/ai-chat): The whole AI chat: the panel, the streaming replies, the history, the cards and questions a reply can carry and the server handlers, set up with props. - [Alert](https://rift-ds.com/components/alert): Contextual feedback with status variants, optional dismiss, and compact sizing. - [Alert dialog](https://rift-ds.com/components/alert-dialog): Modal confirmation overlay with title, description, and confirm / cancel actions. - [Anchor nav](https://rift-ds.com/components/anchor-nav): An on-page list of anchor links that tracks the reader's position and jumps between sections. - [Animated number](https://rift-ds.com/components/animated-number): A number that counts to its value: count-up on mount, eased tweens on change, tabular digits that never jitter. - [App layout](https://rift-ds.com/components/app-layout): Full-page template pairing the collapsible App sidebar with a centred content area. - [App sidebar](https://rift-ds.com/components/app-sidebar): Collapsible navigation rail with accordion sub-items, a side panel for a third level, category headings, and a profile section. - [Area chart](https://rift-ds.com/components/area-chart): Filled area chart for showing volume over time, with stacked and single-series variants. - [Artifact card](https://rift-ds.com/components/artifact-card): The tile a chat leaves in the thread for something it made, a toggle that opens the artifact in its panel. - [Artifact panel](https://rift-ds.com/components/artifact-panel): The panel a chat opens beside the conversation to preview what it made: live content, a sandboxed page or a site, with the source a switch away. - [Attachment drop zone](https://rift-ds.com/components/attachment-drop-zone): A wrapper that makes a whole surface a file drop target, with an outlined overlay while files hover over it. - [Attachment group](https://rift-ds.com/components/attachment-group): The files on a sent message: one picture at its own shape, or a grid of tiles that collapses behind a count. - [Attachment tile](https://rift-ds.com/components/attachment-tile): One file as a square: a picture, a coloured mark for well-known formats, or a neutral badge, with upload states. - [Attachment viewer](https://rift-ds.com/components/attachment-viewer): A preview dialog for a message's files, with download, stepping, and plain states for files it cannot show. - [Avatar](https://rift-ds.com/components/avatar): User profile image with initials and icon fallback, status indicator, and multiple sizes. - [Avatar group](https://rift-ds.com/components/avatar-group): Overlapping avatar stack with a +N counter for the overflow. - [Badge](https://rift-ds.com/components/badge): Small inline status labels with info, positive, warning, error, and neutral variants. - [Banner](https://rift-ds.com/components/banner): Full-width status strip for page-level announcements, with an action slot and optional dismissal. - [Bar chart](https://rift-ds.com/components/bar-chart): Vertical bars for comparing values across categories or time, with summary stats and tooltips. - [Bento tile](https://rift-ds.com/components/bento-tile): A feature tile for a bento grid, with a safe content area, a shader pair, solid or transparent background, and an overlay it opens into. - [Bento tile art](https://rift-ds.com/components/bento-tile-art): The texture half of a bento tile's shader pair: six fine patterns in one vocabulary, fading in from a corner. - [Bottom nav](https://rift-ds.com/components/bottom-nav): Mobile tab bar for three to five destinations, in the Rift style or as iOS Liquid Glass or Material 3 Expressive. - [Breadcrumb](https://rift-ds.com/components/breadcrumb): Hierarchical navigation trail showing the user's location within the site. - [Button](https://rift-ds.com/components/button): Primary, secondary and tertiary emphasis, each in a default, neutral or destructive tone, with icons, loading, and default and compact sizes. - [Button group](https://rift-ds.com/components/button-group): Horizontal and vertical button group layouts for related actions and navigation patterns. - [Card](https://rift-ds.com/components/card): A titled preview tile for index grids, with a case-study variant carrying a cover, company logo and dek. - [Card stack](https://rift-ds.com/components/card-stack): A deck of cards showing one at a time, flipped through with a lift-and-settle animation. - [Carousel](https://rift-ds.com/components/carousel): Sliding content viewer with navigation arrows, dot indicators, auto-play, and keyboard support. - [Chat header](https://rift-ds.com/components/chat-header): The top row of a chat surface, with the conversation title and its controls. - [Chat marker](https://rift-ds.com/components/chat-marker): An inline conversation separator for date breaks and system notes. - [Chat message](https://rift-ds.com/components/chat-message): A single chat turn with avatar, author, timestamp, and bubble or plain content aligned by role. - [Chat thread](https://rift-ds.com/components/chat-thread): A scrollable conversation column with edge fades, send anchoring, and a subtle scrollbar. - [Checkbox](https://rift-ds.com/components/checkbox): Custom checkbox with check and indeterminate states, keyboard accessible with animated transitions. - [Chip](https://rift-ds.com/components/chip): Compact pills for attributes, filters, and inline metadata. - [Circular button](https://rift-ds.com/components/circular-button): Round icon button in primary, secondary and tertiary emphasis and a default, neutral or destructive tone, in default and compact sizes. - [Code block](https://rift-ds.com/components/code-block): Monospace code with a header and one-click copy. - [Code diff](https://rift-ds.com/components/code-diff): Unified diff view for code changes, with added, removed, and context lines. - [Colour picker](https://rift-ds.com/components/color-picker): Swatch trigger opening a saturation area, hue and alpha sliders, and a hex field; controlled or uncontrolled. - [Combo chart](https://rift-ds.com/components/combo-chart): Bar and line series in one chart, with an optional second y-axis for pairs in different units, like spend and ROAS. - [Combobox](https://rift-ds.com/components/combobox): A filterable select that narrows options as the user types, with multi-select chips, grouping, and async loading. - [Command palette](https://rift-ds.com/components/command-palette): A modal Cmd+K launcher that searches a grouped command list, with keyboard navigation and shortcut hints. - [Command palette trigger](https://rift-ds.com/components/command-palette-trigger): The entry point to a command palette: a button dressed as a search field, with the shortcut's keycaps, at the row-control height. - [Composer](https://rift-ds.com/components/composer): An auto-growing message input with send and stop states, a page-context note, a file tray fed by picker, paste and drop, and Enter-to-send. - [Contact card](https://rift-ds.com/components/contact-card): Linked contact method with icon, label, and value. - [Context menu](https://rift-ds.com/components/context-menu): Right-click menu at the pointer with groups, sub-menus, and shortcut hints. - [Contribution graph](https://rift-ds.com/components/contribution-graph): A year of activity, one cell per day. - [Data table](https://rift-ds.com/components/data-table): The wired table: typed columns, sorting, filters, editing, grouping with totals, row details, saved views, thousands of rows, and rows from a server. - [Date input](https://rift-ds.com/components/date-input): Date input with native picker, calendar icon, label, and validation states. - [Date picker](https://rift-ds.com/components/date-picker): Inline calendar with month navigation, day selection, and today indicator. - [Dialog](https://rift-ds.com/components/dialog): A general-purpose modal for focused tasks, with sizes, an optional footer, and full focus management. - [Divider](https://rift-ds.com/components/divider): A thin rule separating stacked content, with optional inline label and vertical orientation. - [Document chip](https://rift-ds.com/components/document-chip): A legacy one-row file reference, superseded by the attachment tile and kept for existing consumers. - [Drawer](https://rift-ds.com/components/drawer): An edge-anchored modal panel that slides in from any side, for filter panels, detail views, and mobile navigation. - [Dropdown](https://rift-ds.com/components/dropdown): Custom select dropdown with keyboard navigation, disabled options, and error states. - [Dropdown menu](https://rift-ds.com/components/dropdown-menu): Action menu opened from a trigger, with groups, sub-menus, shortcuts, radio and checkbox items, placed to stay on screen. - [Empty state](https://rift-ds.com/components/empty-state): The placeholder for a list, table, or search with nothing to show: icon, headline, guidance, and a next action. - [Entity card](https://rift-ds.com/components/entity-card): Compact display-only card with a centred icon or image and a label, used in the Icons and Logos galleries. - [Event calendar](https://rift-ds.com/components/event-calendar): A month grid with event pills, overflow counts, and month navigation. - [Field](https://rift-ds.com/components/field): The shared scaffolding for labelled form controls: label, required marker, helper and error text, and the ARIA wiring that ties them together. - [Figure](https://rift-ds.com/components/figure): Images with captions, in the case-study frame. - [File input](https://rift-ds.com/components/file-input): A click-or-drop upload zone paired with a controlled file list showing size, progress, and per-file errors. - [Filter bar](https://rift-ds.com/components/filter-bar): A row of filter chips for narrowing a collection, each opening a popover of options, with per-filter and clear-all resets. - [Funnel chart](https://rift-ds.com/components/funnel-chart): Ordered funnel stages as centred trapezoid bands, each sized by its share of the first stage. - [Gantt chart](https://rift-ds.com/components/gantt-chart): Phases and tasks as bars on a shared timeline, with milestones, progress, and a today rule. - [Gauge](https://rift-ds.com/components/gauge): A radial dial for a single bounded reading, recoloured through the status roles as it crosses thresholds. - [Globe](https://rift-ds.com/components/globe): An orthographic globe with markers and great-circle arcs, rotated by drag, keys, or a slow spin. - [Hover card](https://rift-ds.com/components/hover-card): Rich preview panel that opens from hover or focus, with interactive content and position options. - [Image compare](https://rift-ds.com/components/image-compare): Before-and-after image comparison with a draggable divider, keyboard control, and corner labels. - [Input](https://rift-ds.com/components/input): Text input with label, placeholder, left and right icons, helper text, and error states. - [Inspector colour picker](https://rift-ds.com/components/inspector-color-picker): One-row colour setting for inspector panels, with the hex and a round swatch at the bar's end and ColorPicker's own panel. - [Inspector dropdown](https://rift-ds.com/components/inspector-dropdown): One-row select for inspector panels, with the name inside the bar and the library Dropdown's menu and font previews. - [Inspector input](https://rift-ds.com/components/inspector-input): One-row text field for inspector panels, with the name on the left and the value right-aligned in the bar. - [Inspector section](https://rift-ds.com/components/inspector-section): Collapsible, titled run of inspector controls whose open body lets a dropdown menu open past its edge. - [Inspector segments](https://rift-ds.com/components/inspector-segmented-control): One-row choice between a few options for inspector panels, as native radios under a sliding selection pill. - [Inspector slider](https://rift-ds.com/components/inspector-slider): One-row slider for inspector panels, where the whole bar is the control and its fill is the value. - [Inspector toggle switch](https://rift-ds.com/components/inspector-toggle-switch): One-row switch for inspector panels, where the whole bar toggles and the track sits at its end. - [Instructions](https://rift-ds.com/components/instructions): Step-by-step guidance with numbered badges, connecting lines, and horizontal layout. - [Interrupt card](https://rift-ds.com/components/interrupt-card): A human-in-the-loop checkpoint with a question from the agent and option buttons to decide. - [Kbd](https://rift-ds.com/components/kbd): A keyboard key rendered as a keycap, for shortcut hints in menus and prose. - [Legend tile](https://rift-ds.com/components/legend-tile): The labelled value tile under a chart: a series dot, the series name, and its reading, on an inset fill. - [Lightbox](https://rift-ds.com/components/lightbox): Fullscreen media viewer on the shared overlay stack: deep scrim, caption chip, gallery stepping, trapped and restored focus. - [Line chart](https://rift-ds.com/components/line-chart): Multi-series line chart for trends over time, with per-series colours and a summary row. - [Link list](https://rift-ds.com/components/link-list): Linked items with logo, label, and subtitle. - [Map callout](https://rift-ds.com/components/map-callout): The annotation beside a map point: a name in capitals over monospace readout lines. - [Map legend](https://rift-ds.com/components/map-legend): The corner block of a map: its name, what it shows, and the key to its markers. - [Mega menu](https://rift-ds.com/components/mega-menu): A wide navigation panel of icon rows with descriptions, beside an optional featured card. - [Mention](https://rift-ds.com/components/mention): An inline reference to an entity or a skill, with the menu that @ or / opens while typing and the tag it leaves in the message. - [Message actions](https://rift-ds.com/components/message-actions): An icon-button row for message-level actions like copy, retry, and feedback. - [Message card](https://rift-ds.com/components/message-card): A structured rich-content card embedded in a chat message, with media, title, body, and actions. - [Meter](https://rift-ds.com/components/meter): Level indicator for a known quantity, with a status-coloured fill and an optional value readout. - [Model picker](https://rift-ds.com/components/model-picker): A model selector for chat surfaces, with per-model descriptions and an optional effort row. - [Nav](https://rift-ds.com/components/nav): A legacy plain top bar of brand and page links, superseded by the site header and kept for existing consumers. - [Nav list](https://rift-ds.com/components/nav-list): Vertical list of navigation links for drawers and menus, with three indent levels and per-row expand toggles. - [Notification centre](https://rift-ds.com/components/notification-center): A persistent notification inbox with unread count, filter tabs, and per-item actions. - [Number input](https://rift-ds.com/components/number-input): Numeric field with increment and decrement steppers and min/max clamping. - [Pagination](https://rift-ds.com/components/pagination): Numbered page navigation for long datasets, with ellipses, disabled end arrows, and a compact readout mode. - [Panel](https://rift-ds.com/components/panel): The plain dashboard surface: a rounded container with no border or shadow, just padding and a gap. - [Pie chart](https://rift-ds.com/components/pie-chart): Proportional share of a whole as a pie or donut, with per-slice colours. - [Pin input](https://rift-ds.com/components/pin-input): Segmented one-time-code input with auto-advance, paste support, and completion callback. - [Pixel avatar](https://rift-ds.com/components/pixel-avatar): A generated character mark drawn from a name: the same name is always the same pixel creature in the same ink. - [Popover](https://rift-ds.com/components/popover): Contextual overlay panel with click and hover triggers, positioned relative to its anchor. - [Progress bar](https://rift-ds.com/components/progress-bar): Horizontal bar indicating completion progress, with an optional percentage label. - [Progressive blur](https://rift-ds.com/components/progressive-blur): A backdrop blur that dissolves along one edge, with an optional page tint that fades in. - [Prompt suggestions](https://rift-ds.com/components/prompt-suggestions): Tappable prompt suggestions to start or steer a conversation, as a scrolling or wrapping row, a stack, tiles or cards. - [Prose](https://rift-ds.com/components/prose): Token-styled typography for rendered markdown and rich agent output. - [Question card](https://rift-ds.com/components/question-card): An agent's question with answers to pick: one or several, a set asked a step at a time, kept as a record once answered. - [Quote](https://rift-ds.com/components/quote): Blockquotes and pull-quotes with attribution. - [Radar chart](https://rift-ds.com/components/radar-chart): Multi-axis comparison of series across categories on a radial grid. - [Radial chart](https://rift-ds.com/components/radial-chart): Concentric progress rings for completion and KPI readouts. - [Radio button](https://rift-ds.com/components/radio-button): Radio button and radio group with vertical and horizontal layouts, animated dot indicator. - [Rating](https://rift-ds.com/components/rating): Star-scale rating control with keyboard selection, a read-only mode, and a configurable icon. - [Reasoning](https://rift-ds.com/components/reasoning): A model's thinking, disclosed behind a one-line summary and collapsed once it finishes. - [Rich dropdown](https://rift-ds.com/components/rich-dropdown): Dropdown's rich sibling: options preview their own heading face, body face, and key colour. - [Scatter chart](https://rift-ds.com/components/scatter-chart): Plots point clusters across two axes to show correlation and distribution. - [Section title](https://rift-ds.com/components/section-title): Heading with a divider line and optional trailing content for organising page sections. - [Segmented control](https://rift-ds.com/components/segmented-control): Pill-style toggle between related views with keyboard navigation and icon support. - [Selection card](https://rift-ds.com/components/selection-card): Large option cards for high-visibility choices like settings and onboarding, with radio, checkbox or per-card toggle indicators. - [Shader field](https://rift-ds.com/components/shader-field): An ambient WebGL2 field of soft light sources that sample colour tokens, with a reported fallback status. - [Sidebar panel](https://rift-ds.com/components/sidebar-panel): Secondary navigation column listing one section's pages, with group headings and one level of accordion nesting. - [Site header](https://rift-ds.com/components/site-header): A site's sticky top bar of section pills and mega menus, folding to a drawer when the pills no longer fit. - [Skeleton](https://rift-ds.com/components/skeleton): Placeholder loading indicators with text, circular, and rectangular variants. - [Slider](https://rift-ds.com/components/slider): Range input for selecting a value between a minimum and maximum, in default and compact sizes. - [Source chip](https://rift-ds.com/components/source-chip): A numbered citation pill linking a claim to its source. - [Source trail](https://rift-ds.com/components/source-trail): The sources an agent opened while answering, as a collapsible list with per-item status. - [Sparkline](https://rift-ds.com/components/sparkline): Inline trend line for stats and table cells, drawn without axes or chrome. - [Spinner](https://rift-ds.com/components/spinner): Animated circular loading indicator in three sizes and a default, neutral or inherit tone. - [Split button](https://rift-ds.com/components/split-button): Primary action with an attached menu of alternatives, composing Button and DropdownMenu in one pill, in primary or secondary emphasis and any tone. - [Split pane](https://rift-ds.com/components/split-pane): Two resizable regions with a draggable, keyboard-operable divider between them. - [Stacked bar chart](https://rift-ds.com/components/stacked-bar-chart): Bars split into stacked segments to compare totals and their composition. - [Stat](https://rift-ds.com/components/stat): Headline metrics with labels and trend deltas. - [Status dot](https://rift-ds.com/components/status-dot): The bare status mark: a dot in the five status roles, with an optional label and a live pulse for recording and online-now states. - [Stepper](https://rift-ds.com/components/stepper): Step-by-step progress indicator for wizards and multi-stage flows. - [Streaming text](https://rift-ds.com/components/streaming-text): Progressive reveal for text arriving in chunks, with a blinking cursor while more is coming. - [Swatch](https://rift-ds.com/components/swatch): Clickable colour tile for preset palettes and picker triggers, with a theme-aware selection ring. - [Table](https://rift-ds.com/components/table): Data table with flexible cell content, striped rows, compact sizing, and support for icons, inputs, buttons, and interactive controls. - [Table toolbar](https://rift-ds.com/components/table-toolbar): The control bar over a table: search, filter chips, sort, group, columns, density, saved views and a bulk bar, wired to a DataTable in its toolbar slot. - [Tabs](https://rift-ds.com/components/tabs): Tab navigation with underline indicator, icon support, compact size, and full-width mode. - [Tag input](https://rift-ds.com/components/tag-input): Multi-value text input with entries held as removable tags. - [Textarea](https://rift-ds.com/components/textarea): Multi-line text input with character counter, resize control, helper text, and error states. - [Theme picker](https://rift-ds.com/components/theme-picker): A circular trigger wearing the active theme's swatch, opening a menu of every theme on offer with its colour, corner and faces. - [Theme toggle](https://rift-ds.com/components/theme-toggle): The colour-mode control: System, Light and Dark over a stored setting, with the script that applies it before first paint. - [Thread panel](https://rift-ds.com/components/thread-panel): The session-history rail for chat products: brand header, new-thread action, standing controls, projects, grouped detail-rich threads, and a profile footer. - [Thread tabs](https://rift-ds.com/components/thread-tabs): The strip of open chat sessions: pill tabs with status dots and hover-revealed close buttons, a new-tab action, and animated enter and exit. - [Time picker](https://rift-ds.com/components/time-picker): Time-of-day field with a dropdown list of selectable times. - [Timeline](https://rift-ds.com/components/timeline): Ordered sequences: histories and steppers. - [Toast](https://rift-ds.com/components/toast): Temporary notification with status variants, auto-dismiss, and stacking via ToastProvider. - [Toggle group](https://rift-ds.com/components/toggle-group): A set of two-state buttons that can be toggled on or off, supporting text and icon items. - [Toggle switch](https://rift-ds.com/components/toggle-switch): Binary on/off toggle control with sliding thumb and check indicator, for settings that take effect immediately. - [Tool call](https://rift-ds.com/components/tool-call): The record of one tool invocation, with its arguments and result behind a disclosure. - [Toolbar](https://rift-ds.com/components/toolbar): A grouped strip of controls in one pill shell: clusters, separators, arrow-key focus, and a glass floating variant. - [Tooltip](https://rift-ds.com/components/tooltip): Contextual text label that appears on hover or focus with position and delay options. - [Top app bar](https://rift-ds.com/components/top-app-bar): Mobile screen header with a menu or back button, title, and actions, in Rift, iOS, or Android style, collapsing on scroll. - [Tree view](https://rift-ds.com/components/tree-view): Collapsible hierarchy for files, folders, and nested structures. - [Treemap](https://rift-ds.com/components/treemap): Nested rectangles sized by value for part-to-whole breakdowns. - [Usage card](https://rift-ds.com/components/usage-card): An agent's budgets at a glance: context window and plan limits as meter rows with reset captions. - [Waveform](https://rift-ds.com/components/waveform): Voice made visible: a row of bars dancing on the shared twelve-slot cycle, or tracking a live analyser level by level. - [Widget](https://rift-ds.com/components/widget): A titled tile for a dashboard or home screen, with rows, labelled groups, and a board that packs tiles into columns. - [World map](https://rift-ds.com/components/world-map): A flat world map from Natural Earth land shapes: token-coloured continents, framed bounds, and colour-carrying markers. ## Interactive surfaces Live tools for exploring and re-theming the design system. - [AI chat](https://rift-ds.com/docs/chat): how to add the whole AI chat as one installable widget: the full install (one command scaffolds the routes and guardrails), the panel alone over your own endpoint (with the streaming protocol it reads) or the headless engine under your own UI; its page under /components holds every prop, and .md on that URL is the contract as markdown - [Blocks](https://rift-ds.com/docs/blocks): whole starting pages for a new app (app shell, dashboard, sign in), laid out for desktop and phone and added with `npx rift-ds init block `; the files are yours from then on - [Playground](https://rift-ds.com/playground): re-theme the design system live (components, type, chat and a full dashboard) and export it as one AGENTS.md for a coding agent (the setup, the theme in words and its CSS), or as CSS, a THEME.md and a setup prompt - [Theme presets](https://rift-ds.com/docs/get-started): complete looks ship in the package as generated stylesheets, applied by one data-brand attribute on the root element - [System graph](https://rift-ds.com/graph): every token, component and page as one dependency graph, traceable in both directions - [Home](https://rift-ds.com/): the whole system working on one page, with live component demos ## Optional Raw markdown sources and machine-readable indexes. - [MCP server](https://rift-ds.com/api/mcp): a Model Context Protocol endpoint (Streamable HTTP, no auth). Tools cover the component list, per-component prop APIs, the design token registry, install setup, and full-text site search. Point any MCP client at this URL - [Agent skills](https://rift-ds.com/skill/manifest.json): skills for consumers of the package, generated from the registries, listed with their files in this manifest. `npx rift-ds init` fetches every one into a project's .claude/skills/, where a coding agent loads them each session, and prints the MCP connect line - [rift-design-system](https://rift-ds.com/skill/rift-design-system/SKILL.md): Install, theming and dark mode rules, the component catalogue and the token reference. Files: SKILL.md, references/components.md, references/tokens.md - [rift-apply-theme](https://rift-ds.com/skill/rift-apply-theme/SKILL.md): Restyles existing screens onto the tokens and components. Files: SKILL.md - [rift-style-audit](https://rift-ds.com/skill/rift-style-audit/SKILL.md): Audits a project's styles for hardcoded values that should be tokens. Files: SKILL.md - [Storybook](https://storybook.rift-ds.com): the rendered API reference. Every component has a props table with types, defaults, and deprecations - [npm package](https://www.npmjs.com/package/rift-ds): `npm install rift-ds` ships complete .d.ts type declarations for every component - [shadcn registry](https://rift-ds.com/r/registry.json): a shadcn-compatible registry serving every component as installable source. `npx shadcn@latest add https://rift-ds.com/r/.json` copies the component, its dependencies, and the shared base (tokens, presets, icon font, behaviors) into your project - [CLAUDE.md](https://rift-ds.com/CLAUDE.md): how this repository is *maintained* (architecture, registries, workflows). Written for contributors to the system itself, not for people using the package: for that, read design.md below and the README - [GitHub source](https://github.com/robritacca-dotcom/rift-ds): the full source, if you want to read the implementation - [design.md](https://rift-ds.com/design.md): the full design specification (tokens, colours, typography, component rules) - [content-design.md](https://rift-ds.com/content-design.md): the writing rules (voice, register by surface, words and patterns the project never ships) - [Sitemap](https://rift-ds.com/sitemap.xml)