Components
Every component you can add to your project from the Cortexcn registry.
Cortexcn components come in four families, and each family has its own section in the docs. Every one installs the same way: npx shadcn@latest add @cortexcn/<name>.
Components
Everyday building blocks from shadcn/ui, from buttons and dialogs to menus, forms, and sidebars. Each page has the examples from the shadcn docs, ready to copy.
- AccordionFreeA vertically stacked set of headings that each reveal a section of content.
- AlertFreeDisplays a callout for user attention.
- Alert DialogFreeA modal dialog that interrupts the user with important content and expects a response.
- Aspect RatioFreeDisplays content within a desired ratio.
- AvatarFreeAn image element with a fallback for representing the user.
- BadgeFreeDisplays a badge or a component that looks like a badge.
- BreadcrumbFreeDisplays the path to the current resource using a hierarchy of links.
- ButtonFreeDisplays a button or a component that looks like a button.
- Button GroupFreeA container that groups related buttons together with consistent styling.
- CalendarFreeA date field component that allows users to enter and edit dates.
- CardFreeDisplays a card with a header, content, and footer.
- CarouselFreeA carousel with motion and swipe built using Embla.
- CheckboxFreeA control that allows the user to toggle between checked and not checked.
- CollapsibleFreeAn interactive component which expands and collapses a panel.
- ComboboxFreeAn input with a list of suggestions that filters as you type.
- CommandFreeA fast, composable command menu for React.
- Context MenuFreeDisplays a menu of actions triggered by a right click.
- DialogFreeA window overlaid on the page that renders the content underneath inert.
- DrawerFreeA drawer component for React, built on Vaul.
- Dropdown MenuFreeDisplays a menu of actions or functions, triggered by a button.
- EmptyFreeDisplays an empty state, with media, a title, a description, and actions.
- FieldFreeCombines labels, controls, and help text into accessible form fields.
- Hover CardFreeFor sighted users to preview content available behind a link.
- InputFreeDisplays a form input field or a component that looks like an input field.
- Input GroupFreeAdds addons, buttons, and helper content to inputs.
- Input OTPFreeAn accessible one-time password input with copy and paste support.
- ItemFreeA versatile row for displaying media, a title, a description, and actions.
- KbdFreeDisplays textual user input from a keyboard, such as a shortcut.
- LabelFreeRenders an accessible label associated with controls.
- MenubarFreeA persistent menu, common in desktop apps, with quick access to a set of commands.
- Native SelectFreeA styled native HTML select element.
- Navigation MenuFreeA collection of links for navigating websites.
- PaginationFreePage navigation with next and previous links.
- PopoverFreeDisplays rich content in a portal, triggered by a button.
- ProgressFreeDisplays an indicator showing the completion progress of a task.
- Radio GroupFreeA set of checkable buttons where no more than one can be checked at a time.
- ResizableFreeAccessible resizable panel groups and layouts with keyboard support.
- Scroll AreaFreeAugments native scroll functionality for custom, cross-browser styling.
- SelectFreeDisplays a list of options for the user to pick from, triggered by a button.
- SeparatorFreeVisually or semantically separates content.
- SheetFreeExtends the dialog to show content that complements the main content of the screen.
- SidebarFreeA composable, themeable, and customizable sidebar.
- SkeletonFreeShows a placeholder while content is loading.
- SliderFreeAn input where the user selects a value from within a given range.
- SonnerFreeAn opinionated toast component for React.
- SpinnerFreeAn indicator that shows a loading state.
- SwitchFreeA control that allows the user to toggle between on and off.
- TableFreeA responsive table component.
- TabsFreeA set of layered sections of content, shown one at a time.
- TextareaFreeDisplays a form textarea or a component that looks like a textarea.
- ToggleFreeA two-state button that can be either on or off.
- Toggle GroupFreeA set of two-state buttons that can be toggled on or off.
- TooltipFreeA popup that shows information about an element on hover or keyboard focus.
Cortex
Cortexcn originals you won't find in shadcn/ui: motion, navigation, and theming. They have their own section, Cortex.
- ASCII RevealProA loader that decodes text, images, and cards into place through a character grid, with glyph skeletons while data loads.
- A command palette that types queries and live-filters grouped results, with keyboard navigation.
- An animated architecture diagram where one source feeds a hub that fans out to many nodes, each with a live status.
- A tabbed FAQ card with animated accordion answers and a support footer.
- Gooey NavProA row of links with a filled pill under the active one. Choosing another link sends the pill there like a drop of liquid.
- Lanyard 3DProA 3D ID badge on a strap. Drag it and it swings and twists on a simulated strap; click it to flip it over.
- An ID badge hanging from a strap. Drag it and it swings back on a simulated rope; click it to flip it over.
- Line NavProVertical navigation with a line marker that expands on hover and active state.
- Cycle through logos column by column in a staggered wave.
- MarqueeProAn infinite scrolling component that can be used to display text, images, or videos.
- A rolling digit ticker that counts to a value with per-digit stagger, padding, and blur.
- A tilted wall of images that scrolls endlessly in alternating columns.
- Service MapProA root service and the services it sends traffic to, as cards joined by right-angle lines, each with a status badge, metric rows, and a beam of light running down every line.
- Sphere MenuProA sphere of image tiles you can spin in any direction. When it slows down, the nearest tile turns to face you and its link appears.
- Animated transitions when switching between light and dark themes.
- Display work experiences with role details, company logos, and durations.
Backgrounds
Animated full-bleed backgrounds for heroes and sections, drawn with WebGL. They have their own section, Backgrounds.
- Light SpeedProA warp-speed tunnel of glowing light streaks, drawn with three.js and bloom.
Charts
Composable charts with animation, tooltips, and themes. Mix lines, areas, and time-aligned columns on one chart with the Composed Chart (SeriesBar + Line / Area). They have their own section, Charts.
- Area ChartProA composable area chart with gradient fills, tooltips, and hover interactions
- Bar ChartProA composable bar chart with spring animations, stacked bars, horizontal orientation, and grouped series support
- A composable OHLC candlestick chart with gradients, patterns, tooltips, and hover interactions
- A composable geographic map chart for visualizing data across regions with interactive tooltips, zoom controls, and pattern support
- Mix SeriesBar, Line, and Area on one shared time axis (Recharts ComposedChart–style)
- Funnel ChartProAn animated funnel chart with multi-layer halo rings, hover interactions, and staggered entrance animations
- GaugeProNotch-based radial or linear gauge with optional center label, theme fills, patterns, arc gradients, and responsive sizing
- A contribution heatmap with animated cells, configurable level colors and patterns, and an interactive legend
- Line ChartProA composable line chart with tooltips, markers, and hover interactions
- Real-time streaming line chart with smooth scrolling, crosshair, and animated axes
- Pie ChartProA composable pie and donut chart with animated slices, hover interactions, patterns, gradients, and an interactive legend
- Sign-colored line segments for profit and loss on a shared zero baseline
- Radar ChartProA composable multi-series radar chart with animated polygons, hover interactions, and customizable metrics
- Ring ChartProA composable multi-ring progress chart with animated arcs, hover interactions, and a reusable legend component
- Sankey ChartProA composable sankey diagram for visualizing flow between nodes with animated links and interactive tooltips
- A composable time-series scatter chart with offset rings, hover dimming, and animated enter
- A composable hierarchical sunburst chart with drill-down zoom, animated segments, breadcrumb navigation, and legend sync