The primary interactive element. Supports 6 variants and 4 sizes with full keyboard and screen reader support.

Groups multiple Buttons into a single connected visual unit with shared borders.

A button with liquid glass / frosted glass styling for use over image or gradient backgrounds.

A chunky retro-styled button with thick border and offset shadow matching RetroCard aesthetic.

A button with an animated shimmer effect sweeping across the background.

A two-state button that toggles between pressed and unpressed with visual feedback.

Infinite scrolling content strip using pure CSS keyframes for GPU-accelerated continuous motion. Supports all four directions and pause-on-hover.

Gentle scale and opacity pulse animation resembling breathing. Three intensity presets: subtle, medium, deep.

Gentle floating animation for decorative elements. Creates a smooth vertical oscillation loop.

A horizontally scrolling ticker for logos, testimonials, or feature lists.

Animates a number counting up or down to its target value with smooth easing.

Circular elements orbiting a central element at configurable speeds and radii.

A word-by-word text reveal animation where words fade in sequentially.

Particle flow field canvas animation using pseudo-noise for organic movement patterns. Creates a living, generative background effect.

Film grain overlay effect using CSS animations. Adds texture and analog warmth to backgrounds. Three speed presets and configurable blend mode.

Animated gradient mesh background using pure CSS animations. Multiple radial-gradient layers drift around for an organic, living look. No framer-motion dependency.

The animated Zoe brand orb — the visual identity core of the Life AI platform, available in 4 brand variants and 5 sizes.

A recharts wrapper providing consistent theming, tooltip, and legend for data visualizations.

PAL's 90-second Moment Window component — the temporal UX rhythm unit for the Personal AI Liaison.

Displays a coherence score (0–1) representing alignment with the 10-virtue governance framework.

A collapsible panel list where items can be expanded to reveal content.

A user or entity image with an initials fallback when the image is unavailable.

A compact label for status, category, or count annotations on other elements.

A surface container grouping related content with header, body, and footer zones.

A single show/hide toggle panel for secondary content that can be collapsed.

A color preview tile used in design system documentation to display brand tokens.

A full-featured sortable, filterable, and paginated data table built on TanStack Table.

A dashboard card displaying a key performance indicator with title, value, and trend.

A dashboard metric card with title, primary value, trend indicator, and accent color stripe.

A metric display showing a label, primary value, and optional trend indicator.

A semantic HTML table with consistent design system styling.

A single event in a vertical timeline with time, title, and description.

Multi-step investor enrollment form with 4 steps: investor type, contact info, investment interest, and confirmation. Posts to Supabase enrollment_submissions table.

Displays a PRT unit class badge (A/B/C) with color-coded visual distinction.

Project listing card with default, compact, and featured CVA variants. Displays status, phase, lane, Five Capitals mini-radar, and capital metrics.

Full project detail view with hero, Five Capitals assessment, phase timeline, RCCS credit summary, revenue streams, and enrollment CTA. Supports public and admin variants.

Grid layout for ProjectCards with built-in search, filtering by status/phase/lane, and sorting. Wraps cards in staggered entrance animations.

A 4-phase stepper showing a project's progression through Land Entry, Stewardship, Activation, and Return phases.

Animated trading card ticker using Marquee for auto-scroll. Supports single/double/grid layouts, trading/minimal card styles, and save/submit interactions.

Displays an RCCS credit quantity, vintage year, and verification status badge.

A 6-level readiness indicator showing a project's stage in the RDC framework.

A narrative card displaying a project's place identity — watershed, biome, region, and story.

RCCS verification pipeline visualization showing 6 stages from Instrumentation through NAV Integration. Supports flow particle animation, scroll-scrub mode, and hash/calcproof detail levels.

A continuously animated gradient border that sweeps around an element.

Rich avatar tooltips that spring-animate on hover, showing name and role.

A flowing aurora borealis gradient animation for atmospheric backgrounds.

Animated beam lines radiating from a focal point, creating a sci-fi energy field effect.

A 3D perspective card effect that tilts and parallaxes on mouse movement using CardContainer, CardBody, and CardItem.

A CSS glitch animation applied to text, creating a distorted RGB-split effect.

A radial glow overlay that adds ambient light to a container element.

A dramatic lamp-light cone effect emanating from the top of a section.

A glassmorphism container with frosted blur, subtle border, and liquid glass aesthetic.

An animated gradient border that traces around an element continuously.

A grain/noise texture overlay for adding analog warmth to digital surfaces.

A three-column masonry gallery with parallax scroll effects on images.

A configurable particle field background effect with color and quantity controls.

A particle sparkle field canvas effect with configurable density and particle size.

An animated spotlight beam effect that sweeps across the background of a section.

A card with a radial spotlight that follows the cursor, revealing hidden gradients.

A card that reveals hidden text on hover via a wipe animation effect.

A vertical scroll-following beam that traces the user's reading progress down a page.

An animated wavy canvas background creating fluid, organic motion.

Animated number counter that counts from a start value to a target value when entering the viewport. Supports prefix, suffix, and decimal places.

SVG path draw animation that traces a path from start to end when entering the viewport. Uses framer-motion pathLength animation.

Entrance animation wrapper with fade + slide from any direction. Triggers on viewport entry with configurable delay, duration, and distance.

Animates text by splitting into words or characters, each fading and sliding in with staggered timing.

Animates children with staggered entrance timing. Each child slides and fades in with a configurable delay between them.

Typewriter text effect that types out a string character by character. Supports cycling through multiple strings with delete and retype.

An inline notification banner for contextual status messages within page content.

A full-width site-level notification banner displayed at the top of the page.

A linear progress bar showing completion percentage for deterministic operations.

