Component Catalog
Complete reference for every component exported from @regen/ui -- 105+ components across 4 tiers.
Component Catalog
@regen/ui exports 105+ components organized into four tiers. Every app in the monorepo imports components exclusively from @regen/ui -- never from shadcn, Radix, Aceternity, Magic UI, Sera UI, lucide-react, or framer-motion directly.
Four-Tier Architecture
| Tier | Source | Use For |
|---|---|---|
| 1 -- shadcn/ui primitives | Forms, layout, data display | CRUD pages, admin UI, data visualization |
| 2 -- Regen Domain | PRT, RCCS, Virtue, PAL-specific | Domain-specific data display and interactions |
| 3 -- Aceternity UI | Animated hero effects | Public-facing pages, hero sections, landing pages |
| 4 -- Magic UI + Sera UI | Brand personality accents | Marketing pages, loading states, Zoen aesthetic |
When to Use Each Tier
| Context | Primary | Secondary |
|---|---|---|
| CRUD pages / admin UI | Tier 1 | Tier 2 |
| PRT portal public pages | Tier 1 + Tier 3 | Tier 2 |
| Zoen / Life AI public | Tier 3 + Tier 4 | Tier 1 |
| Marketing landing pages | Tier 3 + Tier 4 | Tier 1 |
| Data visualization | Tier 1 (Chart, DataTable) | Tier 2 (Pentagon, ScoreBar) |
| Forms and inputs | Tier 1 exclusively | -- |
Component Contract
All components follow this contract:
- Use
React.forwardRefand accept arefprop - Accept
classNamefor style overrides - Set
displayNamefor devtools - Merge classes via
cn()(clsx + tailwind-merge) - Use CVA (class-variance-authority) for variant props where applicable
1. Layout
Structural components for page and section layout.
| Component | Description |
|---|---|
Container | Centered max-width wrapper with responsive padding |
Stack | Flexbox stack with configurable direction, gap, alignment |
HStack | Horizontal stack (shorthand for Stack direction="row") |
VStack | Vertical stack (shorthand for Stack direction="col") |
ScrollArea | Custom scrollbar wrapper (Radix) |
ScrollBar | Scrollbar track for ScrollArea |
AspectRatio | Maintains a fixed aspect ratio for child content |
ResizablePanelGroup | Resizable split-pane container |
ResizablePanel | Individual panel within ResizablePanelGroup |
ResizableHandle | Drag handle between ResizablePanels |
Container
| Prop | Values | Default |
|---|---|---|
size | "sm" | "md" | "lg" | "xl" | "full" | "lg" |
density | "compact" | "default" | "comfortable" | "default" |
Stack / HStack / VStack
| Prop | Values | Default |
|---|---|---|
direction | "row" | "col" | "col" |
gap | 0 | 1 | 2 | 3 | 4 | 6 | 8 | 4 |
align | "start" | "center" | "end" | "stretch" | "stretch" |
justify | "start" | "center" | "end" | "between" | "start" |
2. Typography
Text rendering components with consistent sizing and color variants.
| Component | Description |
|---|---|
Heading | Semantic heading element (h1-h6) with size/color variants |
Text | Paragraph/span text with size, color, and weight variants |
Code | Inline code snippet with monospace styling |
CodeBlock | Multi-line code block with border and overflow scroll |
Kbd | Keyboard key indicator |
Heading
| Prop | Values | Default |
|---|---|---|
as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h2" |
size | "4xl" | "3xl" | "2xl" | "xl" | "lg" | "base" | "2xl" |
color | "default" | "muted" | "mint" | "gold" | "cyan" | "default" |
motion | "none" | "subtle" | "full" | "none" |
Text
| Prop | Values | Default |
|---|---|---|
as | "p" | "span" | "div" | "small" | "p" |
size | "xs" | "sm" | "base" | "lg" | "base" |
color | "default" | "muted" | "dim" | "default" |
weight | "normal" | "medium" | "normal" |
motion | "none" | "subtle" | "full" | "none" |
3. Buttons and Actions
Interactive trigger components.
| Component | Description |
|---|---|
Button | Primary action button with 6 variants, 5 sizes |
ButtonGroup | Groups multiple buttons with shared styling |
Toggle | Two-state toggle button |
ToggleGroup | Group of mutually exclusive toggles |
ToggleGroupItem | Individual item within a ToggleGroup |
Button
| Prop | Values | Default |
|---|---|---|
variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "default" |
size | "default" | "sm" | "lg" | "xl" | "icon" | "default" |
density | "compact" | "default" | "comfortable" | "default" |
motion | "none" | "subtle" | "full" | "subtle" |
asChild | boolean | false |
4. Inputs
Form input components for data collection.
| Component | Description |
|---|---|
Input | Text input field with size variants |
InputGroup | Input with prefix/suffix addon slots |
InputOTP | One-time password input with grouped slots |
InputOTPGroup | Group container for OTP slots |
InputOTPSlot | Individual OTP character slot |
InputOTPSeparator | Visual separator between OTP groups |
Textarea | Multi-line text input |
Checkbox | Checkable boolean input (Radix) |
RadioGroup | Radio button group container (Radix) |
RadioGroupItem | Individual radio button within a group |
Switch | Toggle switch (Radix) |
Slider | Range slider input (Radix) |
Select | Dropdown select menu (Radix) |
SelectGroup | Grouped options within Select |
SelectValue | Selected value display |
SelectTrigger | Select open trigger |
SelectContent | Dropdown content container |
SelectLabel | Group label within SelectContent |
SelectItem | Individual selectable option |
SelectSeparator | Visual separator between select items |
NativeSelect | Browser-native select element |
NativeSelectOption | Option within NativeSelect |
Label | Form label with size variants |
SearchInput | Input with search icon and clear button |
TagInput | Multi-value tag entry field |
Calendar | Date calendar picker (react-day-picker) |
DatePicker | Single-date picker with popover |
DateRangePicker | Date range picker with dual calendar |
Combobox | Searchable dropdown with free text |
Command | Command palette / searchable list (cmdk) |
CommandDialog | Command in a dialog overlay |
CommandInput | Search input within Command |
CommandList | Scrollable results list |
CommandEmpty | Empty state for no results |
CommandGroup | Grouped section of command items |
CommandItem | Individual command result |
CommandShortcut | Keyboard shortcut display |
CommandSeparator | Visual separator in command list |
Input
| Prop | Values | Default |
|---|---|---|
size | "sm" | "md" | "lg" | "md" |
density | "compact" | "default" | "default" |
Label
| Prop | Values | Default |
|---|---|---|
variant | Inherited from labelVariants | "default" |
5. Form
Higher-level form building blocks for react-hook-form integration and schema-driven forms.
| Component | Description |
|---|---|
FormItem | Form field wrapper with spacing |
FormLabel | Label connected to form field via context |
FormControl | Connects input to react-hook-form field state |
FormDescription | Helper text below form inputs |
FormMessage | Validation error message display |
Field | Schema-driven field component (renders input by type) |
FieldControl | Control wrapper for Field component |
6. Navigation
Components for navigating between pages and sections.
| Component | Description |
|---|---|
Tabs | Tab container (Radix) |
TabsList | Tab button row |
TabsTrigger | Individual tab button |
TabsContent | Content panel for a tab |
Breadcrumb | Breadcrumb navigation wrapper |
BreadcrumbList | Ordered list of breadcrumb items |
BreadcrumbItem | Single breadcrumb entry |
BreadcrumbLink | Clickable breadcrumb link |
BreadcrumbPage | Current page indicator (non-clickable) |
BreadcrumbSeparator | Separator between breadcrumb items |
NavBar | Horizontal navigation bar |
NavBarLink | Link within NavBar |
Carousel | Horizontal carousel container (embla) |
CarouselContent | Scrollable carousel track |
CarouselItem | Individual carousel slide |
CarouselPrevious | Previous slide button |
CarouselNext | Next slide button |
SidebarNav | Collapsible sidebar navigation |
SidebarProvider | Context provider for sidebar state |
SidebarContent | Main sidebar content area |
SidebarFooter | Sidebar footer section |
SidebarGroup | Grouped section within sidebar |
SidebarGroupAction | Action button in sidebar group header |
SidebarGroupContent | Content area of a sidebar group |
SidebarGroupLabel | Label for a sidebar group |
SidebarHeader | Sidebar header section |
SidebarInput | Search input within sidebar |
SidebarInset | Main content area adjacent to sidebar |
SidebarMenu | Menu container within sidebar |
SidebarMenuAction | Action button on a menu item |
SidebarMenuBadge | Badge indicator on a menu item |
SidebarMenuButton | Clickable menu item button |
SidebarMenuItem | Individual menu item |
SidebarMenuSkeleton | Loading placeholder for menu item |
SidebarMenuSub | Nested sub-menu container |
SidebarMenuSubButton | Sub-menu item button |
SidebarMenuSubItem | Individual sub-menu item |
SidebarRail | Narrow collapsed sidebar rail |
SidebarSeparator | Visual separator within sidebar |
SidebarTrigger | Button to toggle sidebar open/closed |
NavigationMenu | Top-level navigation menu (Radix) |
NavigationMenuList | List of navigation items |
NavigationMenuItem | Individual navigation item |
NavigationMenuContent | Dropdown content panel |
NavigationMenuTrigger | Trigger to open menu content |
NavigationMenuLink | Link within navigation menu |
NavigationMenuIndicator | Active item indicator |
NavigationMenuViewport | Viewport for menu content positioning |
Pagination | Pagination container |
PaginationContent | Pagination items wrapper |
PaginationLink | Page number link |
PaginationItem | Individual pagination item |
PaginationPrevious | Previous page button |
PaginationNext | Next page button |
PaginationEllipsis | Ellipsis indicator for skipped pages |
7. Overlays
Modal, popover, and tooltip components.
| Component | Description |
|---|---|
Dialog | Modal dialog container (Radix) |
DialogContent | Dialog content panel with close button |
DialogDescription | Dialog description text |
DialogHeader | Dialog header with title/description |
DialogTitle | Dialog heading |
DialogTrigger | Element that opens the dialog |
Sheet | Slide-out panel from screen edge |
SheetPortal | Portal container for sheet |
SheetOverlay | Backdrop overlay |
SheetTrigger | Element that opens the sheet |
SheetClose | Close button for sheet |
SheetContent | Sheet content panel |
SheetHeader | Sheet header section |
SheetFooter | Sheet footer section |
SheetTitle | Sheet heading |
SheetDescription | Sheet description text |
Drawer | Bottom-sheet drawer (vaul) |
DrawerPortal | Portal container for drawer |
DrawerOverlay | Backdrop overlay for drawer |
DrawerTrigger | Element that opens the drawer |
DrawerClose | Close button for drawer |
DrawerContent | Drawer content panel |
DrawerHeader | Drawer header section |
DrawerFooter | Drawer footer section |
DrawerTitle | Drawer heading |
DrawerDescription | Drawer description text |
Popover | Floating content panel anchored to trigger |
PopoverTrigger | Element that opens the popover |
PopoverContent | Popover content panel |
PopoverAnchor | Custom anchor point for popover |
Tooltip | Hover tooltip container |
TooltipTrigger | Element that shows tooltip on hover |
TooltipContent | Tooltip content |
TooltipProvider | Context provider for tooltip delay settings |
HoverCard | Rich content card on hover |
HoverCardTrigger | Element that shows hover card |
HoverCardContent | Hover card content panel |
AlertDialog | Confirmation dialog requiring user action |
AlertDialogPortal | Portal for alert dialog |
AlertDialogOverlay | Backdrop overlay |
AlertDialogTrigger | Element that opens alert dialog |
AlertDialogContent | Alert dialog content panel |
AlertDialogHeader | Alert dialog header |
AlertDialogFooter | Alert dialog footer with action buttons |
AlertDialogTitle | Alert dialog heading |
AlertDialogDescription | Alert dialog description |
AlertDialogAction | Confirm action button |
AlertDialogCancel | Cancel button |
8. Menus
Context, dropdown, and menu bar components.
| Component | Description |
|---|---|
DropdownMenu | Dropdown menu container (Radix) |
DropdownMenuTrigger | Element that opens dropdown |
DropdownMenuContent | Dropdown content panel |
DropdownMenuItem | Individual menu item |
DropdownMenuLabel | Non-interactive label in dropdown |
DropdownMenuSeparator | Visual separator |
DropdownMenuShortcut | Keyboard shortcut indicator |
DropdownMenuGroup | Grouped section of items |
DropdownMenuPortal | Portal for dropdown |
DropdownMenuSub | Sub-menu container |
DropdownMenuSubContent | Sub-menu content |
DropdownMenuSubTrigger | Sub-menu trigger |
DropdownMenuRadioGroup | Radio group within dropdown |
ContextMenu | Right-click context menu (Radix) |
ContextMenuTrigger | Area that triggers context menu |
ContextMenuContent | Context menu content panel |
ContextMenuItem | Individual context menu item |
ContextMenuCheckboxItem | Checkable context menu item |
ContextMenuRadioItem | Radio-selectable context menu item |
ContextMenuLabel | Non-interactive label |
ContextMenuSeparator | Visual separator |
ContextMenuShortcut | Keyboard shortcut display |
ContextMenuGroup | Grouped section |
ContextMenuPortal | Portal for context menu |
ContextMenuSub | Sub-menu container |
ContextMenuSubContent | Sub-menu content |
ContextMenuSubTrigger | Sub-menu trigger |
ContextMenuRadioGroup | Radio group |
Menubar | Horizontal menu bar (Radix) |
MenubarMenu | Individual menu in menubar |
MenubarTrigger | Menu open trigger |
MenubarContent | Menu content panel |
MenubarItem | Individual menu item |
MenubarSeparator | Visual separator |
MenubarLabel | Non-interactive label |
MenubarCheckboxItem | Checkable item |
MenubarRadioGroup | Radio group |
MenubarRadioItem | Radio item |
MenubarPortal | Portal for menu content |
MenubarSubContent | Sub-menu content |
MenubarSubTrigger | Sub-menu trigger |
MenubarGroup | Grouped section |
MenubarSub | Sub-menu container |
MenubarShortcut | Keyboard shortcut display |
9. Feedback
Status, progress, and notification components.
| Component | Description |
|---|---|
Alert | Inline alert message container |
AlertTitle | Alert heading |
AlertDescription | Alert body text |
Banner | Full-width dismissible notification bar |
Progress | Horizontal progress bar (Radix) |
Spinner | Spinning loading indicator |
Skeleton | Content placeholder with shimmer animation |
Toaster | Toast notification container (Sonner) |
toast | Imperative toast function |
Banner
| Prop | Values | Default |
|---|---|---|
variant | "default" | "destructive" | "warning" | "success" | "default" |
density | "compact" | "default" | "default" |
onClose | () => void | -- |
icon | ReactNode | -- |
Progress
| Prop | Values | Default |
|---|---|---|
size | "sm" | "md" | "lg" | "md" |
variant | "default" | "accent" | "default" |
Spinner
| Prop | Values | Default |
|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" |
color | "default" | "muted" | "primary" | "primary" |
motion | "none" | "subtle" | "full" | "subtle" |
label | string | "Loading..." |
Skeleton
| Prop | Values | Default |
|---|---|---|
motion | "none" | "pulse" | "shimmer" | "pulse" |
10. Data Display
Components for presenting structured data.
| Component | Description |
|---|---|
Card | Content container with 4 visual variants |
CardHeader | Card header section |
CardTitle | Card heading |
CardDescription | Card subtitle/description |
CardContent | Card main content area |
CardFooter | Card footer section |
Badge | Small labeled indicator with 9 color variants |
Avatar | User or entity avatar image |
AvatarImage | Avatar image element |
AvatarFallback | Fallback content when image fails |
Table | HTML table wrapper |
TableHeader | Table header section |
TableBody | Table body section |
TableRow | Table row |
TableHead | Table header cell |
TableCell | Table data cell |
TableCaption | Table caption |
DataTable | Full-featured data table (TanStack Table) |
DataTableColumnHeader | Sortable column header with controls |
DataTablePagination | Pagination controls for DataTable |
DataTableViewOptions | Column visibility toggle menu |
Accordion | Collapsible content sections (Radix) |
AccordionItem | Individual accordion section |
AccordionTrigger | Accordion open/close trigger |
AccordionContent | Accordion content panel |
Collapsible | Single collapsible section (Radix) |
CollapsibleTrigger | Collapsible open/close trigger |
CollapsibleContent | Collapsible content panel |
Separator | Visual divider line |
Stat | Single metric display with trend indicator |
KPICard | Dashboard metric card with trend and accent stripe |
TimelineItem | Chronological event entry with connector line |
TimelineTitle | Timeline entry heading |
TimelineDescription | Timeline entry description |
TimelineTime | Timeline entry timestamp |
ColorSwatch | Color preview with copy-to-clipboard |
Card
| Prop | Values | Default |
|---|---|---|
variant | "default" | "outline" | "elevated" | "glass" | "default" |
size | "sm" | "md" | "lg" | "md" |
density | "compact" | "default" | "comfortable" | "default" |
Badge
| Prop | Values | Default |
|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "mint" | "gold" | "purple" | "cyan" | "red" | "default" |
size | "sm" | "md" | "lg" | "md" |
Stat
| Prop | Values | Default |
|---|---|---|
label | string (required) | -- |
value | string | number (required) | -- |
sub | string | -- |
trend | "up" | "down" | "neutral" | -- |
trendValue | string | -- |
variant | "default" | "accent" | "default" |
size | "sm" | "md" | "lg" | "md" |
KPICard
| Prop | Values | Default |
|---|---|---|
title | string (required) | -- |
value | string | number (required) | -- |
subtitle | string | -- |
trend | { direction: "up" | "down" | "neutral"; value: string; label?: string } | -- |
icon | LucideIcon | -- |
accentColor | string (CSS color) | -- |
variant | "default" | "accent" | "subtle" | "default" |
size | "sm" | "md" | "lg" | "md" |
density | "compact" | "default" | "default" |
TimelineItem
| Prop | Values | Default |
|---|---|---|
icon | ReactNode | -- |
active | boolean | -- |
last | boolean | -- |
ColorSwatch
| Prop | Values | Default |
|---|---|---|
name | string (required) | -- |
value | string (CSS color, required) | -- |
cssVar | string | -- |
size | "sm" | "md" | "lg" | "md" |
11. Charts
Recharts wrapper components for data visualization.
| Component | Description |
|---|---|
ChartContainer | Responsive chart wrapper with theme config |
ChartTooltip | Chart tooltip overlay |
ChartTooltipContent | Formatted tooltip content |
ChartLegend | Chart legend container |
ChartLegendContent | Legend items |
ChartStyle | CSS injection for chart theme |
12. Page Structure
Standardized page-level layout patterns.
| Component | Description |
|---|---|
PageHeader | Page title with optional badge, actions, breadcrumb |
SectionHeader | Section divider with title, description, action slot |
EmptyState | Centered empty/no-data illustration with CTA |
LoadingState | Skeleton rows placeholder for loading content |
PageHeader
| Prop | Values | Default |
|---|---|---|
title | string (required) | -- |
description | string | -- |
badge | ReactNode | -- |
actions | ReactNode | -- |
breadcrumb | ReactNode | -- |
SectionHeader
| Prop | Values | Default |
|---|---|---|
title | string (required) | -- |
description | string | -- |
action | ReactNode | -- |
border | boolean | true |
EmptyState
| Prop | Values | Default |
|---|---|---|
icon | LucideIcon | -- |
title | string (required) | -- |
description | string | -- |
action | ReactNode | -- |
LoadingState
| Prop | Values | Default |
|---|---|---|
rows | number | 3 |
showAvatar | boolean | -- |
13. Regen Domain (Tier 2)
Domain-specific components encoding PRT, RCCS, Five Capitals, Life AI, and Virtue Engine logic. These components use canonical brand colors and domain constants.
| Component | Description |
|---|---|
ZoeOrb | Animated Zoe brand orb with brand-tinted image filter |
FiveCapitalsPentagon | SVG radar chart for 5 capital scores (natural/human/social/built/financial) |
FiveCapitalsRadar | Animated multi-dataset radar with baseline/comparison overlays |
ProjectPhaseGate | 5-phase stepper showing project lifecycle progression |
RCCSCreditBadge | RCCS credit amount with verification status indicator |
CapitalScoreBar | Horizontal progress bar for a single capital score |
ReadinessGauge | Circular SVG gauge showing 6-stage RDC readiness level |
InvestorTierBadge | PRT A/B/C unit type badge with investor category |
StoryOfPlaceCard | Project narrative card with location metadata |
ProjectDetail | Full project detail layout with KPIs, pentagon, phase gate |
ProjectCard | Compact project summary card with status, lane, location |
ProjectGrid | Filterable, sortable grid of ProjectCards |
ProjectTradingCardTicker | Horizontal scrolling ticker of project trading cards |
EnrollmentForm | Multi-step investor enrollment form with Supabase submission |
RGAPillarRing | 7-pillar governance ring diagram (Stewardship through Innovation) |
VerificationChain | RCCS verification pipeline visualization with stage statuses |
MasterOverlay | PRT investor archetype selection overlay with style/lane matching |
BlendedCapitalStack | 9-instrument blended capital visualization (risk-ordered) |
LiquidityArchitectureDiagram | 4-tier liquidity structure diagram |
CapitalFlowModeler | Interactive capital allocation modeler with scenario controls |
VirtueScore | 10-virtue coherence score gauge with optional individual bars |
MomentWindow | PAL 90-second awareness window indicator |
ZoeOrb
| Prop | Values | Default |
|---|---|---|
src | string (image URL, required) | -- |
alt | string | "Zoe" |
brand | "zoen" | "prt" | "lifeai" | "rdc" | "zoen" |
size | "favicon" | "mobile-nav" | "desktop-nav" | "section" | "hero" | "hero-xl" | "desktop-nav" |
animate | boolean | false |
motion | "none" | "subtle" | "full" | "subtle" |
FiveCapitalsPentagon
| Prop | Values | Default |
|---|---|---|
scores | CapitalScores (required) -- { natural, human, social, built, financial } each 0-100 | -- |
size | number (SVG pixel size) | 260 |
interactive | boolean | false |
onCapitalClick | (capital: keyof CapitalScores) => void | -- |
FiveCapitalsRadar
| Prop | Values | Default |
|---|---|---|
data | FiveCapitalsData (required) -- each axis 0-1 scale | -- |
baseline | FiveCapitalsData | -- |
comparison | FiveCapitalsData | -- |
size | "thumb" | "card" | "feature" | "hero" | "card" |
density | "compact" | "full" | "compact" |
motion | "static" | "animated-fill" | "animated-draw" | "static" |
brand | "rdc" | "prt" | "place" | "lifeai" | "zoen" | "rdc" |
showValues | boolean | false |
showLegend | boolean | false |
labels | { data: string; baseline?: string; comparison?: string } | -- |
ProjectPhaseGate
| Prop | Values | Default |
|---|---|---|
phases | Phase[] (required) -- each has id, label, sublabel?, status | -- |
compact | boolean | -- |
Phase status values: "complete" | "active" | "locked" | "pending"
RCCSCreditBadge
| Prop | Values | Default |
|---|---|---|
amount | number (required) | -- |
unit | string | "RCCS" |
verified | boolean | false |
vintage | string | -- |
size | "sm" | "md" | "lg" | "md" |
CapitalScoreBar
| Prop | Values | Default |
|---|---|---|
capital | string (required) -- "natural", "social", "financial", "built", "human" | -- |
score | number (0-100, required) | -- |
label | string | defaults to capital name |
showValue | boolean | true |
size | "sm" | "md" | "md" |
ReadinessGauge
| Prop | Values | Default |
|---|---|---|
level | "not-started" | "scoping" | "baseline" | "validated" | "operating" | "credits" (required) | -- |
score | number | derived from level |
showLabel | boolean | true |
InvestorTierBadge
| Prop | Values | Default |
|---|---|---|
unit | "A" | "B" | "C" (required) | -- |
investorType | string | defaults to unit sublabel |
size | "sm" | "md" | "md" |
StoryOfPlaceCard
| Prop | Values | Default |
|---|---|---|
placeName | string (required) | -- |
watershed | string | -- |
biome | string | -- |
region | string | -- |
story | string (required) | -- |
compact | boolean | -- |
ProjectCard
| Prop | Values | Default |
|---|---|---|
project | PrtProject (required) | -- |
variant | "default" | "compact" | "featured" | "default" |
showActions | boolean | false |
onEdit | (project: PrtProject) => void | -- |
ProjectGrid
| Prop | Values | Default |
|---|---|---|
projects | PrtProject[] (required) | -- |
variant | "default" | "compact" | "default" |
showSearch | boolean | true |
showFilters | boolean | true |
ProjectTradingCardTicker
| Prop | Values | Default |
|---|---|---|
projects | PrtProject[] (required) | -- |
speed | "slow" | "normal" | "fast" | "normal" |
pauseOnHover | boolean | true |
direction | "left" | "right" | "left" |
EnrollmentForm
| Prop | Values | Default |
|---|---|---|
projectId | string | -- |
projectName | string | -- |
supabaseUrl | string (required) | -- |
supabaseAnonKey | string (required) | -- |
source | string | -- |
onSuccess | (submission: Record<string, unknown>) => void | -- |
onError | (error: Error) => void | -- |
RGAPillarRing
| Prop | Values | Default |
|---|---|---|
scores | Record<PillarName, number> | -- |
size | "sm" | "md" | "lg" | "hero" | "md" |
brand | "prt" | "rdc" | "prt" |
interactive | boolean | true |
motion | "static" | "animated" | "follow" | "animated" |
Pillar names: "Stewardship", "Transparency", "Accountability", "Community", "Ecology", "Economy", "Innovation"
VerificationChain
| Prop | Values | Default |
|---|---|---|
stages | VerificationStage[] -- each has name, status, hash?, detail? | default 8-stage RCCS pipeline |
orientation | "horizontal" | "vertical" | -- |
size | "inline" | "feature" | -- |
motion | "static" | "flow" | "scrub" | -- |
detail | "nodes" | "hashes" | "calcproof" | -- |
brand | "prt" | "rdc" | -- |
MasterOverlay
| Prop | Values | Default |
|---|---|---|
archetypes | Archetype[] | DEFAULT_ARCHETYPES (8 investor archetypes) |
styles | InvestmentStyle[] | DEFAULT_STYLES |
lanes | LaneCompany[] | DEFAULT_LANE_COS |
flowRules | FlowRules | DEFAULT_FLOW_RULES |
fiveCaps | FiveCapital[] | DEFAULT_FIVE_CAPS |
BlendedCapitalStack
| Prop | Values | Default |
|---|---|---|
instruments | BlendedCapitalInstrument[] | INSTRUMENTS (9 default instruments) |
currency | string | "$" |
motion | "static" | "animated" | "animated" |
LiquidityArchitectureDiagram
| Prop | Values | Default |
|---|---|---|
tiers | LiquidityTier[] | DEFAULT_TIERS (4 tiers: Flexible/Structured/Patient/Permanent) |
motion | "static" | "animated" | "animated" |
CapitalFlowModeler
| Prop | Values | Default |
|---|---|---|
projects | ProjectAllocation[] | -- |
scenarioParams | ScenarioParams | -- |
onScenarioChange | (params: ScenarioParams) => void | -- |
VirtueScore
| Prop | Values | Default |
|---|---|---|
coherence | number (0-1, required) | -- |
virtues | Partial<Record<VirtueName, number>> | -- |
showBars | boolean | -- |
Virtue names: "respect", "stewardship", "reciprocity", "community", "mindfulness", "humility", "adaptability", "simplicity", "gratitude", "curiosity"
MomentWindow
| Prop | Values | Default |
|---|---|---|
secondsRemaining | number (required, 0-90) | -- |
emotion | string | -- |
taskFocus | string | -- |
14. Aceternity UI (Tier 3)
Animated, 3D, and hero-grade effects. Use on public-facing pages only -- not admin/CRUD.
| Component | Description |
|---|---|
CardContainer | 3D card perspective container with mouse tracking |
CardBody | 3D card body element |
CardItem | Individually transformable item within 3D card |
Spotlight | Mouse-following spotlight glow effect |
SpotlightCard | Card with spotlight hover effect |
BentoGrid | Responsive bento grid layout |
BentoGridItem | Individual bento grid cell |
BackgroundBeams | Animated SVG background beam lines |
AuroraBackground | Animated aurora borealis gradient background |
TextGenerateEffect | Character-by-character text reveal animation |
AnimatedTooltip | Tooltip with spring animation and avatar stack |
FloatingDock | macOS-style dock with magnification effect |
FloatingDockDesktop | Desktop variant of floating dock |
FloatingDockMobile | Mobile variant of floating dock |
ParallaxScroll | Multi-column parallax scrolling image grid |
WavyBackground | Animated wavy SVG background |
MovingBorder | Animated gradient border that moves around an element |
MovingBorderGradient | Gradient variant of moving border |
TracingBeam | Scroll-activated tracing line along content |
TextRevealCard | Card that reveals text on hover/scroll |
TextRevealCardTitle | Title within text reveal card |
TextRevealCardDescription | Description within text reveal card |
SparklesCore | Floating particle sparkle effect |
LampContainer | Dramatic lamp-shade spotlight effect |
15. Magic UI (Tier 4a)
Visual accent components for brand personality. Use sparingly.
| Component | Description |
|---|---|
MagicCard | Card with spotlight gradient and orb effects on hover |
ShimmerButton | Button with animated shimmer gradient |
AnimatedBorder | Continuous animated border glow |
NumberTicker | Animated counting number display |
Dock | Application dock container |
DockIcon | Individual icon within dock |
OrbitingCircles | Circles orbiting around a center point |
Globe | Interactive 3D globe (cobe) |
Particles | Canvas-based floating particle effect |
MagicCard
| Prop | Values | Default |
|---|---|---|
gradientFrom | string (CSS color) | -- |
gradientTo | string (CSS color) | -- |
gradientSize | number | -- |
gradientOpacity | number | -- |
ShimmerButton
| Prop | Values | Default |
|---|---|---|
shimmerColor | string | -- |
shimmerSize | string | -- |
shimmerDuration | string | -- |
background | string | -- |
NumberTicker
| Prop | Values | Default |
|---|---|---|
value | number (required) | -- |
delay | number | -- |
decimalPlaces | number | -- |
direction | "up" | "down" | -- |
Globe
| Prop | Values | Default |
|---|---|---|
config | GlobeProps (cobe config) | DEFAULT_GLOBE_CONFIG |
Particles
| Prop | Values | Default |
|---|---|---|
quantity | number | -- |
size | number | -- |
color | string | -- |
staticity | number | -- |
ease | number | -- |
refresh | boolean | -- |
16. Sera UI (Tier 4b)
Glitch, retro, and glass effect components for Zoen aesthetic.
| Component | Description |
|---|---|
GlitchText | Text with animated RGB glitch distortion |
NoiseBackground | Film grain / noise texture overlay |
RetroCard | Card with CRT-style retro border and glow |
RetroButton | Button with retro/pixel styling |
LiquidGlass | Liquid glass morphism container |
LiquidGlassButton | Button with liquid glass effect |
GlowEffect | Animated glow halo around content |
RetroButton
| Prop | Values | Default |
|---|---|---|
variant | Defined via retroButtonVariants | -- |
GlitchText
| Prop | Values | Default |
|---|---|---|
text | string (required) | -- |
intensity | number | -- |
NoiseBackground
| Prop | Values | Default |
|---|---|---|
opacity | number | -- |
grain | "fine" | "coarse" | -- |
GlowEffect
| Prop | Values | Default |
|---|---|---|
color | string | -- |
size | number | -- |
intensity | number | -- |
17. Animation Components
Reusable motion primitives (framer-motion wrappers). Imported directly from @regen/ui.
Entrance / Reveal
| Component | Description |
|---|---|
Reveal | Fade/slide entrance animation on mount or in-view |
SplitText | Per-character staggered text entrance |
CountUp | Animated number counting from 0 to target |
Typewriter | Typing animation effect |
PathDraw | SVG path drawing animation |
Stagger | Stagger children entrance animations |
Scroll
| Component | Description |
|---|---|
ScrollReveal | Reveal animation triggered by scroll position |
ScrollProgress | Scroll progress indicator bar |
ScrollScene | Scene activated by scroll position |
Parallax | Parallax motion on scroll |
Continuous / Ambient
| Component | Description |
|---|---|
Float | Gentle floating / bobbing animation |
Breathe | Subtle breathing scale animation |
Marquee | Infinite horizontal scrolling marquee |
Interactive
| Component | Description |
|---|---|
MagneticHover | Magnetic cursor-following effect |
FlipCard | Card that flips on hover/click |
Expand | Expand/collapse transition |
Transition
| Component | Description |
|---|---|
Morph | Shape/layout morphing transition |
LayoutGroup | Shared layout animation group |
Scroll Orchestration
| Component | Description |
|---|---|
Sticky | Sticky positioning with scroll-linked behavior |
Background
| Component | Description |
|---|---|
MeshGradient | Animated mesh gradient background |
Flowfield | Canvas flow field particle animation |
Grain | Film grain overlay effect |
18. Code Editors
| Component | Description |
|---|---|
HailEditor | CodeMirror 6 editor with HAIL DSL syntax highlighting, error gutter, and hover tooltips |
HailEditor
| Prop | Values | Default |
|---|---|---|
value | string (required) | -- |
onChange | (val: string) => void (required) | -- |
errors | HailEditorError[] | -- |
readOnly | boolean | -- |
height | string (CSS height) | -- |
The editor provides syntax highlighting for HAIL keywords (measure, verify, issue, require, before, check_virtue, at, using, against, for), capital names (natural, human, social, built, financial), virtue names, and builtins (Q, virtue).
19. Global Components
Shared components used across all apps for consistent footer and legal pages.
| Component | Description |
|---|---|
Footer | Pre-configured footer with 6 brand presets |
footerConfigs | Record of footer configurations per brand |
UniversalTermsPage | Terms of Service page covering all LIFEAI entities |
UniversalPrivacyPage | Privacy Policy page covering all LIFEAI entities |
TermsContent | Terms content without page wrapper |
PrivacyContent | Privacy content without page wrapper |
Footer
| Prop | Values | Default |
|---|---|---|
config | string (brand key) | FooterConfig (custom) | -- |
Available preset configs: "prt", "rdc", "place_fund", "lifeai", "zoen", "minimal"
FooterConfig Shape
| Field | Type | Description |
|---|---|---|
theme | BrandTheme ("default" | "prt" | "minimal") | Color palette selection |
columns | FooterColumn[] | Link columns |
copyrightText | string | Copyright line |
contactEmail | string | Contact email |
brandName | string | Brand display name |
brandSubtitle | string | Tagline or subtitle |
socialLinks | { icon: string; href: string; label: string }[] | Social media links |
customBrandContent | ReactNode | Custom brand section |
legalLinks | FooterLink[] | Bottom bar legal links (defaults to /terms, /privacy) |
UniversalTermsPage / UniversalPrivacyPage
| Prop | Values | Default |
|---|---|---|
entityName | string | "Regenerative Development Corporation" |
contactEmail | string | "legal@regendevcorp.com" |
20. Shared Project Templates
Reusable project listing components shared between prtrust.fund and place.fund.
| Component | Description |
|---|---|
ProjectsPageTemplate | Full /projects page with ticker, CTAs, and Supabase data fetch |
ProjectsInlineSection | Homepage inline project section with ticker |
SEED_PROJECTS | Default seed project data array |
mapDbRow | Utility to map Supabase row to PrtProject shape |
ProjectsPageTemplate
| Prop | Values | Default |
|---|---|---|
supabaseUrl | string | -- |
supabaseKey | string | -- |
siteTitle | string | -- |
eyebrowLabel | string | -- |
siteDescription | string | -- |
ctaHref | string | -- |
ctaLabel | string | -- |
applyHref | string | -- |
secondaryCta | { href: string; label: string } | -- |
ProjectsInlineSection
| Prop | Values | Default |
|---|---|---|
supabaseUrl | string | auto-read from NEXT_PUBLIC_SUPABASE_URL |
supabaseKey | string | auto-read from NEXT_PUBLIC_SUPABASE_ANON_KEY |
viewAllHref | string | "/projects" |
eyebrowLabel | string | "Active Portfolio & Pipeline" |
heading | string | -- |
subheading | string | -- |
21. Brand Theme
Centralized brand color, typography, and spacing tokens shared across all apps.
| Export | Description |
|---|---|
brandColors | Color palette object: rdc, dark, prt, semantic, text groups |
brandTypography | Font families (ui, display, mono), sizes, weights, line heights |
brandSpacing | Spacing scale (xs through 3xl) |
tailwindExtension | Tailwind extend config object with brand colors and fonts |
cssVariables | CSS :root variable string for injection into global styles |
getThemeColors | Function returning color palette for a given brand theme |
getThemeColors
BrandTheme type: "default" | "prt" | "minimal"
22. CMS Panel System
Kind-based panel registry for schema-driven CRUD interfaces.
| Export | Description |
|---|---|
KIND_MAP | Registry mapping kind strings to panel components |
getRegisteredKinds | Returns array of all registered kind strings |
isValidKind | Type guard checking if a string is a registered kind |
getKindEntry | Returns the KindMapEntry for a given kind |
23. Hooks
| Export | Description |
|---|---|
useReducedMotion | Returns true when user prefers reduced motion (media query) |
24. Utilities
| Export | Description |
|---|---|
cn | Class name merge utility (clsx + tailwind-merge) |