Components Overview

Ledger UI provides 53+ React components organized across 7 categories, plus 9 custom hooks. All components are built on Ant Design 5 with React.forwardRef, displayName, and fully typed props.

import { Button, Card, Input, Alert, Header } from '@gtcx/ui';

Component Categories

Navigation

SideNav, Toolbar, Breadcrumbs, MegaMenu, DropdownMenu, ContextMenu, Menubar, Command, Tabs, NavigationMenu

Data Display

AdvancedTable, Card, Badge, Avatar, AvatarGroup, Skeleton, DataVisualization, Rating

Forms

Button, Input, Label, Checkbox, Switch, Select, Textarea, Form, Calendar, DatePicker, Toggle, ToggleGroup, RadioGroup, FileUpload, ImageInput

Feedback

Alert, Dialog, AlertDialog, Sheet, Tooltip, Popover, HoverCard, toast, Accordion, Collapsible, Progress, ContentLoader, ScreenLoader, Toaster

Layout

Header, Separator, ScrollArea, ResponsiveGrid, SplitPane, MetronicLayout

Effects

GlassmorphismCard — frosted glass card with blur backdrop

AI

AIInsightCard — card with AI insight display, confidence indicator, and action buttons

Hooks

Hook	Description
`useBreakpoint`	Current responsive breakpoint (sm, md, lg, xl)
`useResponsive`	Boolean checks for breakpoint queries
`useBodyClass`	Add/remove CSS classes on document.body
`useCopyToClipboard`	Copy text with success/error state
`useMounted`	Track component mount state
`useScrollPosition`	Current window scroll position
`useMenu`	Build menu models from configuration
`useViewport`	Viewport width/height helpers
`useSliderInput`	Slider state management for numeric inputs

Component Architecture

All components follow the bridge pattern:

Ant Design base — wraps or composes Ant Design primitives
Token-driven styling — uses design tokens from @gtcx/tokens
Typed props — full TypeScript interfaces exported for every component
Ref forwarding — all components support React.forwardRef
Display names — all components have displayName for DevTools

// Example: Button component structure
import { forwardRef } from 'react';
import { Button as AntButton } from 'antd';
 
export interface ButtonProps { /* typed props */ }
 
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (props, ref) => <AntButton ref={ref} {...mappedProps} />
);
Button.displayName = 'Button';

Documentation + Status

Documentation Standard — required structure for every component page
Status Registry — Stable/Beta/Deprecated rules

Storybook

Every component has a Storybook story with interactive controls. Run:

pnpm --filter @gtcx/storybook dev

Layout Switcher Status Registry