Component Library

HSV color picker with hue, saturation, and brightness sliders, a hex field, and optional preset swatches.

Linear-gradient builder: edit stop colors and positions, set the angle, with a live preview.

Dropzone that opens the platform file/image picker and lists selected files with removal.

Multiple-choice picker with search, select-all, removable value tags, a custom footer, and distinct empty and no-match states.

Month-grid date selection with keyboard navigation, min/max range, and today/selected states.

Compact date field that opens a Calendar in a portalled overlay; commits on selection.

Single-line text entry, with TextField for labelled fields and InputGroup for adornments, prefixes, and attached controls.

Legacy convenience text input.

Labeled input with description and error slots.

Input configured for search return behavior.

Multiline text field with label, description, error, optional character counting, and an explicit growth policy.

Vertical field wrapper for labels, descriptions, required markers, errors, and controls.

Grouped form section with legend, description, and stacked field content.

Vertical progress list for setup, onboarding, and multi-step form flows.

One-time-code field with grouped slots, platform autofill, paste distribution, and progress announced as you type.

Label, description, and error wrapper for controls.

Independent on/off choice with indeterminate, invalid, and read-only states, plus a CheckboxGroup for related options.

On/off switch with three sizes, a slim treatment, label and description composition, and read-only and invalid states.

A single composable radio control, for rows that need custom content beyond a flat label and description.

One-of-many choice as a list or as selectable cards, with icon, avatar, price, badge, and secondary-action slots.

Single-choice picker with sections, rich items, a searchable combo-box mode, and a popover-on-web / sheet-on-native overlay.

Range input with one or two thumbs, supporting drag, keyboard, and assistive-technology adjustment with step snapping and value announcement.

Untitled UI icon set ported to react-native-svg (207 glyphs). Each renders through the shared Icon wrapper, inheriting size, theme color, and stroke.

Theme-aware layout primitive powered by Restyle.

Theme-aware text primitive with semantic variants.

Theme provider used at the app root for all Restyle components.

Hook for reading theme tokens inside custom components.

Radar / spider chart plotting a value on each of several axes as a filled polygon.

Vertical timeline of events with leading markers, titles, descriptions, and timestamps.

Chat transcript of message bubbles — own messages align right in a brand bubble.

Horizontally paged slides with position dots; snaps per slide on all platforms.

Overlapping stack of avatars with a "+N" overflow chip past a maximum.

A badge paired with descriptive text in one pill — for announcements and callouts, with leading or trailing placement and an optional action.

Tonal container that frames an icon, in light, dark, outline, and modern treatments across four sizes and two shapes.

Interactive star rating, plus a composed award badge pairing a score with title, subtitle, and review metadata.

Multi-series line chart with optional area fill and baseline grid; theme-colored series with a legend.

Vertical bar chart for comparing a small set of categories, sharing a zero baseline.

Pie or donut chart showing category proportions, with a percentage legend.

KPI stat tile with a prominent value, trend-toned change caption, and optional sparkline.

Data-driven table for dense screens: sortable columns, multiple row selection, and full table accessibility roles.

Person or entity representation with image, initials, and placeholder states, six sizes, presence, verified, and custom badge overlays.

Compact status or metadata label with six semantic tones plus seven non-semantic accent tones, four treatments, a pill or square shape, three sizes, dots, counts, adornments, and optional press and remove actions.

Renders text as a scannable QR code in SVG, with error-correction levels, quiet-zone control, a bounded centre overlay, and explicit capacity reporting.

Dark code surface for a command or snippet: plain monospace text, horizontal scrolling for long lines, and a copy affordance on web.

Deprecated. Compact metadata pill superseded by Badge (static status/count labels) and TagGroup (removable or selectable pill sets). Kept functional only while call sites migrate.

A row of tags: static labels, or single/multiple selection, with per-tag and group removal, dots, counts, and avatar slots.

Divider with tokenized spacing, color, thickness, and orientation.

