Components

179 components across 9 categories. Pick one to see it live, copy the usage, and read its props.

Accordion

python Core UI

Accordion/collapsible sections component.

1 example

Alert

template Core UI

Alert component for contextual feedback messages.

1 example

Avatar

template Core UI

Avatar component with optional status indicator.

1 example

Badge

template Core UI

Style-agnostic badge component using CSS custom properties.

1 example

Button

template Core UI

Style-agnostic button component using CSS custom properties.

1 example

Callout

python Core UI

Callout/blockquote component.

2 examples

Card

template Core UI

Style-agnostic card container using CSS custom properties.

1 example

Checkbox

template Core UI

Code Snippet

python Core UI

Code block with copy button and language badge.

1 example

Collapsible

python Core UI

Collapsible/expandable section component.

2 examples

Dropdown

template Core UI

Dropdown menu component.

1 example

Dropdown Menu

python Core UI

Style-agnostic dropdown menu component.

1 example

Input

template Core UI

Kbd

python Core UI

Keyboard shortcut display component.

2 examples

Meter

python Core UI

Style-agnostic meter / stacked progress component.

2 examples

Modal

template Core UI

Modal dialog overlay component.

Pagination

template Core UI

Pagination controls component.

1 example

Popover

python Core UI

Popover overlay component.

1 example

Progress

template Core UI

Progress bar component for task completion.

1 example

Radio

template Core UI

Rating

python Core UI

Star rating component.

1 example

Select

template Core UI

Skeleton

template Core UI

Skeleton loading placeholder component.

1 example

Spinner

python Core UI

Style-agnostic spinner component using CSS custom properties.

3 examples

Switch

python Core UI

Style-agnostic toggle switch component using CSS custom properties.

2 examples

Tabs

template Core UI

Tab navigation component.

1 example

Tag

python Core UI

Style-agnostic tag/chip component using CSS custom properties.

3 examples

Textarea

template Core UI

Toast

template Core UI

Style-agnostic toast notification component using CSS custom properties.

1 example

Toggle Group

python Core UI

Segmented toggle button group component.

1 example

Tooltip

template Core UI

Tooltip component.

1 example

Segmented Progress

python Core UI

Style-agnostic segmented progress bar with labeled steps.

1 example

Breadcrumb

template Navigation

Breadcrumb navigation component.

1 example

Breadcrumb Dropdown

python Navigation

Breadcrumb navigation with overflow collapse into dropdown.

1 example

Nav

template Navigation

Nav Group

template Navigation

Nav Item

template Navigation

Nav Menu

python Navigation

Horizontal navigation menu component.

1 example

Scroll Spy

python Navigation

Style-agnostic scroll spy component.

1 example

Scroll To Top

python Navigation

Floating scroll-to-top button that appears after a scroll threshold.

1 example

Sidebar

python Navigation

Sidebar navigation component.

1 example

Sidebar Nav

template Navigation

Stepper

python Navigation

Step indicator/wizard progress component.

1 example

Wizard

python Navigation

Style-agnostic multi-step form wizard using CSS custom properties.

1 example

Sticky Header

python Navigation

Sticky header component.

1 example

Table Of Contents

python Navigation

Table of contents navigation component.

1 example

Toolbar

python Navigation

Toolbar component with button groups.

1 example

Color Picker

python Forms

Color picker with swatches component.

1 example

Combobox

python Forms

Searchable select (combobox) component.

1 example

Cron Input

python Forms

Visual cron expression builder with human-readable preview.

1 example

Currency Input

python Forms

Numeric input with currency symbol prefix and formatting hints.

1 example

Date Picker

python Forms

Server-rendered calendar date picker component.

1 example

Dependent Select

python Forms

Cascading dropdown that reloads options when a parent field changes.

1 example

Fieldset

python Forms

Fieldset with legend component.

1 example

Form Array

python Forms

Style-agnostic form array component.

1 example

Form Group

python Forms

Form group wrapper component.

1 example

Form Validation

python Forms

Renders inline validation error for a single form field.

Input Group

python Forms

Input group wrapper component (prefix/suffix addons).

1 example

Mentions Input

python Forms

Text input that triggers a user mention dropdown on @ character.

1 example

Multi Select

python Forms

Multi-select checkbox list component.

1 example

Number Stepper

python Forms

Numeric +/- stepper input component.

1 example

Otp Input

python Forms

One-time code input component.

1 example

Rich Select

python Forms

Select dropdown where each option can include icons, images, descriptions,

1 example

Signature Pad

python Forms

Canvas-based signature capture pad.

1 example

Tag Input

python Forms

Tag input component for adding/removing tags.

1 example

Time Picker

python Forms

Style-agnostic time picker component using CSS custom properties.

1 example

Voice Input

