SubstrateUI
ComponentsBlocksPatternsLayoutsTemplatesBuilderDemoDocsPricing
Get Started
All Components

Primitives

  • Accordion
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Checkbox Group
  • ColorPicker
  • Combobox
  • Command
  • Context Menu
  • DataGrid
  • DataTable
  • DatePicker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Editable
  • File Upload
  • Form
  • Form Field
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Kanban
  • Kbd
  • Label
  • Listbox
  • Mention
  • Menubar
  • Native Select
  • Navigation Menu
  • Number Field
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Resizable Panel
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sortable
  • Spinner
  • Switch
  • Table
  • Tabs
  • Tags Input
  • Textarea
  • TimePicker
  • Toast (Sonner)
  • Toggle
  • Toggle Group
  • Tooltip
  • Touch Target

Blocks

  • Abstract Block
  • Action Bar
  • Activity Feed
  • Activity Stream
  • Adaptive Dialog
  • Agent Status Card
  • Angle Slider
  • Assets Panel
  • Autocomplete
  • Avatar Group
  • Avatar Group
  • Badge Overflow
  • Balloon Callout
  • Breadcrumb Navigation
  • Bulk Actions Bar
  • Citation Mark
  • Code Block
  • Collapsible Section
  • Color Swatch
  • Comparison Slider
  • Console Panel
  • Copy Button
  • Data Table Basic
  • Detail Bubble
  • Dimension Annotation
  • Dock Panel
  • Empty State
  • Feature Control Chip
  • Figure Caption
  • Filter Controls
  • Filter Toolbar
  • Footnote
  • Gauge
  • Hierarchy Panel
  • Image Cropper
  • Inline Edit Form
  • Inline Suggestion
  • Key-Value Editor
  • KPI Dashboard Row
  • Layers Panel
  • List Item
  • Marquee
  • Masked Input
  • Masonry Grid
  • Media Player
  • Metric Row
  • Notification Bell
  • Number Scrubber
  • Number With Unit
  • Object Card
  • Phone Input
  • Prompt Bar
  • Property Inspector
  • QR Code
  • Quick Actions
  • Radial Progress
  • Reference List
  • Revision Marker
  • Ribbon Toolbar
  • Running Head
  • Scroll Spy
  • Search Input
  • Section Number
  • Segmented Input
  • Snappy Slider
  • Split View
  • Star Rating
  • Stat Card
  • Status Bar
  • Status Dot
  • Swap
  • Tab Dock
  • Theme Toggle
  • Title Block
  • Toolbar Strip
  • Transform Panel
  • Tree View
  • User Menu
  • Vector Field

Patterns

  • Agent Chat Panel
  • Agent Config Editor
  • Agent Cost Tracker
  • Agent Execution Trace
  • Agent Orchestration
  • Agent Prompt Editor
  • Agent Run History
  • Agent Sandbox Terminal
  • Agent Skill Browser
  • Agent Tool Panel
  • Agent Workflow Builder
  • AI Code Editor
  • AI Writing Editor
  • Animation Timeline
  • Audit Log
  • Auth Flow
  • AutoForm
  • Checkout Flow
  • Command Palette
  • Diff Review
  • Document Canvas
  • Entity Picker Modal
  • Error Boundary
  • Filterable Data Grid
  • Gantt Timeline
  • Generation Stream
  • Image Canvas
  • Infinite Canvas
  • Multi-Tenant Switcher
  • Node Editor
  • Notification Center
  • Onboarding Wizard
  • Pivot Table
  • RBAC Admin Panel
  • Sandbox Viewer
  • Settings Panel
  • Skill Activation Panel
  • State Machine Editor
  • Tool Definition Editor
  • Virtual Data Grid
  • Workflow Builder
  • Workflow Node Editor

Layouts

  • Dashboard Overview
  • Inbox Three-Pane
  • Marketing Landing
  • Multi-Panel
  • Settings Layout
  • Sidebar + Canvas
  • Workspace Layout

Templates

  • AI Agent Platform
  • CRM
  • Design Tool
  • Marketplace
  • SaaS Dashboard

Agent-legible design system

Components

Start with the free roster, then add finished Pro composition for property inspectors, data grids, docks, command surfaces, node editors, and agent-operations consoles.