Hierarchical, expandable tree with keyboard navigation and role="tree" semantics.

App-shell sidebar with header, grouped nav sections, and footer; active item marked aria-current.

Searchable command palette in a portalled overlay with keyboard navigation and grouping.

Toolbar for a filtered collection: search field, removable applied-filter tags, and trailing controls.

Navigation trail of ancestor links ending in the current page.

Pill-style and underline tabs with icons, badges, disabled tabs, sizing, and animated content.

Controlled segmented selection primitive for compact view switching.

Action menu owning its trigger and overlay, with sections, icons, shortcuts, destructive items, and a Popover for interactive content.

Sidebar-style navigation row with active, disabled, leading, trailing, badge, and description states.

Grouped row shell with muted, raised, outlined, and density variants.

Expandable disclosure card with description, disabled, and surface variants.

Header slot for a Card: optional leading media, title + description, and trailing actions.

Screen-level gradient background with theme-aware dashboard lighting.

Theme-aware lit panel surface used by elevated cards and dashboard panels.

Neutral container with tokenized surface variants and density controls.

Grouped content container with lit elevated, outlined, muted, and density states.

Legacy app convenience container.

Small floating card surface.

Modal overlay primitive used by dialogs and sheets.

Centered modal dialog with structured header, body, footer, density, and surface variants.

Bottom-positioned modal sheet with handle, structured header, footer, density, and surface variants.

Footer for a section or card: leading info and trailing actions with an optional top divider.

Vertical layout helper with tokenized gaps.

Horizontal layout helper for aligned rows.

Wrapping horizontal layout helper.

Dashboard page heading with eyebrow, subtitle, and action slot.

Section heading with supporting description and action slot.

Full-screen background surface helper.

Elevated content panel helper.

ScrollView wrapper with tokenized content padding and spacing.

ScrollView wrapper reserved for scroll affordances.

Compact in-content call-to-action with title, description, optional media, and a trailing action.

Contextual hint with a required title, an optional secondary description, aligned placements, an arrow, and hover delay — shown on hover and focus on web, long press on native.

Inline status message with semantic tone, variant, compact, and action states.

Full-width status banner for page-level messages and optional actions.

Inline contextual message with tone, optional icon, and optional action.

Centered placeholder for empty lists, filtered results, and setup prompts.

Transient elevated status message with semantic tone, density, and action states.

Linear and circular progress with four label placements, full-ring and half-gauge shapes, and a distinct indeterminate state.

Activity indicator with theme color and native sizes.

Animated loading placeholder with live theme token colors.

Stack of skeleton placeholders.

Generic text wrapper with a default body variant.

Convenience alias for the title text variant.

Convenience alias for the subtitle text variant.

Convenience alias for section headings.

Convenience alias for body copy.

Compact body text variant.

Caption text for metadata and annotations.

Convenience alias for label text.

Convenience alias for inline link text.

Label text for controls and inputs.

Muted supporting copy for forms and cards.

Error copy for validation states.

Action control with four emphasis variants, three semantic tones, five sizes, icon slots, loading, and navigational semantics.

Joined group of adjacent segments: an action group, or a single- or multiple-selection control with group and per-item disabled states.

Icon-only actions and dismiss controls: IconButton with variant, tone, size, and loading, plus regular and inverse CloseButton.

Legacy convenience button built on TouchableOpacity.

Pressable text link.

Pressable wrapper with opacity and scale feedback.

Pressable elevated content surface.

Composed label-and-value surface for consistently presenting entity details.

Composed entity summary with optional leading, trailing, and pressable content.

Composed assertive error message with an optional retry action.

Composed polite loading announcement pairing an indicator with context.

Composed priority switch for loading, error, empty, and content-ready screen states.

Composed single-select filter group with radio semantics and pill styling.

Composed search field and submit action for list and directory filtering.

Composed screen and scroll surface providing standard page spacing and optional refresh.

Composed content surface with optional title and supporting subtitle hierarchy.

Composed previous/next navigation with an accessible live result range.