python Forms

Mic button with recording animation for speech input.

1 example

Activity Feed

python Data Display

Real-time activity feed with streaming support.

1 example

Audit Log

python Data Display

Style-agnostic audit log table component.

1 example

Code Block

python Data Display

Code block with syntax highlighting component.

1 example

Terminal

python Data Display

Monospace terminal emulator display with ANSI color support.

1 example

Comparison Table

python Data Display

Feature comparison table for SaaS plans / product tiers.

1 example

Data Card Grid

python Data Display

Filterable card grid layout.

1 example

Data Grid

python Data Display

Editable spreadsheet-like data grid with cell editing, column resize,

1 example

Data Table

python Data Display

Data table component for tabular data display.

1 example

Description List

python Data Display

Description list (term/detail pairs) component.

1 example

Diff Viewer

python Data Display

Side-by-side or unified text diff viewer.

1 example

Expandable Text

python Data Display

Style-agnostic expandable text component using CSS line-clamp.

1 example

Inline Edit

python Data Display

Inline edit component for in-place text editing.

1 example

Json Viewer

python Data Display

Interactive collapsible JSON tree viewer.

1 example

Log Viewer

python Data Display

Monospace streaming log display with level coloring.

1 example

Markdown

python Data Display

Render Markdown text as sanitized HTML.

1 example

Pivot Table

python Data Display

Configurable pivot table that aggregates data by row/column dimensions.

1 example

Source Citation

python Data Display

Inline footnote marker with hover popover showing source details.

1 example

Table

template Data Display

Timeline

python Data Display

Timeline component.

1 example

Tree View

python Data Display

Expandable tree view component.

1 example

Truncated List

python Data Display

Style-agnostic truncated list component.

1 example

Virtual List

python Data Display

Paginated virtual list component.

1 example

Bar Chart

python Charts

Style-agnostic SVG bar chart using CSS custom properties.

1 example

Calendar Heatmap

python Charts

Style-agnostic SVG calendar heatmap (GitHub contribution style).

1 example

Calendar View

python Charts

Month/week/day calendar view with event slots.

1 example

Gantt Chart

python Charts

SVG Gantt chart for project management timelines.

1 example

Gauge

python Charts

SVG donut/gauge chart component.

1 example

Heatmap

python Charts

Style-agnostic SVG heatmap using CSS custom properties.

1 example

Line Chart

python Charts

Style-agnostic SVG line chart using CSS custom properties.

1 example

Pie Chart

python Charts

Style-agnostic SVG pie/donut chart using CSS custom properties.

1 example

Sparkline

python Charts

Style-agnostic inline sparkline using SVG.

1 example

Treemap

python Charts

Style-agnostic SVG treemap using CSS custom properties.

1 example

Stat Card

python Charts

Style-agnostic stat card component using CSS custom properties.

3 examples

Aspect Ratio

python Media

Aspect ratio container component.

1 example

Avatar Group

python Media

Style-agnostic avatar group using CSS custom properties.

1 example

Carousel

python Media

Image carousel/slideshow component.

1 example

File Dropzone

python Media

Drag-and-drop file upload zone component.

1 example

File Tree

python Media

File browser tree with icons, expand/collapse, and selection.

1 example

Image Cropper

python Media

Drag-to-crop image component with optional aspect ratio lock.

1 example

Image Lightbox

python Media

Full-screen image viewer overlay with navigation.

1 example

Image Upload Preview

python Media

Multi-image upload with thumbnail preview.

1 example

Map Picker

python Media

Click-to-pick location on a Leaflet/OSM map.

1 example

Org Chart

python Media

Hierarchical org chart / tree visualization.

1 example

Responsive Image

python Media

Picture element with srcset, lazy loading, and blur-up placeholder.

1 example

Agent Step

python Feedback

AI agent tool-use step card.

1 example

Approval Gate

python Feedback

Inline confirmation card for AI agent actions with risk levels.

1 example

Connection Status

python Feedback

Slim bar showing WebSocket state.

2 examples

Content Loader

python Feedback

Style-agnostic content loader / suspense component.

1 example

Empty State

python Feedback

Empty state placeholder component.

1 example

Error Boundary

python Feedback

Style-agnostic error boundary component.

2 examples

Error Page

python Feedback

Styled error page with code, title, message, and action.

1 example

Live Indicator

python Feedback

Shows 'Alice is typing...' style indicator per field.

1 example

Loading Overlay

python Feedback

Loading overlay component.

2 examples

Notification Badge

python Feedback

Style-agnostic notification badge using CSS custom properties.

3 examples

Notification Center

python Feedback

Notification bell with dropdown list component.

1 example

Notification Popover

python Feedback

Style-agnostic notification popover using CSS custom properties.

1 example

