Tangible Design System

@tangible/ui is the React design system for Tangible's WordPress plugins: components, CSS custom-property tokens and cascade-layered styles, accessible by default. Every component renders inside a .tui-interface root.

Open the interactive Storybook · llms.txt

Start here

• Building with TUI: Integration guide for apps built on @tangible/ui: styles and the .tui-interface root, portals, theming, Field ARIA wiring, imports, testing.

Guides

• About: Tangible Design System will provide the foundational tokens, utilities, and components used across Tangible products to keep our UIs consistent and maintainable, and enforce best-practices wherever…
• Getting Started: Some components require additional packages. Install only what you use.
• Guides / Chip vs Button: Both components can look identical at small sizes and in ghost or outline variants. The difference is not visual — it is semantic. Choosing the wrong one produces the wrong ARIA contract and…
• Guides / Tabs vs SegmentedControl: Both components let a user select one option from a set, and both share the same visual variants (pill, underline, outline). The difference is not visual — it is semantic. Choosing the wrong one…
• System / Architecture: This document describes where things live in the Tangible UI codebase.
• System / Border Helpers: Tangible UI includes a small set of border utilities for common use cases.
• System / Layout Helpers: Layout utilities provide low-level building blocks for spacing, positioning, alignment, and density. They are applied via utility classes prefixed with tui-. Layout helpers are low-level utilities…
• System / Naming: Tangible UI aims to be predictable to work with, hard to accidentally override, and polite to the host theme. This document describes how class names are structured, how styles are scoped, and how to…
• System / Typography Helpers: Helpers are one optional consumer of the typography tokens — prefer font-size: var(--tui-typography-size-sm) directly in your own CSS when you control it; the classes exist for markup-only contexts.…

Reference

• Reference / Component Tokens: Every component API token, collected from the /* @tui-tokens */ header each component's styles.scss maintains.
• Reference / Primitive Tokens: Every --tui-* custom property the system emits, read live from the loaded stylesheet — host overrides and new tokens show up here without doc edits. Values shown are light-mode defaults.
• Reference / Utility Classes: Every rule in the utilities cascade layer, read live from the loaded stylesheet. Selectors are shown relative to the .tui-interface scope.
• Tokens / Behavior: Tokens that control motion, opacity, and focus states across all components. These ensure consistent interaction feedback throughout the interface.
• Tokens / Colors: Theme colors use a subtle → strong scale that works across light and dark modes.
• Tokens / Generative Colors: The Jellybean Bag: deterministic pseudo-random identity colors for avatar initials, tags, and category accents. Explicitly not semantic — nothing here should read as a status.
• Tokens / Spacing: Prefer aliases (xxs-xxl) over primitives (1-50) where possible. Spacing tokens are for use as padding, gap, and margin values exclusively. When spacing must scale with screen, container, or text…
• Tokens / Typography: All type primitives live in one family, --tui-typography-*, following the system's token grammar: --tui-{category}-{axis}-{step} (see Naming).

Components

