Studiov1.1.0

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.

import { Button, Card, DataTable, ZoeOrb, cn } from "@regen/ui";

Four-Tier Architecture

TierSourceUse For
1 -- shadcn/ui primitivesForms, layout, data displayCRUD pages, admin UI, data visualization
2 -- Regen DomainPRT, RCCS, Virtue, PAL-specificDomain-specific data display and interactions
3 -- Aceternity UIAnimated hero effectsPublic-facing pages, hero sections, landing pages
4 -- Magic UI + Sera UIBrand personality accentsMarketing pages, loading states, Zoen aesthetic

When to Use Each Tier

ContextPrimarySecondary
CRUD pages / admin UITier 1Tier 2
PRT portal public pagesTier 1 + Tier 3Tier 2
Zoen / Life AI publicTier 3 + Tier 4Tier 1
Marketing landing pagesTier 3 + Tier 4Tier 1
Data visualizationTier 1 (Chart, DataTable)Tier 2 (Pentagon, ScoreBar)
Forms and inputsTier 1 exclusively--

Component Contract

All components follow this contract:

  • Use React.forwardRef and accept a ref prop
  • Accept className for style overrides
  • Set displayName for 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.

ComponentDescription
ContainerCentered max-width wrapper with responsive padding
StackFlexbox stack with configurable direction, gap, alignment
HStackHorizontal stack (shorthand for Stack direction="row")
VStackVertical stack (shorthand for Stack direction="col")
ScrollAreaCustom scrollbar wrapper (Radix)
ScrollBarScrollbar track for ScrollArea
AspectRatioMaintains a fixed aspect ratio for child content
ResizablePanelGroupResizable split-pane container
ResizablePanelIndividual panel within ResizablePanelGroup
ResizableHandleDrag handle between ResizablePanels
import { Container, Stack, HStack, VStack, ScrollArea, ScrollBar, AspectRatio, ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@regen/ui";

Container

PropValuesDefault
size"sm" | "md" | "lg" | "xl" | "full""lg"
density"compact" | "default" | "comfortable""default"

Stack / HStack / VStack

PropValuesDefault
direction"row" | "col""col"
gap0 | 1 | 2 | 3 | 4 | 6 | 84
align"start" | "center" | "end" | "stretch""stretch"
justify"start" | "center" | "end" | "between""start"

2. Typography

Text rendering components with consistent sizing and color variants.

ComponentDescription
HeadingSemantic heading element (h1-h6) with size/color variants
TextParagraph/span text with size, color, and weight variants
CodeInline code snippet with monospace styling
CodeBlockMulti-line code block with border and overflow scroll
KbdKeyboard key indicator
import { Heading, Text, Code, CodeBlock, Kbd } from "@regen/ui";

Heading

PropValuesDefault
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

PropValuesDefault
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.

ComponentDescription
ButtonPrimary action button with 6 variants, 5 sizes
ButtonGroupGroups multiple buttons with shared styling
ToggleTwo-state toggle button
ToggleGroupGroup of mutually exclusive toggles
ToggleGroupItemIndividual item within a ToggleGroup
import { Button, ButtonGroup, Toggle, ToggleGroup, ToggleGroupItem } from "@regen/ui";

Button

PropValuesDefault
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"
asChildbooleanfalse

4. Inputs

Form input components for data collection.

ComponentDescription
InputText input field with size variants
InputGroupInput with prefix/suffix addon slots
InputOTPOne-time password input with grouped slots
InputOTPGroupGroup container for OTP slots
InputOTPSlotIndividual OTP character slot
InputOTPSeparatorVisual separator between OTP groups
TextareaMulti-line text input
CheckboxCheckable boolean input (Radix)
RadioGroupRadio button group container (Radix)
RadioGroupItemIndividual radio button within a group
SwitchToggle switch (Radix)
SliderRange slider input (Radix)
SelectDropdown select menu (Radix)
SelectGroupGrouped options within Select
SelectValueSelected value display
SelectTriggerSelect open trigger
SelectContentDropdown content container
SelectLabelGroup label within SelectContent
SelectItemIndividual selectable option
SelectSeparatorVisual separator between select items
NativeSelectBrowser-native select element
NativeSelectOptionOption within NativeSelect
LabelForm label with size variants
SearchInputInput with search icon and clear button
TagInputMulti-value tag entry field
CalendarDate calendar picker (react-day-picker)
DatePickerSingle-date picker with popover
DateRangePickerDate range picker with dual calendar
ComboboxSearchable dropdown with free text
CommandCommand palette / searchable list (cmdk)
CommandDialogCommand in a dialog overlay
CommandInputSearch input within Command
CommandListScrollable results list
CommandEmptyEmpty state for no results
CommandGroupGrouped section of command items
CommandItemIndividual command result
CommandShortcutKeyboard shortcut display
CommandSeparatorVisual separator in command list
import { Input, InputGroup, Textarea, Checkbox, RadioGroup, RadioGroupItem, Switch, Slider, Select, SelectTrigger, SelectContent, SelectItem, SelectValue, NativeSelect, Label, SearchInput, TagInput, Calendar, DatePicker, DateRangePicker, Combobox, Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@regen/ui";

Input

PropValuesDefault
size"sm" | "md" | "lg""md"
density"compact" | "default""default"

Label

PropValuesDefault
variantInherited from labelVariants"default"

5. Form

Higher-level form building blocks for react-hook-form integration and schema-driven forms.

ComponentDescription
FormItemForm field wrapper with spacing
FormLabelLabel connected to form field via context
FormControlConnects input to react-hook-form field state
FormDescriptionHelper text below form inputs
FormMessageValidation error message display
FieldSchema-driven field component (renders input by type)
FieldControlControl wrapper for Field component
import { FormItem, FormLabel, FormControl, FormDescription, FormMessage, useFormField, Field, FieldControl, useField } from "@regen/ui";

6. Navigation

Components for navigating between pages and sections.

ComponentDescription
TabsTab container (Radix)
TabsListTab button row
TabsTriggerIndividual tab button
TabsContentContent panel for a tab
BreadcrumbBreadcrumb navigation wrapper
BreadcrumbListOrdered list of breadcrumb items
BreadcrumbItemSingle breadcrumb entry
BreadcrumbLinkClickable breadcrumb link
BreadcrumbPageCurrent page indicator (non-clickable)
BreadcrumbSeparatorSeparator between breadcrumb items
NavBarHorizontal navigation bar
NavBarLinkLink within NavBar
CarouselHorizontal carousel container (embla)
CarouselContentScrollable carousel track
CarouselItemIndividual carousel slide
CarouselPreviousPrevious slide button
CarouselNextNext slide button
SidebarNavCollapsible sidebar navigation
SidebarProviderContext provider for sidebar state
SidebarContentMain sidebar content area
SidebarFooterSidebar footer section
SidebarGroupGrouped section within sidebar
SidebarGroupActionAction button in sidebar group header
SidebarGroupContentContent area of a sidebar group
SidebarGroupLabelLabel for a sidebar group
SidebarHeaderSidebar header section
SidebarInputSearch input within sidebar
SidebarInsetMain content area adjacent to sidebar
SidebarMenuMenu container within sidebar
SidebarMenuActionAction button on a menu item
SidebarMenuBadgeBadge indicator on a menu item
SidebarMenuButtonClickable menu item button
SidebarMenuItemIndividual menu item
SidebarMenuSkeletonLoading placeholder for menu item
SidebarMenuSubNested sub-menu container
SidebarMenuSubButtonSub-menu item button
SidebarMenuSubItemIndividual sub-menu item
SidebarRailNarrow collapsed sidebar rail
SidebarSeparatorVisual separator within sidebar
SidebarTriggerButton to toggle sidebar open/closed
NavigationMenuTop-level navigation menu (Radix)
NavigationMenuListList of navigation items
NavigationMenuItemIndividual navigation item
NavigationMenuContentDropdown content panel
NavigationMenuTriggerTrigger to open menu content
NavigationMenuLinkLink within navigation menu
NavigationMenuIndicatorActive item indicator
NavigationMenuViewportViewport for menu content positioning
PaginationPagination container
PaginationContentPagination items wrapper
PaginationLinkPage number link
PaginationItemIndividual pagination item
PaginationPreviousPrevious page button
PaginationNextNext page button
PaginationEllipsisEllipsis indicator for skipped pages
import { Tabs, TabsList, TabsTrigger, TabsContent, Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, NavBar, NavBarLink, Carousel, CarouselContent, CarouselItem, SidebarNav, SidebarProvider, NavigationMenu, NavigationMenuList, NavigationMenuItem, Pagination, PaginationContent, PaginationLink } from "@regen/ui";

7. Overlays

Modal, popover, and tooltip components.

ComponentDescription
DialogModal dialog container (Radix)
DialogContentDialog content panel with close button
DialogDescriptionDialog description text
DialogHeaderDialog header with title/description
DialogTitleDialog heading
DialogTriggerElement that opens the dialog
SheetSlide-out panel from screen edge
SheetPortalPortal container for sheet
SheetOverlayBackdrop overlay
SheetTriggerElement that opens the sheet
SheetCloseClose button for sheet
SheetContentSheet content panel
SheetHeaderSheet header section
SheetFooterSheet footer section
SheetTitleSheet heading
SheetDescriptionSheet description text
DrawerBottom-sheet drawer (vaul)
DrawerPortalPortal container for drawer
DrawerOverlayBackdrop overlay for drawer
DrawerTriggerElement that opens the drawer
DrawerCloseClose button for drawer
DrawerContentDrawer content panel
DrawerHeaderDrawer header section
DrawerFooterDrawer footer section
DrawerTitleDrawer heading
DrawerDescriptionDrawer description text
PopoverFloating content panel anchored to trigger
PopoverTriggerElement that opens the popover
PopoverContentPopover content panel
PopoverAnchorCustom anchor point for popover
TooltipHover tooltip container
TooltipTriggerElement that shows tooltip on hover
TooltipContentTooltip content
TooltipProviderContext provider for tooltip delay settings
HoverCardRich content card on hover
HoverCardTriggerElement that shows hover card
HoverCardContentHover card content panel
AlertDialogConfirmation dialog requiring user action
AlertDialogPortalPortal for alert dialog
AlertDialogOverlayBackdrop overlay
AlertDialogTriggerElement that opens alert dialog
AlertDialogContentAlert dialog content panel
AlertDialogHeaderAlert dialog header
AlertDialogFooterAlert dialog footer with action buttons
AlertDialogTitleAlert dialog heading
AlertDialogDescriptionAlert dialog description
AlertDialogActionConfirm action button
AlertDialogCancelCancel button
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, Drawer, DrawerContent, DrawerTrigger, Popover, PopoverContent, PopoverTrigger, Tooltip, TooltipContent, TooltipTrigger, TooltipProvider, HoverCard, HoverCardContent, HoverCardTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@regen/ui";

8. Menus

Context, dropdown, and menu bar components.

ComponentDescription
DropdownMenuDropdown menu container (Radix)
DropdownMenuTriggerElement that opens dropdown
DropdownMenuContentDropdown content panel
DropdownMenuItemIndividual menu item
DropdownMenuLabelNon-interactive label in dropdown
DropdownMenuSeparatorVisual separator
DropdownMenuShortcutKeyboard shortcut indicator
DropdownMenuGroupGrouped section of items
DropdownMenuPortalPortal for dropdown
DropdownMenuSubSub-menu container
DropdownMenuSubContentSub-menu content
DropdownMenuSubTriggerSub-menu trigger
DropdownMenuRadioGroupRadio group within dropdown
ContextMenuRight-click context menu (Radix)
ContextMenuTriggerArea that triggers context menu
ContextMenuContentContext menu content panel
ContextMenuItemIndividual context menu item
ContextMenuCheckboxItemCheckable context menu item
ContextMenuRadioItemRadio-selectable context menu item
ContextMenuLabelNon-interactive label
ContextMenuSeparatorVisual separator
ContextMenuShortcutKeyboard shortcut display
ContextMenuGroupGrouped section
ContextMenuPortalPortal for context menu
ContextMenuSubSub-menu container
ContextMenuSubContentSub-menu content
ContextMenuSubTriggerSub-menu trigger
ContextMenuRadioGroupRadio group
MenubarHorizontal menu bar (Radix)
MenubarMenuIndividual menu in menubar
MenubarTriggerMenu open trigger
MenubarContentMenu content panel
MenubarItemIndividual menu item
MenubarSeparatorVisual separator
MenubarLabelNon-interactive label
MenubarCheckboxItemCheckable item
MenubarRadioGroupRadio group
MenubarRadioItemRadio item
MenubarPortalPortal for menu content
MenubarSubContentSub-menu content
MenubarSubTriggerSub-menu trigger
MenubarGroupGrouped section
MenubarSubSub-menu container
MenubarShortcutKeyboard shortcut display
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from "@regen/ui";

9. Feedback

Status, progress, and notification components.

ComponentDescription
AlertInline alert message container
AlertTitleAlert heading
AlertDescriptionAlert body text
BannerFull-width dismissible notification bar
ProgressHorizontal progress bar (Radix)
SpinnerSpinning loading indicator
SkeletonContent placeholder with shimmer animation
ToasterToast notification container (Sonner)
toastImperative toast function
import { Alert, AlertTitle, AlertDescription, Banner, Progress, Spinner, Skeleton, Toaster, toast } from "@regen/ui";
PropValuesDefault
variant"default" | "destructive" | "warning" | "success""default"
density"compact" | "default""default"
onClose() => void--
iconReactNode--

Progress

PropValuesDefault
size"sm" | "md" | "lg""md"
variant"default" | "accent""default"

Spinner

PropValuesDefault
size"xs" | "sm" | "md" | "lg" | "xl""md"
color"default" | "muted" | "primary""primary"
motion"none" | "subtle" | "full""subtle"
labelstring"Loading..."

Skeleton

PropValuesDefault
motion"none" | "pulse" | "shimmer""pulse"

10. Data Display

Components for presenting structured data.

ComponentDescription
CardContent container with 4 visual variants
CardHeaderCard header section
CardTitleCard heading
CardDescriptionCard subtitle/description
CardContentCard main content area
CardFooterCard footer section
BadgeSmall labeled indicator with 9 color variants
AvatarUser or entity avatar image
AvatarImageAvatar image element
AvatarFallbackFallback content when image fails
TableHTML table wrapper
TableHeaderTable header section
TableBodyTable body section
TableRowTable row
TableHeadTable header cell
TableCellTable data cell
TableCaptionTable caption
DataTableFull-featured data table (TanStack Table)
DataTableColumnHeaderSortable column header with controls
DataTablePaginationPagination controls for DataTable
DataTableViewOptionsColumn visibility toggle menu
AccordionCollapsible content sections (Radix)
AccordionItemIndividual accordion section
AccordionTriggerAccordion open/close trigger
AccordionContentAccordion content panel
CollapsibleSingle collapsible section (Radix)
CollapsibleTriggerCollapsible open/close trigger
CollapsibleContentCollapsible content panel
SeparatorVisual divider line
StatSingle metric display with trend indicator
KPICardDashboard metric card with trend and accent stripe
TimelineItemChronological event entry with connector line
TimelineTitleTimeline entry heading
TimelineDescriptionTimeline entry description
TimelineTimeTimeline entry timestamp
ColorSwatchColor preview with copy-to-clipboard
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Badge, Avatar, AvatarImage, AvatarFallback, Table, TableHeader, TableBody, TableRow, TableHead, TableCell, DataTable, Accordion, AccordionItem, AccordionTrigger, AccordionContent, Separator, Stat, KPICard, TimelineItem, TimelineTitle, TimelineDescription, TimelineTime, ColorSwatch } from "@regen/ui";

Card

PropValuesDefault
variant"default" | "outline" | "elevated" | "glass""default"
size"sm" | "md" | "lg""md"
density"compact" | "default" | "comfortable""default"

Badge

PropValuesDefault
variant"default" | "secondary" | "destructive" | "outline" | "mint" | "gold" | "purple" | "cyan" | "red""default"
size"sm" | "md" | "lg""md"

Stat

PropValuesDefault
labelstring (required)--
valuestring | number (required)--
substring--
trend"up" | "down" | "neutral"--
trendValuestring--
variant"default" | "accent""default"
size"sm" | "md" | "lg""md"

KPICard

PropValuesDefault
titlestring (required)--
valuestring | number (required)--
subtitlestring--
trend{ direction: "up" | "down" | "neutral"; value: string; label?: string }--
iconLucideIcon--
accentColorstring (CSS color)--
variant"default" | "accent" | "subtle""default"
size"sm" | "md" | "lg""md"
density"compact" | "default""default"

TimelineItem

PropValuesDefault
iconReactNode--
activeboolean--
lastboolean--

ColorSwatch

PropValuesDefault
namestring (required)--
valuestring (CSS color, required)--
cssVarstring--
size"sm" | "md" | "lg""md"

11. Charts

Recharts wrapper components for data visualization.

ComponentDescription
ChartContainerResponsive chart wrapper with theme config
ChartTooltipChart tooltip overlay
ChartTooltipContentFormatted tooltip content
ChartLegendChart legend container
ChartLegendContentLegend items
ChartStyleCSS injection for chart theme
import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle } from "@regen/ui";
import type { ChartConfig } from "@regen/ui";

