Work in progress: this component library is actively evolving; APIs, visuals, and behavior may change.

component catalog

idobbins/cn

Component primitives for a compact shadcn interface system.

ID

Buttons

Button variants, sizes, icons, and states

Variants

Sizes

With Icons

States

Badges

Status indicators and compact labels

Variants

DefaultSecondaryOutlineDestructive

Use Cases

NewBetav1.0.0Deprecated

Avatars

User profile images, fallbacks, groups, and badges

With Image

SCVCID

Fallbacks

JDAB

Stacked Group

AABBCC
+4

Form Controls

Input fields and form elements

Toggle Controls

Switches and toggle buttons

Switches

Toggles

Sliders & Progress

Range inputs and progress indicators

72%
65%
x
x
x
x

Cards

Container components for grouped content

Basic Card
A simple card with header and content

This is the card content area where you can place any content.

With Footer
Card with action buttons

Cards can include footers for actions.

Interactive Card
With form elements

Alerts

Feedback messages and notifications

Tabs

Organize content into tabbed panels

Account Settings
Manage your account preferences

Tooltips & Toggles

Interactive micro-components

Tooltips

Semantic Tokens

secondaryElectric blue
destructiveSaturated red
successBright green

Navigation

Breadcrumbs, navigation menus, and keyboard affordances

Breadcrumb
Links, ellipsis, separators, and current page
Navigation Menu
Top-level trigger, content, and links

Keyboard

⌘KShiftTab

Form Composites

Native and composite form inputs

Field Set

Grouped field components with labels, descriptions, separators, and errors.

Visible label and helper copy.

Options
Publish preview

Include this page in the review build.

⌘K
Notes
1
2
3
4
5
6

Search & Commands

Comboboxes and command palettes

Selected: Next.js

Command Palette

Search for a command to run...

Menus

Menus for actions, selection, and contextual commands

Dropdown Menu
Items, groups, submenus, radios, and checkboxes
Context Menu
Right-click the target area
Right-click target
Menubar
Application-level menu controls

Overlays

Dialogs, sheets, drawers, popovers, and hover cards

Modal Surfaces

Anchored Surfaces

Disclosure & Groups

Accordions, collapsibles, and button groups

Accordion
Expandable sections with trigger and content

Theme tokens define the color and spacing language for the catalog.

Collapsible & Button Group
Progressive reveal and grouped commands
Collapsible content stays lightweight for one-off disclosure patterns.
100%

Data Display

Tables, charts, empty states, lists, pagination, loading, and scroll areas

Table
Headers, body rows, footer, caption, and checkboxes
Component review queue
ComponentStatusCount
ButtonReady6
ComboboxReview2
Total8
Chart
Recharts wrapped in the chart container helpers
No components selected
Empty state primitives for zero-result surfaces.
button.tsx

Primitive with variants and slots.

Updated2 exports
Grouped item header
New

Media, content, actions, header, and footer slots.

Loading state

Layout & Media

Calendar, carousel, aspect ratio, and resizable panels

Calendar
Date picker display with selected date
April 2026
Aspect Ratio & Carousel
Media frame and carousel controls
1
2
3
Resizable
Resizable panel group, panels, and handles
Navigation
Preview
Inspector

Sidebar

Sidebar layout primitives and nested navigation

Catalog
Components
Sidebar inset
Main content area inside SidebarInset.

Toasts

Temporary notification messages