Placeholder shimmer shapes that mirror real content during loading.

An animated loading indicator for indeterminate wait states.

A date range picker that allows selecting a start and end date via a calendar popover.

Structured form layout primitives — FormItem wraps each field with FormLabel, FormControl, FormDescription, and FormMessage for consistent spacing and validation display.

A group of toggle buttons where one or multiple can be active, built on Radix Toggle Group.

A month-view calendar for date selection with keyboard navigation.

A binary selection control for independent options in forms.

A searchable dropdown combining Input and Select for large option lists.

A command palette component for keyboard-driven navigation and action search.

An Input + Calendar Popover combination for selecting a single date.

A standard text input field with consistent styling across all form contexts.

Combines an Input with prefix/suffix icons or text for context-rich inputs.

A one-time password input with individual character slots for verification codes.

A native HTML select element with design system styling for better mobile compatibility.

Mutually exclusive option selection — only one item can be selected at a time.

An Input pre-configured with a search icon and clear button for filtering UIs.

A styled dropdown for selecting one option from a list.

A range input for selecting a numeric value within a min–max range.

A toggle switch for binary on/off settings that take immediate effect.

A multi-value input that adds entered text as removable tags/chips.

A multi-line text input with auto-resize support for longer form content.

Smooth expand/collapse wrapper with height animation. Uses AnimatePresence + height:'auto' for natural sizing. Instant on reduced motion.

3D card flip animation with front and back faces. Supports horizontal/vertical flip axis, hover/click triggers, and controlled mode.

Element subtly follows the cursor on hover, creating a magnetic attraction effect. Great for buttons and CTAs.

Maintains a consistent width-to-height ratio for responsive media containers.

A magazine-style asymmetric grid layout for feature showcases.

A max-width wrapper that centers page content with consistent horizontal padding.

A card with a radial gradient that follows the cursor, creating a subtle magical glow effect.

A retro-styled card with thick borders and offset shadow for a chunky, tactile feel.

A styled scrollable region with a custom scrollbar that matches the design system.

A thin horizontal or vertical divider line between content sections.

Vertical (Stack/VStack) and horizontal (HStack) flex layout primitives with configurable gap.

A right-click triggered menu for contextual actions on selectable elements.

A contextual action menu anchored to a trigger button.

Hierarchical navigation trail showing the user's current location within the app.

A horizontally scrolling slide carousel with prev/next controls for cycling through items.

A macOS-inspired icon dock with magnification hover effect.

A macOS dock-inspired navigation bar with magnification on hover.

A horizontal navigation bar with NavBarLink children for top-level page navigation.

Navigation controls for paginated data sets with prev/next and page number links.

A full shadcn sidebar system with collapsible sections, menu items, and responsive mobile behavior.

Organizes content into panels accessible via a horizontal tab bar.

A blocking modal requiring explicit confirmation before a destructive or irreversible action.

A modal overlay that interrupts user flow for focused interaction or confirmation.

A mobile-friendly bottom sheet overlay — slides up from the bottom of the screen. Built on Vaul.

A rich preview card revealed on hover, typically for user or entity details.

A non-modal floating panel that appears near a trigger for contextual content.

A slide-in panel from the edge of the screen for secondary content or forms.

A small hover-triggered label providing supplementary context for UI elements.

A centered placeholder shown when a list or page has no content yet.

A centered loading placeholder for full-section or full-page loading states.

A consistent page-level header with title, description, and optional action slot.

A sub-section title within a page, smaller than PageHeader.

Scroll-linked vertical offset for children. Creates a parallax depth effect with configurable speed and direction.

Fixed scroll progress indicator bar. Shows how far the user has scrolled through the page. Informational, not decorative — renders even with reduced motion.

Scroll-triggered reveal with animation presets: fade, slide-up, slide-left, slide-right, scale, and blur. Uses IntersectionObserver for viewport detection.

Pinned section with scroll-scrubbed scene transitions. Each scene fades in/out as the user scrolls through a tall container. Falls back to stacked layout on reduced motion.

Scroll-aware sticky wrapper that detects its stuck state using IntersectionObserver and applies a data-stuck attribute for CSS styling. Works with reduced motion.

Wrapper around framer-motion LayoutGroup. Children using motion.div layout will animate smoothly when reordered, resized, or added/removed.

SVG shape morphing animation between two path definitions. Supports hover, click, and auto-loop triggers.

Inline code and multi-line code block components with syntax styling.

Semantic heading component with consistent type scale from h1–h6.

Body text component with size, weight, and color variants following the type system.

Blended capital instrument stack visualization showing 9 risk-ordered instruments from Catalytic First-Loss to Credit Revenue. Supports horizontal/vertical orientation and hover/drill interactivity.

Interactive 3-panel capital flow modeler with investment controls, Sankey-style flow diagram, and Five Capitals impact projection. Supports preview mode for read-only display.

A labeled progress bar showing a single capital dimension score with category-specific color.

A radar chart displaying scores across all Five Capitals (Natural, Human, Social, Built, Financial) for a project.

Enhanced radar chart with CVA variants for size, brand, and density. Supports baseline/comparison overlays, animated fill/draw modes, and multi-dataset legend.

An interactive 3D globe visualization for geographic data display.

Liquidity architecture diagram showing four tiers of capital liquidity: Flexible, Structured, Patient, and Locked. Supports spectrum, grid, and timeline layouts.

Capital flow master overlay — interactive SVG diagram showing investor archetypes flowing through investment styles into three-lane companies, connected to INAV and Five Capitals.

Seven-pillar governance ring visualization for the Regenerative Governance Architecture (RGA). Supports hover-explain and click-expand interactivity modes with brand-themed colors.