Animated React components and website sections you install as source, themed with CSS variables for Next.js and Vite.
Pre-built settings panels for notification and security preferences, laid out as toggle rows. Use them as a starting point for an account settings page.
A collapsible application sidebar with grouped items, brand header, footer and a mobile drawer. Use it as the primary shell for a dashboard.
A standalone registration form with inline field validation and animated error states. Use it where sign-up is its own page rather than a tab beside sign-in.
A loading placeholder with a pulse or shimmer sweep. Use it to hold layout space while content is still being fetched.
A row of brand marks that link out — X, GitHub, LinkedIn, YouTube, Instagram, Facebook, Discord, Dribbble, email. Use it in footers, profile cards and author bylines.
A stacked toast notifier driven by a module-level function rather than a React context. Use it when you want to fire notifications from outside the component tree.
An authentic, physics-driven Split-Flap Display component simulating retro-mechanical flap cards, 3D perspective flips, and synthesized click sounds with ivory and minimalist variants.
A two-column scroll stack with a pinned side panel and cards that advance alongside it. Use it for feature tours that pair narrative with visuals.
A two-column stepper with a sticky side panel and stacked cards that advance as you scroll. Use it for onboarding and feature walkthroughs on a landing page.
Horizontal flowing carousel where images are masked behind a barrel-distorted grid of rounded cubes with snap physics and smooth inertia.
A horizontal step indicator with icons and GSAP transitions between steps. Use it to show progress through a known, ordered sequence.
A sticky section whose panels swap content as you scroll, supporting list, image, split and custom layouts. Use it for feature sections with varied content per step.
A sticky section whose panels swap content as you scroll, supporting list, image, split and custom layouts. Use it for feature sections with varied content per step.
A support ticket list with filters, detail view and empty state, configured through one content object. Use it to drop a help-desk view into an existing layout.
A full help-desk dashboard with tickets, SLA tracking, contact details and chat or table layouts. Use it as the agent-facing side of a support product.
A product hero on a soft grey ground: a headline that rises in word by word, one line and one call to action, then a bento of frosted cards — integrations, two figures that count up, two portraits and a team card with faces scattered over it. Use it as the opening section of a SaaS or AI product site.
A customer-facing support page with ticket list, reply composer and details sidebar. Use it as the end-user counterpart to the agent dashboard.
Composable table primitives — you write the rows, so no column config and no required data shape. Use it for tabular data you want full control over.
An interactive Table of Contents navigation block with sticky right-side positioning, real-time scroll-spy, animated Motion indicators, and section search filtering.
A tab panel whose rail runs across the top or down the side, with GSAP transitions between panels. Use it for settings and documentation sections with long content.
The tools a product is built with: a label, then one group of marks at a time in two rows — an odd group as three over four — each mark blurring out and the next group blurring in. Use it as the "Built with" line in a hero or footer.
A terminal-styled code block with a title bar, window controls and copy button. Use it to present install and CLI commands the way a reader expects to see them.
Character and word-level text motion driven by Motion. Use it for hero headlines that need finer control than a whole-block fade.
A light/dark toggle in icon, pill or dropdown form, with a circular reveal that grows out of the control and a GSAP icon transition. Use it in a navbar or settings panel.
A card that tilts in 3D toward the pointer with a moving glare highlight. Use it to make a single feature or product card feel tactile.
A vertical event timeline with status states, icons and GSAP scroll reveal. Use it for order tracking and process status where each step is done, current or upcoming.
Scrollable hour / minute / AM-PM columns for choosing a time of day, with themed selection and disabled ranges. The building block behind the date pickers' time mode.
A provider-based toast system with six screen positions, action buttons and auto-dismiss. Use it for transient confirmations triggered from anywhere in the tree.
A two-state switch with controlled and uncontrolled modes. Use it for settings that apply immediately, rather than a checkbox in a submitted form.
A set of toggle buttons behaving as either radio group or checkbox group. Use it for view switches and filter bars where all options should stay visible.
A portal-rendered tooltip with fade and zoom entrance, positioned on hover or focus. Use it for short labels that clarify an unlabeled control.
A dual-row scroll-driven destination showcase with opposite-direction GSAP ScrollTrigger parallax travel, full-bleed photography, and interactive hover details.
The Radix-backed accordion primitive that the higher-level Accordion block composes. Install it only if you want the unstyled base directly.
The Radix avatar primitive with image and fallback slots. Used for user representation in the chat, support and dashboard blocks.
A small status label primitive with CVA-driven variants. Used internally by pricing blocks.
Shared layout scaffolding (ComponentCard, ToggleSwitch) used by the settings, payment, compute and utility blocks.
A minimal CVA button primitive with Radix Slot support for `asChild`. Used internally by the Calendar and pricing blocks.
The card surface primitive that the pricing-plan block composes.
A compact code surface with syntax colouring and a copy button, used inside the docs site. Install it for a lightweight code display without tabs.
Shiki-backed syntax highlighting for a single snippet, with matched light and dark themes, a shared cached highlighter and a non-shifting fallback while a cold snippet resolves.
A glass-morphism slide viewer with fluid GSAP transitions between panels. Use it for hero galleries with a soft, liquid feel.
TODO: describe ui-liquid-glass. Generated placeholder.
A multi-select combobox with search, clearable chips, hierarchical options and optional portal rendering. Use it when users pick several values from a long list.
The Radix dialog-based sheet primitive that slides in from a screen edge. Used for drawers and mobile navigation panels.
The Radix slider primitive used by pricing blocks for usage-based tier selection.
A drag-and-drop file dropzone with per-file progress, previews, retry and time-remaining. Use it for multi-file uploads where users need to watch each file land.
An orbital diagram placing a user at the centre with tools and sub-agents circling around. Use it to illustrate an AI agent or integration ecosystem.
Two small dashboard panels — a team member list and a command search box — built on the shared card shell. Use them as filler panels while assembling a dashboard layout.