v1Treadle — Human + AI Interface System
Every component available in the Treadle design system, plus the color and typography guidelines behind them. Pick something from the nav to get started.
A vertically stacked set of interactive headings that reveal a section of content.
Displays a short, important message in a way that attracts the user's attention.
A modal dialog that interrupts the user with important content and expects a response.
Displays content within a fixed, desired ratio.
An image element with a fallback for representing a user.
Displays a small count, label, or status indicator.
Displays the path to the current resource using a hierarchy of links.
Triggers an action or event, such as submitting a form or opening a dialog.
Groups related buttons together with a shared, connected border.
A date field component that lets users enter and edit a date.
A container for grouping related content and actions.
A motion-aware, touch-friendly carousel for cycling through panels of content.
A control that allows the user to toggle between checked and not checked.
An interactive component which expands and collapses a panel.
Autocomplete input and command palette used to choose a value.
A fast, composable command menu for searching and running actions.
A menu triggered by a right click, positioned relative to the trigger.
A window overlaid on the page, rendering content that requires focus or input.
A panel that slides in from the edge of the screen, built on Base UI.
Displays a menu of actions or options triggered by a button.
Displays a menu of actions or options triggered by a button.
A placeholder for empty states, with an icon, title, and description.
Layout primitives for building consistent, accessible form fields.
Preview content behind a link or trigger when a user hovers over it.
Displays a form input field for collecting text from the user.
Combines inputs with addons, icons, and buttons into a single control.
An accessible one-time password input, built on top of input-otp.
A flexible layout primitive for rows of content, like list and menu entries.
Displays a keyboard shortcut or key combination.
Renders an accessible label associated with a form control.
A persistent, horizontal set of menus, common in desktop applications.
A styled wrapper around the browser's native select element.
A collection of links and flyout content for site or app navigation.
Navigate between pages of content with page numbers and controls.
Displays rich content in a portal, anchored to a trigger element.
Displays an indicator showing the completion progress of a task.
A set of checkable buttons where only one may be checked at a time.
Accessible, resizable panel groups and layouts with keyboard support.
Augments native scroll with a custom, cross-browser scrollbar.
Displays a list of options for the user to pick from, triggered by a button.
Visually or semantically separates content.
Extends the Dialog component to display content that complements the main view.
A composable, themeable sidebar. This is what powers the nav on this page.
Used to show a placeholder while content is loading.
An input for selecting a value or range from within a set range.
An opinionated toast notification component.
An animated loading indicator.
A control that toggles between checked and not checked, like a light switch.
A responsive table for displaying rows and columns of data.
A set of layered sections of content, shown one at a time.
Displays a multi-line form input field for collecting text.
A two-state button that can be either on or off.
Groups related options where users can select one or multiple states.
A popup that displays information related to an element on hover or focus.
Categorical, sequential, diverging, semantic, and density color scales for charts — validated for colorblind-safe separation in both themes.
For the simple 80% — radial, pie/donut, and basic radar, built on Recharts and already integrated with the shadcn tokens and components.
For security, infrastructure, AI, SaaS and platform products. Ex. multi-series line, area, stacked area, stepped line, threshold bands, anomaly markers, event markers, zoomable timelines, brush selection, comparative time periods
A horizontal bar chart for ranking discrete categories by magnitude, plus a grouped bar chart for comparing multiple series side by side.
A scatter plot encoding two continuous measures plus size, for outlier and cluster inspection. Ex. Risk × Exposure
A day × hour activity matrix using the sequential color scale to encode magnitude. Ex. security events, traffic, system activity, user behavior, model performance, infrastructure utilization, risk, anomaly detection
A force-directed graph for entity relationships — identity, device, user, and application links.
Compares many entities across several ordered dimensions at once — excellent for multidimensional enterprise data like risk, exposure, activity, trust, and severity.
Traces how volume splits and merges across stages. Perfect for: data flows, event pipelines, security telemetry, user journeys, AI agent workflows, system architecture
A treemap for hierarchical part-to-whole data, like infrastructure or resource allocation: infrastructure, storage, application inventory, organizational hierarchy, resource allocation, security exposure.
A vertical event stream for chronological activity, with status-marked entries.
A sortable data grid built on TanStack Table, for raw-data exploration alongside charts.