12. Page Structure

Standardized page-level layout patterns.

ComponentDescription
PageHeaderPage title with optional badge, actions, breadcrumb
SectionHeaderSection divider with title, description, action slot
EmptyStateCentered empty/no-data illustration with CTA
LoadingStateSkeleton rows placeholder for loading content
import { PageHeader, SectionHeader, EmptyState, LoadingState } from "@regen/ui";
PropValuesDefault
titlestring (required)--
descriptionstring--
badgeReactNode--
actionsReactNode--
breadcrumbReactNode--

SectionHeader

PropValuesDefault
titlestring (required)--
descriptionstring--
actionReactNode--
borderbooleantrue

EmptyState

PropValuesDefault
iconLucideIcon--
titlestring (required)--
descriptionstring--
actionReactNode--

LoadingState

PropValuesDefault
rowsnumber3
showAvatarboolean--

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.

ComponentDescription
ZoeOrbAnimated Zoe brand orb with brand-tinted image filter
FiveCapitalsPentagonSVG radar chart for 5 capital scores (natural/human/social/built/financial)
FiveCapitalsRadarAnimated multi-dataset radar with baseline/comparison overlays
ProjectPhaseGate5-phase stepper showing project lifecycle progression
RCCSCreditBadgeRCCS credit amount with verification status indicator
CapitalScoreBarHorizontal progress bar for a single capital score
ReadinessGaugeCircular SVG gauge showing 6-stage RDC readiness level
InvestorTierBadgePRT A/B/C unit type badge with investor category
StoryOfPlaceCardProject narrative card with location metadata
ProjectDetailFull project detail layout with KPIs, pentagon, phase gate
ProjectCardCompact project summary card with status, lane, location
ProjectGridFilterable, sortable grid of ProjectCards
ProjectTradingCardTickerHorizontal scrolling ticker of project trading cards
EnrollmentFormMulti-step investor enrollment form with Supabase submission
RGAPillarRing7-pillar governance ring diagram (Stewardship through Innovation)
VerificationChainRCCS verification pipeline visualization with stage statuses
MasterOverlayPRT investor archetype selection overlay with style/lane matching
BlendedCapitalStack9-instrument blended capital visualization (risk-ordered)
LiquidityArchitectureDiagram4-tier liquidity structure diagram
CapitalFlowModelerInteractive capital allocation modeler with scenario controls
VirtueScore10-virtue coherence score gauge with optional individual bars
MomentWindowPAL 90-second awareness window indicator
import { ZoeOrb, FiveCapitalsPentagon, FiveCapitalsRadar, ProjectPhaseGate, RCCSCreditBadge, CapitalScoreBar, ReadinessGauge, InvestorTierBadge, StoryOfPlaceCard, ProjectDetail, ProjectCard, ProjectGrid, ProjectTradingCardTicker, EnrollmentForm, RGAPillarRing, VerificationChain, MasterOverlay, BlendedCapitalStack, LiquidityArchitectureDiagram, CapitalFlowModeler, VirtueScore, MomentWindow } from "@regen/ui";

