Reference catalog

@uicast/shadcn-catalog is a reference catalog: 107 components over shadcn/Radix, each a def/impl pair in its own directory under src/uicast-catalog. You can register the whole catalog, only some of its groups, or follow its layout, one directory per component, to build your own. The gallery renders every component from a small document, with its source.

Install


npm install @uicast/shadcn-catalog@beta

Import its stylesheet once, in your global CSS:


@import "@uicast/shadcn-catalog/catalog.css";

catalog.css holds the utilities the components use. It reads your theme’s CSS variables (var(--card)), so your theme applies, status colors included: --success, --warning, --info and --destructive. catalog.css has defaults for the first three. An app without its own shadcn setup imports theme.css first, for preflight and the shadcn palette:


@import "@uicast/shadcn-catalog/theme.css";
@import "@uicast/shadcn-catalog/catalog.css";

Groups

Each group is two modules: @uicast/shadcn-catalog/<group>/defs for the prompt and @uicast/shadcn-catalog/<group>/impls for the renderer.

Two groups draw from the whole catalog:

group	count	components
`all`	107	every component Accordion, AccordionItem, Alert, AspectRatio, Avatar, AvatarGroup, Badge, BarChart, Breadcrumb, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, CodeBlock, CodeEditor, ColorPicker, CommandMenu, Container, CopyButton, CountdownTimer, CurrencyInput, DataGrid, DatePicker, DateTime, DescriptionList, DiffViewer, Divider, DropdownMenu, DropdownMenuItem, EmptyState, Field, FieldDescription, FieldLabel, FileUpload, FlexCol, FlexRow, Form, FormulaBar, FunnelChart, GanttChart, GaugeChart, Grid, Heading, Heatmap, HighlightedText, Icon, Input, KBD, KanbanBoard, LineChart, Link, List, LocationMap, Modal, MultiSelect, NavigationMenu, NotificationBadge, NumberInput, Pagination, PhoneInput, Picture, PieChart, PinInput, Popover, ProgressBar, QRCode, RadarChart, Radio, Rating, ResizablePanel, ScatterChart, ScrollArea, SearchInput, Select, Sidebar, Slider, Sparkline, Spinner, Stat, Stepper, StickyHeader, Switch, TabContent, TabList, TabTrigger, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Textarea, TimePicker, Timeline, Toast, ToggleGroup, Tooltip, TreeView, TreemapChart, TruncatedText, Typography, VirtualList, WaterfallChart
`essential`	29	common components from every group Alert, Badge, BarChart, Button, Card, Checkbox, EmptyState, Field, FieldLabel, FlexCol, FlexRow, Form, Grid, Heading, Input, LineChart, Modal, NumberInput, Pagination, Select, Stat, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography

The rest split it by kind:

group	count	components
`layout`	16	card, grid, flex row and column, tabs, accordion Accordion, AccordionItem, AspectRatio, Card, Container, Divider, FlexCol, FlexRow, Grid, ResizablePanel, ScrollArea, StickyHeader, TabContent, TabList, TabTrigger, Tabs
`content`	29	heading, typography, badge, avatar, timeline, alert, map Alert, Avatar, AvatarGroup, Badge, Calendar, Carousel, CodeBlock, CountdownTimer, DateTime, DescriptionList, DiffViewer, EmptyState, Heading, HighlightedText, Icon, KBD, List, LocationMap, NotificationBadge, Picture, ProgressBar, QRCode, Spinner, Stat, Timeline, Toast, TreeView, TruncatedText, Typography
`data`	10	table, data grid, virtual list, kanban board DataGrid, KanbanBoard, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, VirtualList
`charts`	12	bar, line, pie, scatter, funnel, heatmap BarChart, FunnelChart, GanttChart, GaugeChart, Heatmap, LineChart, PieChart, RadarChart, ScatterChart, Sparkline, TreemapChart, WaterfallChart
`forms`	28	field, input, select, date picker, file upload, button Button, ButtonGroup, Checkbox, CodeEditor, ColorPicker, CopyButton, CurrencyInput, DatePicker, Field, FieldDescription, FieldLabel, FileUpload, Form, FormulaBar, Input, MultiSelect, NumberInput, PhoneInput, PinInput, Radio, Rating, SearchInput, Select, Slider, Switch, Textarea, TimePicker, ToggleGroup
`navigation`	7	sidebar, navigation menu, command menu, breadcrumb, pagination Breadcrumb, CommandMenu, Link, NavigationMenu, Pagination, Sidebar, Stepper
`overlays`	5	modal, popover, tooltip, dropdown menu DropdownMenu, DropdownMenuItem, Modal, Popover, Tooltip

How a host uses it

Each module exports its components by name, and all of them as one array: defs or impls. The prompt gets the definitions:


import { getComponentsPartialPrompt } from "@uicast/core/prompt";
import { defs } from "@uicast/shadcn-catalog/all/defs";
 
getComponentsPartialPrompt({ definitions: defs });

The renderer gets the matching implementations:


import { impls } from "@uicast/shadcn-catalog/all/impls";
 
<RendererProvider implementations={impls} evaluator={evaluator}>
  <EntriesRenderer entries={entries} />
</RendererProvider>;

The defs modules import no React, so the prompt can be built on the server.

Some groups

Spread the groups you want, the same way on both sides:


import * as layout from "@uicast/shadcn-catalog/layout/defs";
import * as charts from "@uicast/shadcn-catalog/charts/defs";
 
const definitions = [...layout.defs, ...charts.defs];