• Accordion: Accordion, Accordion.Item, Accordion.Trigger, Accordion.Panel: props, examples and API tokens.
• Avatar: Avatar, Avatar.Group: props, examples and API tokens.
• Button: Button: props, examples and API tokens.
• Calendar: Calendar: props, examples and API tokens.
• Card: Card, Card.Head, Card.Body, Card.Foot, Card.Media, Card.Link: props, examples and API tokens.
• Checkbox: Checkbox: props, examples and API tokens.
• Chip: Chip: props, examples and API tokens.
• ChipGroup: ChipGroup: props, examples and API tokens.
• Chips: Chips: props, examples and API tokens.
• ColorField: Popover-wrapped colour selector — a pill trigger with a circular icon-swatch and a label that opens a ColorPicker in a dialog popover. This is the reusable field-level control for colour inputs; the…
• ColorPicker: Solid colour picker: 2D area + hue/alpha sliders + a format-aware value row. The format selector switches the value field between a single hex string and per-channel inputs (rgb/hsl/hwb/oklch — hex…
• Combobox: Combobox, Combobox.Content, Combobox.Option, Combobox.Group, Combobox.Label: props, examples and API tokens.
• ContentIndicator: ContentIndicator: props, examples and API tokens.
• DataTable: DataTable: props, examples and API tokens.
• DatePicker: DatePicker, DatePicker.Trigger: props, examples and API tokens.
• DateRangePicker: DateRangePicker, DateRangePicker.Trigger: props, examples and API tokens.
• Dropdown: Dropdown, Dropdown.Trigger, Dropdown.Content, Dropdown.Item, Dropdown.Separator, Dropdown.Header: props, examples and API tokens.
• Field: A compound component that provides consistent wrapper structure for form fields with label, helper text, and error messaging. Handles all a11y wiring automatically.
• GradientPicker: Gradient picker: a stop strip with draggable thumbs, an editable CSS value field, a fully accessible colour-stop list (each stop opens a ColorPicker in a popover), and per-type geometry controls…
• Icon: Icon component for SVG icons from the registry or emoji characters.
• IconButton: IconButton: props, examples and API tokens.
• Modal: Modal, Modal.Head, Modal.Body, Modal.Foot, Modal.Close: props, examples and API tokens.
• MoveHandle: MoveHandle: props, examples and API tokens.
• MultiCombobox: MultiCombobox, MultiCombobox.Content, MultiCombobox.Option, MultiCombobox.Group, MultiCombobox.Label: props, examples and API tokens.
• MultiSelect: MultiSelect, MultiSelect.Trigger, MultiSelect.Content, MultiSelect.Option, MultiSelect.Group, MultiSelect.Label: props, examples and API tokens.
• NavMenu: NavMenu, NavMenu.Group, NavMenu.Item, NavMenu.Sub: props, examples and API tokens.
• Notice: Notice, Notice.Head, Notice.Body, Notice.Foot: props, examples and API tokens.
• Other exports: Non-component exports: GENERATIVE_COLORS, stringToGenerativeColor.
• OverlapStack: OverlapStack, OverlapStack.Overflow: props, examples and API tokens.
• Pager: Pager: props, examples and API tokens.
• Popover: Popover, Popover.Trigger, Popover.Content: props, examples and API tokens.
• Progress: Progress bar component with support for standard and segmented modes.
• RadioGroup: RadioGroup, RadioGroup.Item: props, examples and API tokens.
• Rating: Rating: props, examples and API tokens.
• SearchInput: SearchInput: props, examples and API tokens.
• SearchSelect: SearchSelect, SearchSelect.Trigger, SearchSelect.Content, SearchSelect.Option, SearchSelect.Group, SearchSelect.Label: props, examples and API tokens.
• SecretInput: SecretInput: props, examples and API tokens.
• SegmentedControl: SegmentedControl, SegmentedControl.Item: props, examples and API tokens.
• Select: Select, Select.Trigger, Select.Content, Select.Option, Select.Group, Select.Label: props, examples and API tokens.
• Sidebar: Sidebar, Sidebar.Header, Sidebar.Footer, Sidebar.Nav, Sidebar.Toggle: props, examples and API tokens.
• Slider: Slider: props, examples and API tokens.
• StepIndicator: StepIndicator: props, examples and API tokens.
• StepList: StepList, StepList.Item: props, examples and API tokens.
• Switch: Switch: props, examples and API tokens.
• Tabs: Tabs, Tabs.List, Tabs.Tab, Tabs.Panel: props, examples and API tokens.
• Textarea: Textarea: props, examples and API tokens.
• TextInput: TextInput: props, examples and API tokens.
• Toast: Presentational toast — an inline-layout Notice dressed for the toast stack (shadow, enter animation, icon | text | actions | × in one row).
• Toolbar: Toolbar, Toolbar.Group, Toolbar.Item: props, examples and API tokens.
• Tooltip: Tooltip, Tooltip.Provider, Tooltip.Trigger, Tooltip.Content: props, examples and API tokens.