ZoeOrb

PropValuesDefault
srcstring (image URL, required)--
altstring"Zoe"
brand"zoen" | "prt" | "lifeai" | "rdc""zoen"
size"favicon" | "mobile-nav" | "desktop-nav" | "section" | "hero" | "hero-xl""desktop-nav"
animatebooleanfalse
motion"none" | "subtle" | "full""subtle"

FiveCapitalsPentagon

PropValuesDefault
scoresCapitalScores (required) -- { natural, human, social, built, financial } each 0-100--
sizenumber (SVG pixel size)260
interactivebooleanfalse
onCapitalClick(capital: keyof CapitalScores) => void--

FiveCapitalsRadar

PropValuesDefault
dataFiveCapitalsData (required) -- each axis 0-1 scale--
baselineFiveCapitalsData--
comparisonFiveCapitalsData--
size"thumb" | "card" | "feature" | "hero""card"
density"compact" | "full""compact"
motion"static" | "animated-fill" | "animated-draw""static"
brand"rdc" | "prt" | "place" | "lifeai" | "zoen""rdc"
showValuesbooleanfalse
showLegendbooleanfalse
labels{ data: string; baseline?: string; comparison?: string }--

ProjectPhaseGate

PropValuesDefault
phasesPhase[] (required) -- each has id, label, sublabel?, status--
compactboolean--

