Components

Paginated, searchable data table with sortable columns and loading state.

Data grid with row selection, sorting, a column visibility menu, column resizing, and virtual scrolling for large datasets.

Smooth gradient area chart with series, tooltip, and legend.

A bar graph with one or more series, an optional stack, and a tooltip.

Multi-series line chart with dot markers, legend, and tooltip.

GitHub-style yearly activity contribution grid with hover tooltips.

Tremor-style ranked bar list with values and optional links — top sources, top pages.

KPI metric card with trend indicator, icon, and period comparison. Group with StatGroup.

Data grid with row selection and inline cell editing.

Compact inline trend chart for embedding in stat cards and tables.

Cell-grid heatmap with color ramp legend — usage, density, and correlation matrices.

Drag-and-drop file upload with preview, validation, and progress.

Calendar-based date picker with input field and range selection support.

Autocomplete combo box with searchable options and keyboard navigation.

Multi-step form pattern with progress indicator and per-step validation.

Schema-driven auto-generated form from a Zod schema — labels, helpers, and validation.

Inline color picker with HEX / RGB / HSL formats, optional alpha + swatches, and native eye-dropper.

Multi-select tag input with type-to-add, autocomplete suggestions, validation, and max-tags limit.

Single-row primitive for command menus — leading icon, label, hotkey badge.

Solid, outline, ghost, and destructive variants with icon and loading state support.

Interactive 0..N star rating with half-step support and full keyboard control.

Increment / decrement quantity control with min/max clamping and keyboard support.

Single-select product-option swatches (grind, size, color) with selected + out-of-stock states.

Text input field with full HTML input attribute support and accessible labeling.

Accessible checkbox with indeterminate state and label support.

Toggle switch for boolean settings with smooth animation.

Range slider with draggable handle and configurable min/max/step.

Single-choice radio button group with label, helper text, and disabled states.

Dropdown select with options, groups, search, and full keyboard navigation.

Form primitives integrated with React Hook Form and Zod schema validation.

Label + input + helper / error wrapper — the building block for every form row.

Label sits inside the field at rest, floats up + shrinks on focus or when filled.

Password field with show/hide toggle and accessible labeling.

Search-styled input with icon, clear button, and keyboard handling.

Dynamic array form field for repeating row inputs with add / remove controls.

Nested object form section with grouped fields and collapsible state.

Segmented dark / light / system theme switcher with smooth icon transitions.

Color palette picker dropdown — switch between branded color schemes.

Accessible dropdown menu with groups, separators, shortcuts, icons, checkboxes, and radio items.

A monthly calendar with week and day views. Click to create when onEventCreate is set. Drag to resize in week or day when onEventResize is set.

Cart row with thumbnail, title, variant, price, quantity stepper, and remove action.

Recursive expandable tree view with selection, drag-reorder, and virtualization for 1000+ nodes.

A timeline template: a chronological event list with an optional icon, a title, a description, a timestamp, and a connector.

Syntax-highlighted code preview powered by Shiki, with copy button, line numbers, and line highlights.

Key-value metadata display for detail panels and settings.

Before / after image slider with horizontal or vertical orientation and full keyboard support.

Image / media tile grid with hover details and aspect-ratio preserved.

HTML5 video player with custom controls, scrubber, volume, fullscreen, and chapters.

Infinite-scrolling row of children — logos, testimonials, badges. Pure CSS, fade edges, pause-on-hover.

Formatted currency price with optional compare-at strikethrough and discount pill.

Theme-aware QR code generator with adjustable size, error-correction level, and optional center logo.

User avatar with image, fallback initials, and optional status indicator.

Status and category labels in default, secondary, destructive, and outline variants.

Stacked overlapping avatars with overflow count for team and member lists.

Auto-scrolling logo strip for marketing social-proof sections.

Hover tooltip with configurable delay, placement, and content.

Floating popover with configurable placement and focus management.

Compact keyboard shortcut chip — ⌘K, ⇧⌘P, etc.

Keyboard shortcut reference list grouped by section.

User identity card combining avatar, name, role, and status.

Iconographic status badge with color tokens — for activity feeds and notifications.

Pulsing onboarding beacon dot for highlighting new features and call-to-action targets.

Sectioned settings-style list with icons, descriptions, and right-side content.

Minimal unstyled list primitive — for when you want a list without ornamentation.

Drag-to-crop image utility with optional aspect-ratio lock, circular mask, and canvas export.

Smooth animated number ticker — for stat counters and metric reveals.

Gradient-fill heading text with multiple presets — for hero sections.

Heading + body + caption + code typography ramp — the type system at a glance.

Character-by-character typewriter text animation with configurable speed.

Word-by-word text reveal animation triggered on scroll.

Character-by-character text reveal animation for headlines.

Stacked toast notifications with success / error / info / warning variants and actions.

Accessible modal dialog with focus trap, animation, and portal rendering.

Step-by-step product tour overlay with anchored tooltips and progress indicator.

Slide-in panel from any edge with backdrop overlay.

Illustration + heading + call-to-action for empty data views.

Bespoke empty-cart state with icon, message, and continue-shopping CTA.

Progress bar for task completion, upload progress, and loading states.

Layout-mirroring skeleton loaders for async content — never plain spinners.

Alert banner with info, success, warning, error, and neutral variants plus dismiss.

Full-area blocking spinner overlay for async views — drop-in for any container.

OTF's React stepper marks the current stage in a multi-step flow with titles, optional descriptions, and horizontal or vertical layouts.

Tabs that switch between related views on one screen, with arrow-key, Home and End navigation.

Collapsible sections with smooth spring animation and keyboard support — single + multiple modes.

Card grid for project listings — title, description, metadata, and action menu.

Composable card with header, title, description, content, and footer slots.

Horizontal or vertical visual divider.

Premium textured card surface with subtle gradient layers — for hero blocks and stat cards.

Path-style hierarchy navigation with separators and overflow handling.

Custom scrollbar with cross-browser styling consistency — vertical, horizontal, both.