React Native components

Base frosted layer used by bars, cards, and overlays.

Preset gradients, custom uploads, or reset to default mesh backgrounds.

Expressive saturated panels beneath floating chrome controls.

Neutral Liquid Glass capsule for grouped media controls.

Circular chrome buttons for icon-only actions.

Live preview with syntax-highlighted source and copy.

Chrome and content layer variants with shapes and sizes.

Clipboard copy control with temporary copied feedback.

Light and dark mode switch for app chrome and docs.

Change the app font family — sans, serif, mono, and system stacks.

Pressable glass toggle with spring scale feedback.

Capsule container for exclusive or multi-select toggles.

Frosted glass panels for chrome and expressive content.

Glass capsule tabs with sliding chrome indicator.

Chrome dividers for horizontal and vertical layout.

Stack, Cluster, Grid, Flex, Center, Split, Container, Box, and Spacer — replace nested layout divs with named primitives.

Drag-to-resize panel groups with glass grip handle.

Custom scrollbar with optional chrome container.

Container that locks media to a consistent ratio.

Translucent glass text fields with chrome and outline variants.

Accessible form labels with chrome, muted, and required styles.

Glass password field with show/hide toggle and field states.

One-time code slots with paste support and completion callback.

Multiline glass inputs with size and state variants.

Frosted dropdown with rise-in panel and animated checks.

Searchable select with filterable options and keyboard navigation.

Drag-and-drop glass uploader with browse and selected file list.

Styled native HTML select with glass field styling.

Glass checkbox with animated check and indeterminate states.

Frosted toggle switch with spring-animated thumb.

Glass radio controls with primary indicator dot.

Frosted date picker with range and multi-select modes.

Searchable multi-value select with chips and keyboard navigation.

Composer with Enter-to-send and token estimate.

Quick-start prompt chips for empty chat states.

Model picker with provider and description metadata.

Search field with icon, clear control, and glass field variants.

Masked short PIN slots for secure numeric entry.

Numeric field with steppers, min/max, step, and arrow keys.

Money field with searchable selector for all ISO currencies, symbols, and decimals.

International phone with all-country dial codes, search, national format, and E.164.

Swatches, hex entry, and native picker in a glass popover.

Accessible star rating with keyboard support and half stars.

Hour/minute columns with 12/24h mode and typed time entry.

Year-navigated month grid for filters and reporting periods.

Calendar + time composite for scheduling and admin filters.

Country → State → City cascading selectors (select-only, full world data).

Searchable country picker for addresses with flags.

State/province picker cascading from country.

City picker cascading from country + state.

Highly transparent modal with frosted overlay and rise-in content.

Confirmation modal for destructive and irreversible actions.

Edge slide-in glass panel with spring animation.

Drag-to-dismiss glass panel with a handle and optional snap points.

Click-triggered frosted panel for contextual actions.

Glass action menus with checkboxes, radios, and nested submenus.

Right-click glass menus for lists, tables, and canvases.

Rich hover previews with spring scale-in animation.

Frosted contextual hints with spring scale-in.

Filterable command palette with dialog mode and keyboard nav.

Chat-style corner bubble with a compact panel for feedback or messaging.

Collapsible glass sidebar with mobile sheet and icon rail.

Multi-level header navigation with glass content panels.

Hierarchical path navigation with separators and ellipsis.

Styled anchors with variants, sizes, external safety defaults, and asChild for Next.js.

Accessible page navigation with glass button links.

Floating glass button that appears after scrolling.

Pinned conversation list with active state and new chat.

macOS-style glass dock with magnification and tooltips.

Mobile tab bar with badges, safe-area, and glass chrome.

Month event grid with color chips, agenda sidebar, and day selection.

Glass-styled data table with chrome container and hover rows.

Compound empty-state layout with icon media slot.

Glass pulse loading placeholders.

Agent identity card with status and tools strip.

Expandable viewer for tool args, results, and errors.

MCP server status with tools and resources counts.

Glass KPI / statistic card with value, trend delta, icon, and footer slot.

Pure SVG line series with glass chrome, grid, and point markers.

Filled SVG area series with primary gradient under the line.

Compact inline sparkline for KPI cards and dense metric rows.

Donut segments with legend, center total, and token colors.

Time-range control with presets, app-defined periods, and custom from/to range.

Dashboard chart shell with title, description, period toolbar, legend, and footer.

Vertical or horizontal pure SVG bars with labels and grid.

Solid pie segments with legend and token-aware colors.

Multi-series stacked columns with legend and category labels.

Spider/radar polygon for multi-axis skill or score profiles.

Conversion funnel stages with tapering widths and labels.

Matrix heatmap with color scales, labels, legend, values, and interactive cells.

Squarified hierarchical tree map — tile area proportional to value.

Weighted flow diagram with multi-column nodes and ribbons.

Semi-circular gauge with needle, domain mapping, and threshold bands.

Vertical event timeline with status dots and timestamps.

Scrollable activity list with avatars, actions, and times.

Drag-and-drop task board with columns, cards, and labels.

Sortable, filterable, selectable table for admin apps.

Windowed table for large datasets with infinite-scroll hook.

Status alerts with semantic tints and optional icons.

Transient Liquid Glass notifications with imperative API and stacking.

Glass avatars with image, fallback initials, and stacked groups.

Glass pill badges with scale-in mount animation.

Keyboard key labels for shortcuts and hints.

Loading spinner with arc, ring, dots, bars, pulse, and apple types.

Frosted progress bar with spring-animated fill.

Inbox-style notifications with unread, mark-read, and dismiss.

Animated dots while the assistant composes a reply.

Thinking/processing status for agent and chat UIs.

Token usage badge with estimate and limit states.

Full-width status banner with sticky/fixed modes and dismiss.

Doc-style callout for tips, warnings, dangers, and notes.

Network-aware banner for offline state and reconnect flash.

Fullscreen, overlay, inline, or panel loading with spinners.

Error empty state with primary retry action and action slots.

Expandable chrome panels with rotating chevron.

Standalone expand/collapse panel and file-tree layout.

Frosted range slider with spring-animated thumb.

Embla-powered slides with glass viewport chrome.

Ordered steps with completed, active, and upcoming states.

Semantic text primitives for headings, body, and code.

Glass-styled markdown with Shiki syntax highlighting.

Rich-text and markdown editing with split preview.

Glass code surface with line numbers and copy.

Terminal transcript with prompts and output lines.

Pretty-print and validate JSON with line numbers.

Composable chat shell with user and assistant bubbles.

Progressive reveal for streaming model responses.

Collapsible chain-of-thought panel for AI responses.

Source citation with index, excerpt, and optional link.

Lightbox gallery with zoom, pan, captions, and download.

Glass audio/video player with CC, quality selector, seek, and volume.

Crop, rotate, flip, filters, and canvas export for images.