Phase status values: "complete" | "active" | "locked" | "pending"

RCCSCreditBadge

PropValuesDefault
amountnumber (required)--
unitstring"RCCS"
verifiedbooleanfalse
vintagestring--
size"sm" | "md" | "lg""md"

CapitalScoreBar

PropValuesDefault
capitalstring (required) -- "natural", "social", "financial", "built", "human"--
scorenumber (0-100, required)--
labelstringdefaults to capital name
showValuebooleantrue
size"sm" | "md""md"

ReadinessGauge

PropValuesDefault
level"not-started" | "scoping" | "baseline" | "validated" | "operating" | "credits" (required)--
scorenumberderived from level
showLabelbooleantrue

InvestorTierBadge

PropValuesDefault
unit"A" | "B" | "C" (required)--
investorTypestringdefaults to unit sublabel
size"sm" | "md""md"

StoryOfPlaceCard

PropValuesDefault
placeNamestring (required)--
watershedstring--
biomestring--
regionstring--
storystring (required)--
compactboolean--

ProjectCard

PropValuesDefault
projectPrtProject (required)--
variant"default" | "compact" | "featured""default"
showActionsbooleanfalse
onEdit(project: PrtProject) => void--

ProjectGrid

PropValuesDefault
projectsPrtProject[] (required)--
variant"default" | "compact""default"
showSearchbooleantrue
showFiltersbooleantrue

