Catalog
Components
85 items in five groups. Every one installs on its own and pulls in only the primitives it uses.
Foundations
8Design tokens, the cx helper, hooks, and brand marks everything else builds on.
Chevron iconsCustom chevron glyphs (select caret, sortable table headers) matching the Figma strokes.cx utilitytailwind-merge wrapper aware of BoardCN's composite text styles, plus the sortCx helper.Global stylesTailwind entry css: dark-mode variant, base resets, component animations, and table styling. Imports theme.css and typography.css.LogoBoardCN brand marks in square and wide badge variants.Theme tokensColor primitives, semantic tokens (text/background/border/foreground/chart), radii, shadows, and button gradient utilities.Typography tokensThe full Figma type scale as composite text-{family}-{weight} Tailwind utilities.useCountUp hookAnimated rolling number hook used by chart headline figures.useDismissOnOutsidePress hookCloses React Aria popovers on outside press without swallowing the outside click.
Templates
6Full-page layouts wired end to end, ready to drop into a route.
Base
36Accessible primitives built on React Aria — the vocabulary of every screen.
AnnouncementDismissible announcement card used in the sidebar footer.AvatarImage or initials avatar in multiple sizes and tints.BadgeCounter pills and the Kbd shortcut hint.BreadcrumbIcon-capable breadcrumb trail.ButtonPrimary, secondary, ghost, and danger buttons in three sizes with icon support.Button GroupRow of secondary-style buttons fused into one bordered control with hairline dividers and selectable items.CarouselGallery carousel built on CSS scroll-snap: swipe, arrows and a position indicator.CheckboxReact Aria checkbox with animated tick and indeterminate state.Checkbox CardBordered selectable card driven by a checkbox.ChipStatus/delta chips in bold and soft variants across the accent palette.Close ButtonCompact dismiss button for banners, modals, and chips.Date PickerSingle-date picker with month navigation, built on React Aria.Date Range PickerTwo-month range picker sharing the date-picker chrome.DividerHorizontal content divider with single-line, double-line, filled, and aligned variants.DropdownComposable popover menu (trigger, panel, groups, rows, dividers) built on React Aria — the recipe behind the sidebar team/account menus.File UploadDrag-and-drop file upload with validation, animated progress, and a completion callback.Icon ButtonSquare icon-only button in two sizes.InputText input with label, hint text, error states, and leading icon support.Input OTPOne-time-code field with a monospace box per digit, paste distribution and autofill support.KbdKeyboard shortcut hint pill.Link ButtonInline text action styled like a link — primary/secondary variants, three sizes, icon support, renders <a> or <button>.Meeting SchedulerDate + time-slot scheduler popover.NotificationDismissible notification with status icons, avatars, action buttons, and timed countdown.PaginationNumbered pagination with prev/next and ellipsis collapsing.RadioReact Aria radio group with the gradient selected dot, two sizes, and the bare RadioDot glyph for menu rows.Radio CardBordered selectable card driven by a radio — the radio flavor of Checkbox Card.Segmented ControlPill-style segmented control (Weekly / Monthly / Yearly switchers).SelectReact Aria select with styled trigger, non-modal popover, and free-form item content.SliderSingle-value and min/max range sliders with exact-value bubbles and keyboard controls.Social ButtonSign-in buttons for 24 providers, with brand logos, three colour treatments and an icon-only form.Status DotColored status indicator dot used inside selects and tables.SwitchSkeuomorphic toggle switch in two sizes.Switch CardBordered settings row driven by a switch.TableStatic table primitives matching the dashboard tables.TabsUnderline and pill tab variants built on React Aria.TooltipLight-surface tooltip built on React Aria.
Blocks
16Composed application surfaces: sidebars, tables, modals, composers, calendars.
Agent LimitsAnimated grouped agent usage limits and token budgets.Agent ProgressExpandable multi-step agent progress with synchronized status animation.Agent ThinkingAgent thinking indicator for chat composers — dot wave, dot spin, stars, and infinity variants with a shimmering label and elapsed timer.Auth CardSign-in and sign-up cards with social providers stacked with labels or inline as icons, plus email fields and a CTA.CalendarInteractive responsive calendar with event details and inbox surfaces.Command CenterSearchable command palette with grouped actions, keyboard navigation, and announcement-style motion.ComposerAI composer with attachments, modes, model controls, and working states.Composer LoaderLoading state that wraps a chat composer — an iridescent light band orbiting the rim with a soft inward bloom, fading in while the agent works.Data TableTanStack-powered data table with sorting, selection, and pagination.Important Alerts CardScrollable alert feed with tinted icon circles and date pills.Notification CenterTabbed activity inbox with grouped notifications, unread state, avatars, status icons, and inline actions.Patient Info CardProfile card with avatar and label/value detail rows.Settings ModalControlled multi-page settings dialog with General, Profile, Tools, and Storage views.SidebarThe floating dashboard sidebar with team menu, nav, announcement, and user menu.Stat CardsKPI stat card row with delta chips.Theme ToggleManual light/dark control with a click-origin reveal, local persistence, and no system-theme dependency.
Charts
18Recharts-backed data cards with animated figures and shared range controls.
Activity RingsActivity ring dashboard card.Area ChartInteractive area chart card.Bar ListRanked animated bar list card.Chart Range ControlShared accessible range and period control for BoardCN chart cards.Combo ChartCombined bar and line chart card.ContributionsContribution heatmap card.Earnings ChartInteractive earnings bar chart.Funnel ChartAnimated conversion funnel card.Heatmap ChartInteractive matrix heatmap card.Line ChartInteractive line chart card.Most Active DaysCalendar activity-ring card.Radar ChartInteractive radar chart card.Radial ChartInteractive radial chart card.Sankey ChartInteractive Sankey flow chart card.Scatter ChartInteractive scatter chart card.Sleep ScoreSleep score and stages card.Stage BarsPipeline stage progress card.Steps ChartWeekly steps and goal card.