Page Alert

python Feedback

Style-agnostic full-width page alert / banner component.

1 example

Server Event Toast

python Feedback

Status Dot

python Feedback

Style-agnostic animated status indicator dot using CSS custom properties.

1 example

Status Indicator

python Feedback

Style-agnostic status indicator with colored dot and optional label.

2 examples

Thinking Indicator

python Feedback

Animated status indicator for AI processing states.

1 example

App Shell

python Layout

Application shell layout component.

1 example

Bottom Sheet

python Layout

Style-agnostic bottom sheet / drawer component.

1 example

Dashboard Grid

python Layout

CSS Grid layout with draggable and resizable dashboard panels.

1 example

Fab

python Layout

Floating action button component.

1 example

Hover Card

python Layout

Style-agnostic hover card using CSS custom properties.

1 example

Masonry Grid

python Layout

Pinterest-style masonry grid layout.

1 example

Page Header

python Layout

Page-level header with title, subtitle, and optional actions.

1 example

Resizable Panel

python Layout

Container with a drag-to-resize handle.

1 example

Ribbon

python Layout

Corner ribbon overlay badge.

1 example

Scroll Area

python Layout

Scrollable area container component.

1 example

Sheet

python Layout

Sheet/drawer overlay component.

1 example

Split Pane

python Layout

Split pane/resizable layout component.

1 example

Animated Number

python Advanced

Animated counting number display.

1 example

Announcement Bar

python Advanced

Announcement/banner bar component.

1 example

Chat Bubble

python Advanced

Single chat message bubble with sender avatar, timestamp, and delivery status.

1 example

Collab Selection

python Advanced

Highlights text or cell ranges selected by other users.

1 example

Command Palette

python Advanced

Command palette/search overlay component.

1 example

Context Menu

python Advanced

Context menu (right-click menu) component.

1 example

Conversation Thread

python Advanced

Chat-style message thread with sender avatars, timestamps, and grouping.

1 example

Cookie Consent

python Advanced

Style-agnostic cookie consent banner.

1 example

Copy Button

python Advanced

Copy-to-clipboard button component.

1 example

Copyable Text

python Advanced

Inline click-to-copy text with "Copied!" tooltip feedback.

2 examples

Countdown

python Advanced

Style-agnostic countdown timer component.

2 examples

Cursors Overlay

python Advanced

Overlay showing other users' cursor positions in real-time.

1 example

Export Dialog

python Advanced

Style-agnostic export dialog component.

1 example

Feedback Widget

python Advanced

Thumbs up/down, star rating, or emoji feedback widget.

1 example

Filter Bar

python Advanced

Filter bar component with filter controls.

1 example

Icon

python Advanced

Icon component wrapper.

3 examples

Infinite Scroll

python Advanced

Style-agnostic infinite scroll component.

2 examples

Import Wizard

python Advanced

Style-agnostic import wizard component.

1 example

Kanban Board

python Advanced

Kanban board component.

1 example

Live Counter

python Advanced

Animated counter updating in real-time via WebSocket push.

1 example

Markdown Editor

python Advanced

Split-pane markdown editor with live preview.

1 example

Markdown Textarea

python Advanced

Style-agnostic textarea with markdown preview toggle.

1 example

Model Selector

python Advanced

Rich select for AI model selection with metadata display.

1 example

Multimodal Input

python Advanced

Text area with optional file attachment and voice input buttons.

1 example

Presence Avatars

python Advanced

Stacked avatar group showing online/present users with status dots.

1 example

Progress Circle

python Advanced

Style-agnostic circular progress indicator using SVG stroke-dasharray.

2 examples

Prompt Editor

python Advanced

Template editing with {{variable}} highlighting.

1 example

Qr Code

python Advanced

Pure SVG QR code generator.

1 example

Reactions

python Advanced

Slack-style emoji reactions with live-updating counts.

1 example

Relative Time

python Advanced

Displays a datetime as relative text ("3 hours ago") with optional

1 example

Rich Text Editor

python Advanced

Basic rich text editor component (contenteditable + toolbar).

1 example

Skeleton Factory

python Advanced

Style-agnostic skeleton loading state generator.

1 example

Sortable Grid

python Advanced

2D drag-and-drop grid layout.

1 example

Sortable List

python Advanced

Drag-and-drop reorderable list.

1 example

Split Button

python Advanced

Split button with primary action and dropdown menu.

1 example

Streaming Text

python Advanced

Renders text arriving incrementally via WebSocket with typing cursor.

2 examples

Theme Toggle

python Advanced

Light/dark/system theme toggle component.

2 examples

Token Counter

python Advanced

Compact progress display showing token usage versus limit.

2 examples

Tour

python Advanced

Product tour with spotlight highlights and step navigation.