ProjectTradingCardTicker

PropValuesDefault
projectsPrtProject[] (required)--
speed"slow" | "normal" | "fast""normal"
pauseOnHoverbooleantrue
direction"left" | "right""left"

EnrollmentForm

PropValuesDefault
projectIdstring--
projectNamestring--
supabaseUrlstring (required)--
supabaseAnonKeystring (required)--
sourcestring--
onSuccess(submission: Record<string, unknown>) => void--
onError(error: Error) => void--

RGAPillarRing

PropValuesDefault
scoresRecord<PillarName, number>--
size"sm" | "md" | "lg" | "hero""md"
brand"prt" | "rdc""prt"
interactivebooleantrue
motion"static" | "animated" | "follow""animated"

Pillar names: "Stewardship", "Transparency", "Accountability", "Community", "Ecology", "Economy", "Innovation"

VerificationChain

PropValuesDefault
stagesVerificationStage[] -- 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

PropValuesDefault
archetypesArchetype[]DEFAULT_ARCHETYPES (8 investor archetypes)
stylesInvestmentStyle[]DEFAULT_STYLES
lanesLaneCompany[]DEFAULT_LANE_COS
flowRulesFlowRulesDEFAULT_FLOW_RULES
fiveCapsFiveCapital[]DEFAULT_FIVE_CAPS

