Component Gallery

ObjectUI provides a comprehensive set of components built on React, Tailwind CSS, and Shadcn UI. All components are defined through JSON schemas and rendered with pixel-perfect quality.

Quick Navigation

Browse components by category to find what you need:

Basic Components

Essential building blocks: Text, Icon, Image, Separator, HTML

Form Components

Interactive inputs: Button, Input, Select, Checkbox, Switch, Textarea, Slider

Layout Components

Structure your UI: Container, Card, Grid, Flex, Stack, Tabs

Data Display

Show information: Badge, Avatar, Alert, List

Feedback Components

User feedback: Loading, Progress, Skeleton

Overlay Components

Floating elements: Dialog, Drawer, Tooltip, Popover

Disclosure Components

Show/hide content: Accordion, Collapsible

Complex Components

Advanced patterns: Table (with sorting, filtering, pagination)

Component Categories

Basic Components

The foundation of your UI. These are simple, single-purpose components:

• Text - Display text with typography control
• Icon - Render icons from Lucide React
• Image - Display images with lazy loading
• Separator - Visual divider between content
• HTML - Render raw HTML content

Form Components

Interactive elements for user input:

• Button - Trigger actions with multiple variants
• Input - Text input with validation
• Select - Dropdown selection
• Checkbox - Boolean selection
• Switch - Toggle switch
• Textarea - Multi-line text input
• Slider - Numeric range selection

Layout Components

Structure and organize your interface:

• Container - Responsive container with max-width
• Card - Content card with header and footer
• Grid - CSS Grid layout
• Flex - Flexbox layout
• Stack - Vertical or horizontal stack
• Tabs - Tabbed interface

Data Display

Present data to users:

• Badge - Small status indicators
• Avatar - User profile images
• Alert - Contextual messages
• List - Ordered or unordered lists

Feedback Components

Provide visual feedback:

• Loading - Loading spinner
• Progress - Progress bar
• Skeleton - Loading placeholder

Overlay Components

Floating UI elements:

• Dialog - Modal dialog
• Drawer - Slide-out drawer
• Tooltip - Hover tooltips
• Popover - Floating popover

Disclosure Components

Expandable content:

• Accordion - Expandable sections
• Collapsible - Toggle content visibility

Complex Components

Advanced, feature-rich components:

• Table - Data table with sorting, filtering, and pagination

Usage Pattern

All ObjectUI components follow the same schema-based pattern:

{
  "type": "component-name",
  "className": "tailwind-classes",
  "props": {
    // Component-specific properties
  }
}

Example: Button

{
  "type": "button",
  "label": "Click Me",
  "variant": "default",
  "size": "md",
  "className": "mt-4"
}

Example: Card with Form

{
  "type": "card",
  "title": "User Profile",
  "className": "max-w-md",
  "body": {
    "type": "form",
    "fields": [
      {
        "type": "input",
        "name": "name",
        "label": "Full Name"
      },
      {
        "type": "input",
        "name": "email",
        "label": "Email",
        "inputType": "email"
      }
    ]
  }
}

Features

All ObjectUI components share these characteristics:

• ✅ Schema-Driven - Define with JSON, not code
• ✅ Tailwind CSS - Use utility classes directly in schemas
• ✅ Accessible - WCAG 2.1 AA compliant
• ✅ Responsive - Mobile-first design
• ✅ Themeable - Light/dark mode support
• ✅ Type-Safe - Full TypeScript support
• ✅ Performant - Lazy-loaded and tree-shakable

Next Steps

• Quick Start Guide - Build your first ObjectUI app
• Schema Rendering - Learn how the engine works
• Component Registry - Register custom components
• Expressions - Dynamic values with expressions

Need Help?

Can't find what you're looking for? Check out:

• Concepts - Core concepts and architecture
• Advanced - API documentation and protocol specs
• GitHub - Report issues or contribute