67 primitives/79 blocks/42 patterns/7 layouts/5 templates

Showing 42 of 200 components in patterns

Filtered results

Error Boundary

Free

React error boundary with fallback UI, retry button, and error reporting

Sandbox Viewer

Pro

Live preview of sandboxed agent output with terminal, file tree, browser

Agent Chat Panel

Pro

Full AI chat with streaming, tool calls, generative UI, file attachments

Auth Flow

Pro

Complete sign-in/sign-up/forgot-password flow with social OAuth, MFA

AutoForm

Pro

Auto-generated form from Zod schema with all field types

Filterable Data Grid

Pro

Data grid with column filters, saved views, export, bulk actions

Node Editor

Pro

Visual programming node graph with typed ports, connections, groups

Onboarding Wizard

Pro

Multi-step onboarding with progress, validation, skip/back

Agent Config Editor

Pro

Agent configuration form with model selection, parameters, tool binding

Agent Cost Tracker

Pro

Real-time agent cost monitoring with token usage, spend breakdown, and limits

Agent Execution Trace

Pro

Step-by-step agent execution timeline with tool calls, results, and timing

Agent Orchestration

Pro

Multi-agent orchestration dashboard with workflow status, agent cards, and metrics

Agent Prompt Editor

Pro

Prompt template editor with variables, versioning, and test playground

Agent Run History

Pro

Agent execution history table with status, duration, cost, and detail view

Agent Sandbox Terminal

Pro

Sandboxed terminal emulator for agent code execution with output streaming

Agent Skill Browser

Pro

Browse and manage agent skills/tools with search, categories, and activation

Agent Tool Panel

Pro

Tool configuration panel with schema editor, test runner, and output preview

Agent Workflow Builder

Pro

Visual workflow builder for agent pipelines with nodes, edges, and conditions

AI Code Editor

Pro

Code editor with inline AI suggestions, diff view, accept/reject

AI Writing Editor

Pro

Rich text editor with AI suggestions, tone adjustment, expand/compress

Diff Review

Pro

Side-by-side and unified diff viewer with line comments and approve/reject

Document Canvas

Pro

Block-based document editor with drag-to-reorder, slash commands, and embeds

Entity Picker Modal

Pro

Search-and-select entity modal with table view, filtering, multi-select

Generation Stream

Pro

Streaming text generation display with typing animation and token counter

Image Canvas

Pro

Canvas-based image editor with pan, zoom, annotation tools, and layers

Pivot Table

Pro

Interactive pivot table with drag-to-configure rows, columns, values, and aggregations

Skill Activation Panel

Pro

Skill toggle panel with categories, descriptions, and activation controls

State Machine Editor

Pro

Visual state machine editor with states, transitions, guards, and actions

Tool Definition Editor

Pro

JSON schema editor for defining agent tools with parameter types and validation

Virtual Data Grid

Pro

Virtualized data grid for 100K+ rows with fixed columns, sorting, and cell editing

Workflow Node Editor

Pro

Node-based workflow editor with custom node types, connections, and minimap

Animation Timeline

Pro

Keyframe animation timeline with tracks, scrubbing, curve editor

Audit Log

Pro

Activity audit trail with filters, export, detail expansion

Checkout Flow

Pro

Multi-step checkout with cart, shipping, payment, confirmation

Command Palette

Pro

Global Cmd+K palette with actions, navigation, recent, search

Gantt Timeline

Pro

Project timeline with tasks, dependencies, milestones, resource view

Infinite Canvas

Pro

Pan/zoom canvas with minimap, grid snapping, selection rectangle

Multi-Tenant Switcher

Pro

Organization/workspace switcher with create, invite, settings

Notification Center

Pro

Full notification system with categories, read/unread, actions

RBAC Admin Panel

Pro

Role-based access control with users, roles, permissions matrix

Settings Panel

Pro

Multi-tab settings with form groups, profile, billing, notifications

Workflow Builder

Pro

Flow-based automation builder (n8n/Zapier style) with node library

© 2026 SubstrateUI. All rights reserved.
Built with SubstrateUI
0.1.0
Get Started
AllPrimitivesBlocksPatternsLayoutsTemplates