BlendedCapitalStack

PropValuesDefault
instrumentsBlendedCapitalInstrument[]INSTRUMENTS (9 default instruments)
currencystring"$"
motion"static" | "animated""animated"

LiquidityArchitectureDiagram

PropValuesDefault
tiersLiquidityTier[]DEFAULT_TIERS (4 tiers: Flexible/Structured/Patient/Permanent)
motion"static" | "animated""animated"

CapitalFlowModeler

PropValuesDefault
projectsProjectAllocation[]--
scenarioParamsScenarioParams--
onScenarioChange(params: ScenarioParams) => void--

VirtueScore

PropValuesDefault
coherencenumber (0-1, required)--
virtuesPartial<Record<VirtueName, number>>--
showBarsboolean--

Virtue names: "respect", "stewardship", "reciprocity", "community", "mindfulness", "humility", "adaptability", "simplicity", "gratitude", "curiosity"

MomentWindow

PropValuesDefault
secondsRemainingnumber (required, 0-90)--
emotionstring--
taskFocusstring--

14. Aceternity UI (Tier 3)

Animated, 3D, and hero-grade effects. Use on public-facing pages only -- not admin/CRUD.

ComponentDescription
CardContainer3D card perspective container with mouse tracking
CardBody3D card body element
CardItemIndividually transformable item within 3D card
SpotlightMouse-following spotlight glow effect
SpotlightCardCard with spotlight hover effect
BentoGridResponsive bento grid layout
BentoGridItemIndividual bento grid cell
BackgroundBeamsAnimated SVG background beam lines
AuroraBackgroundAnimated aurora borealis gradient background
TextGenerateEffectCharacter-by-character text reveal animation
AnimatedTooltipTooltip with spring animation and avatar stack
FloatingDockmacOS-style dock with magnification effect
FloatingDockDesktopDesktop variant of floating dock
FloatingDockMobileMobile variant of floating dock
ParallaxScrollMulti-column parallax scrolling image grid
WavyBackgroundAnimated wavy SVG background
MovingBorderAnimated gradient border that moves around an element
MovingBorderGradientGradient variant of moving border
TracingBeamScroll-activated tracing line along content
TextRevealCardCard that reveals text on hover/scroll
TextRevealCardTitleTitle within text reveal card
TextRevealCardDescriptionDescription within text reveal card
SparklesCoreFloating particle sparkle effect
LampContainerDramatic lamp-shade spotlight effect
import { CardContainer, CardBody, CardItem, SpotlightCard, BentoGrid, BentoGridItem, BackgroundBeams, AuroraBackground, TextGenerateEffect, AnimatedTooltip, FloatingDock, ParallaxScroll, WavyBackground, MovingBorder, TracingBeam, TextRevealCard, SparklesCore, LampContainer } from "@regen/ui";

15. Magic UI (Tier 4a)

Visual accent components for brand personality. Use sparingly.

ComponentDescription
MagicCardCard with spotlight gradient and orb effects on hover
ShimmerButtonButton with animated shimmer gradient
AnimatedBorderContinuous animated border glow
NumberTickerAnimated counting number display
DockApplication dock container
DockIconIndividual icon within dock
OrbitingCirclesCircles orbiting around a center point
GlobeInteractive 3D globe (cobe)
ParticlesCanvas-based floating particle effect
import { MagicCard, ShimmerButton, AnimatedBorder, NumberTicker, Dock, DockIcon, OrbitingCircles, Globe, Particles } from "@regen/ui";

MagicCard

PropValuesDefault
gradientFromstring (CSS color)--
gradientTostring (CSS color)--
gradientSizenumber--
gradientOpacitynumber--

ShimmerButton

PropValuesDefault
shimmerColorstring--
shimmerSizestring--
shimmerDurationstring--
backgroundstring--

NumberTicker

PropValuesDefault
valuenumber (required)--
delaynumber--
decimalPlacesnumber--
direction"up" | "down"--

Globe

PropValuesDefault
configGlobeProps (cobe config)DEFAULT_GLOBE_CONFIG

Particles

PropValuesDefault
quantitynumber--
sizenumber--
colorstring--
staticitynumber--
easenumber--
refreshboolean--

16. Sera UI (Tier 4b)

Glitch, retro, and glass effect components for Zoen aesthetic.

ComponentDescription
GlitchTextText with animated RGB glitch distortion
NoiseBackgroundFilm grain / noise texture overlay
RetroCardCard with CRT-style retro border and glow
RetroButtonButton with retro/pixel styling
LiquidGlassLiquid glass morphism container
LiquidGlassButtonButton with liquid glass effect
GlowEffectAnimated glow halo around content
import { GlitchText, NoiseBackground, RetroCard, RetroButton, LiquidGlass, LiquidGlassButton, GlowEffect } from "@regen/ui";

RetroButton

PropValuesDefault
variantDefined via retroButtonVariants--

GlitchText

PropValuesDefault
textstring (required)--
intensitynumber--

NoiseBackground

PropValuesDefault
opacitynumber--
grain"fine" | "coarse"--

GlowEffect

PropValuesDefault
colorstring--
sizenumber--
intensitynumber--

17. Animation Components

Reusable motion primitives (framer-motion wrappers). Imported directly from @regen/ui.

Entrance / Reveal

ComponentDescription
RevealFade/slide entrance animation on mount or in-view
SplitTextPer-character staggered text entrance
CountUpAnimated number counting from 0 to target
TypewriterTyping animation effect
PathDrawSVG path drawing animation
StaggerStagger children entrance animations

Scroll

ComponentDescription
ScrollRevealReveal animation triggered by scroll position
ScrollProgressScroll progress indicator bar
ScrollSceneScene activated by scroll position
ParallaxParallax motion on scroll

Continuous / Ambient

ComponentDescription
FloatGentle floating / bobbing animation
BreatheSubtle breathing scale animation
MarqueeInfinite horizontal scrolling marquee

Interactive

ComponentDescription
MagneticHoverMagnetic cursor-following effect
FlipCardCard that flips on hover/click
ExpandExpand/collapse transition

Transition

ComponentDescription
MorphShape/layout morphing transition
LayoutGroupShared layout animation group

Scroll Orchestration

ComponentDescription
StickySticky positioning with scroll-linked behavior

Background

ComponentDescription
MeshGradientAnimated mesh gradient background
FlowfieldCanvas flow field particle animation
GrainFilm grain overlay effect
import { Reveal, SplitText, CountUp, Typewriter, PathDraw, Stagger, ScrollReveal, ScrollProgress, ScrollScene, Parallax, Float, Breathe, Marquee, MagneticHover, FlipCard, Expand, Morph, LayoutGroup, Sticky, MeshGradient, Flowfield, Grain } from "@regen/ui";

18. Code Editors

ComponentDescription
HailEditorCodeMirror 6 editor with HAIL DSL syntax highlighting, error gutter, and hover tooltips
import { HailEditor } from "@regen/ui";
import type { HailEditorProps, HailEditorError } from "@regen/ui";

HailEditor

PropValuesDefault
valuestring (required)--
onChange(val: string) => void (required)--
errorsHailEditorError[]--
readOnlyboolean--
heightstring (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.

ComponentDescription
FooterPre-configured footer with 6 brand presets
footerConfigsRecord of footer configurations per brand
UniversalTermsPageTerms of Service page covering all LIFEAI entities
UniversalPrivacyPagePrivacy Policy page covering all LIFEAI entities
TermsContentTerms content without page wrapper
PrivacyContentPrivacy content without page wrapper
import { Footer, footerConfigs, UniversalTermsPage, UniversalPrivacyPage, TermsContent, PrivacyContent } from "@regen/ui";
import type { FooterProps, FooterConfig, FooterLink, FooterColumn, UniversalLegalProps } from "@regen/ui";
PropValuesDefault
configstring (brand key) | FooterConfig (custom)--

Available preset configs: "prt", "rdc", "place_fund", "lifeai", "zoen", "minimal"

FooterConfig Shape

FieldTypeDescription
themeBrandTheme ("default" | "prt" | "minimal")Color palette selection
columnsFooterColumn[]Link columns
copyrightTextstringCopyright line
contactEmailstringContact email
brandNamestringBrand display name
brandSubtitlestringTagline or subtitle
socialLinks{ icon: string; href: string; label: string }[]Social media links
customBrandContentReactNodeCustom brand section
legalLinksFooterLink[]Bottom bar legal links (defaults to /terms, /privacy)

UniversalTermsPage / UniversalPrivacyPage

PropValuesDefault
entityNamestring"Regenerative Development Corporation"
contactEmailstring"legal@regendevcorp.com"

20. Shared Project Templates

Reusable project listing components shared between prtrust.fund and place.fund.

ComponentDescription
ProjectsPageTemplateFull /projects page with ticker, CTAs, and Supabase data fetch
ProjectsInlineSectionHomepage inline project section with ticker
SEED_PROJECTSDefault seed project data array
mapDbRowUtility to map Supabase row to PrtProject shape
import { ProjectsPageTemplate, ProjectsInlineSection, SEED_PROJECTS, mapDbRow } from "@regen/ui";
import type { ProjectsPageTemplateProps, ProjectsInlineSectionProps } from "@regen/ui";

ProjectsPageTemplate

PropValuesDefault
supabaseUrlstring--
supabaseKeystring--
siteTitlestring--
eyebrowLabelstring--
siteDescriptionstring--
ctaHrefstring--
ctaLabelstring--
applyHrefstring--
secondaryCta{ href: string; label: string }--

ProjectsInlineSection

PropValuesDefault
supabaseUrlstringauto-read from NEXT_PUBLIC_SUPABASE_URL
supabaseKeystringauto-read from NEXT_PUBLIC_SUPABASE_ANON_KEY
viewAllHrefstring"/projects"
eyebrowLabelstring"Active Portfolio & Pipeline"
headingstring--
subheadingstring--

21. Brand Theme

Centralized brand color, typography, and spacing tokens shared across all apps.

ExportDescription
brandColorsColor palette object: rdc, dark, prt, semantic, text groups
brandTypographyFont families (ui, display, mono), sizes, weights, line heights
brandSpacingSpacing scale (xs through 3xl)
tailwindExtensionTailwind extend config object with brand colors and fonts
cssVariablesCSS :root variable string for injection into global styles
getThemeColorsFunction returning color palette for a given brand theme
import { brandColors, brandTypography, tailwindExtension, cssVariables, getThemeColors } from "@regen/ui";
import type { BrandTheme } from "@regen/ui";

getThemeColors

getThemeColors("prt")     // returns brandColors.prt
getThemeColors("minimal") // returns brandColors.dark
getThemeColors("default") // returns brandColors.rdc

BrandTheme type: "default" | "prt" | "minimal"


22. CMS Panel System

Kind-based panel registry for schema-driven CRUD interfaces.

ExportDescription
KIND_MAPRegistry mapping kind strings to panel components
getRegisteredKindsReturns array of all registered kind strings
isValidKindType guard checking if a string is a registered kind
getKindEntryReturns the KindMapEntry for a given kind
import { KIND_MAP, getRegisteredKinds, isValidKind, getKindEntry } from "@regen/ui";
import type { KindMapEntry } from "@regen/ui";

23. Hooks

ExportDescription
useReducedMotionReturns true when user prefers reduced motion (media query)
import { useReducedMotion } from "@regen/ui";

24. Utilities

ExportDescription
cnClass name merge utility (clsx + tailwind-merge)
import { cn } from "@regen/ui";
Component Catalog