# Components

> Every component you can add to your project from the Cortexcn registry.

Source: https://ui.cortexcn.dev/docs/components

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.

- [Accordion](https://ui.cortexcn.dev/docs/components/accordion.md): A vertically stacked set of headings that each reveal a section of content.
- [Alert](https://ui.cortexcn.dev/docs/components/alert.md): Displays a callout for user attention.
- [Alert Dialog](https://ui.cortexcn.dev/docs/components/alert-dialog.md): A modal dialog that interrupts the user with important content and expects a response.
- [Aspect Ratio](https://ui.cortexcn.dev/docs/components/aspect-ratio.md): Displays content within a desired ratio.
- [Avatar](https://ui.cortexcn.dev/docs/components/avatar.md): An image element with a fallback for representing the user.
- [Badge](https://ui.cortexcn.dev/docs/components/badge.md): Displays a badge or a component that looks like a badge.
- [Breadcrumb](https://ui.cortexcn.dev/docs/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links.
- [Button](https://ui.cortexcn.dev/docs/components/button.md): Displays a button or a component that looks like a button.
- [Button Group](https://ui.cortexcn.dev/docs/components/button-group.md): A container that groups related buttons together with consistent styling.
- [Calendar](https://ui.cortexcn.dev/docs/components/calendar.md): A date field component that allows users to enter and edit dates.
- [Card](https://ui.cortexcn.dev/docs/components/card.md): Displays a card with a header, content, and footer.
- [Carousel](https://ui.cortexcn.dev/docs/components/carousel.md): A carousel with motion and swipe built using Embla.
- [Checkbox](https://ui.cortexcn.dev/docs/components/checkbox.md): A control that allows the user to toggle between checked and not checked.
- [Collapsible](https://ui.cortexcn.dev/docs/components/collapsible.md): An interactive component which expands and collapses a panel.
- [Combobox](https://ui.cortexcn.dev/docs/components/combobox.md): An input with a list of suggestions that filters as you type.
- [Command](https://ui.cortexcn.dev/docs/components/command.md): A fast, composable command menu for React.
- [Context Menu](https://ui.cortexcn.dev/docs/components/context-menu.md): Displays a menu of actions triggered by a right click.
- [Dialog](https://ui.cortexcn.dev/docs/components/dialog.md): A window overlaid on the page that renders the content underneath inert.
- [Drawer](https://ui.cortexcn.dev/docs/components/drawer.md): A drawer component for React, built on Vaul.
- [Dropdown Menu](https://ui.cortexcn.dev/docs/components/dropdown-menu.md): Displays a menu of actions or functions, triggered by a button.
- [Empty](https://ui.cortexcn.dev/docs/components/empty.md): Displays an empty state, with media, a title, a description, and actions.
- [Field](https://ui.cortexcn.dev/docs/components/field.md): Combines labels, controls, and help text into accessible form fields.
- [Hover Card](https://ui.cortexcn.dev/docs/components/hover-card.md): For sighted users to preview content available behind a link.
- [Input](https://ui.cortexcn.dev/docs/components/input.md): Displays a form input field or a component that looks like an input field.
- [Input Group](https://ui.cortexcn.dev/docs/components/input-group.md): Adds addons, buttons, and helper content to inputs.
- [Input OTP](https://ui.cortexcn.dev/docs/components/input-otp.md): An accessible one-time password input with copy and paste support.
- [Item](https://ui.cortexcn.dev/docs/components/item.md): A versatile row for displaying media, a title, a description, and actions.
- [Kbd](https://ui.cortexcn.dev/docs/components/kbd.md): Displays textual user input from a keyboard, such as a shortcut.
- [Label](https://ui.cortexcn.dev/docs/components/label.md): Renders an accessible label associated with controls.
- [Menubar](https://ui.cortexcn.dev/docs/components/menubar.md): A persistent menu, common in desktop apps, with quick access to a set of commands.
- [Native Select](https://ui.cortexcn.dev/docs/components/native-select.md): A styled native HTML select element.
- [Navigation Menu](https://ui.cortexcn.dev/docs/components/navigation-menu.md): A collection of links for navigating websites.
- [Pagination](https://ui.cortexcn.dev/docs/components/pagination.md): Page navigation with next and previous links.
- [Popover](https://ui.cortexcn.dev/docs/components/popover.md): Displays rich content in a portal, triggered by a button.
- [Progress](https://ui.cortexcn.dev/docs/components/progress.md): Displays an indicator showing the completion progress of a task.
- [Radio Group](https://ui.cortexcn.dev/docs/components/radio-group.md): A set of checkable buttons where no more than one can be checked at a time.
- [Resizable](https://ui.cortexcn.dev/docs/components/resizable.md): Accessible resizable panel groups and layouts with keyboard support.
- [Scroll Area](https://ui.cortexcn.dev/docs/components/scroll-area.md): Augments native scroll functionality for custom, cross-browser styling.
- [Select](https://ui.cortexcn.dev/docs/components/select.md): Displays a list of options for the user to pick from, triggered by a button.
- [Separator](https://ui.cortexcn.dev/docs/components/separator.md): Visually or semantically separates content.
- [Sheet](https://ui.cortexcn.dev/docs/components/sheet.md): Extends the dialog to show content that complements the main content of the screen.
- [Sidebar](https://ui.cortexcn.dev/docs/components/sidebar.md): A composable, themeable, and customizable sidebar.
- [Skeleton](https://ui.cortexcn.dev/docs/components/skeleton.md): Shows a placeholder while content is loading.
- [Slider](https://ui.cortexcn.dev/docs/components/slider.md): An input where the user selects a value from within a given range.
- [Sonner](https://ui.cortexcn.dev/docs/components/sonner.md): An opinionated toast component for React.
- [Spinner](https://ui.cortexcn.dev/docs/components/spinner.md): An indicator that shows a loading state.
- [Switch](https://ui.cortexcn.dev/docs/components/switch.md): A control that allows the user to toggle between on and off.
- [Table](https://ui.cortexcn.dev/docs/components/table.md): A responsive table component.
- [Tabs](https://ui.cortexcn.dev/docs/components/tabs.md): A set of layered sections of content, shown one at a time.
- [Textarea](https://ui.cortexcn.dev/docs/components/textarea.md): Displays a form textarea or a component that looks like a textarea.
- [Toggle](https://ui.cortexcn.dev/docs/components/toggle.md): A two-state button that can be either on or off.
- [Toggle Group](https://ui.cortexcn.dev/docs/components/toggle-group.md): A set of two-state buttons that can be toggled on or off.
- [Tooltip](https://ui.cortexcn.dev/docs/components/tooltip.md): A 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](https://ui.cortexcn.dev/docs/cortex).

- [ASCII Reveal](https://ui.cortexcn.dev/docs/cortex/ascii-reveal.md): A loader that decodes text, images, and cards into place through a character grid, with glyph skeletons while data loads.
- [Command Search](https://ui.cortexcn.dev/docs/cortex/command-search.md): A command palette that types queries and live-filters grouped results, with keyboard navigation.
- [Fan-Out Diagram](https://ui.cortexcn.dev/docs/cortex/fan-out-diagram.md): An animated architecture diagram where one source feeds a hub that fans out to many nodes, each with a live status.
- [FAQ Tabs Card](https://ui.cortexcn.dev/docs/cortex/faq-tabs-card.md): A tabbed FAQ card with animated accordion answers and a support footer.
- [Gooey Nav](https://ui.cortexcn.dev/docs/cortex/gooey-nav.md): A row of links with a filled pill under the active one. Choosing another link sends the pill there like a drop of liquid.
- [Lanyard 3D](https://ui.cortexcn.dev/docs/cortex/lanyard-3d.md): A 3D ID badge on a strap. Drag it and it swings and twists on a simulated strap; click it to flip it over.
- [Lanyard Badge](https://ui.cortexcn.dev/docs/cortex/lanyard-badge.md): An ID badge hanging from a strap. Drag it and it swings back on a simulated rope; click it to flip it over.
- [Line Nav](https://ui.cortexcn.dev/docs/cortex/line-nav.md): Vertical navigation with a line marker that expands on hover and active state.
- [Logos Carousel](https://ui.cortexcn.dev/docs/cortex/logos-carousel.md): Cycle through logos column by column in a staggered wave.
- [Marquee](https://ui.cortexcn.dev/docs/cortex/marquee.md): An infinite scrolling component that can be used to display text, images, or videos.
- [Number Ticker](https://ui.cortexcn.dev/docs/cortex/number-ticker.md): A rolling digit ticker that counts to a value with per-digit stagger, padding, and blur.
- [Perspective Marquee](https://ui.cortexcn.dev/docs/cortex/perspective-marquee.md): A tilted wall of images that scrolls endlessly in alternating columns.
- [Service Map](https://ui.cortexcn.dev/docs/cortex/service-map.md): A 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 Menu](https://ui.cortexcn.dev/docs/cortex/sphere-menu.md): A 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.
- [Theme Toggle Effect](https://ui.cortexcn.dev/docs/cortex/theme-toggle-effect.md): Animated transitions when switching between light and dark themes.
- [Work Experience](https://ui.cortexcn.dev/docs/cortex/work-experience.md): 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](https://ui.cortexcn.dev/docs/backgrounds).

- [Light Speed](https://ui.cortexcn.dev/docs/backgrounds/light-speed.md): A 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**](https://ui.cortexcn.dev/docs/charts/composed-chart) (`SeriesBar` + `Line` / `Area`). They have their own section, [Charts](https://ui.cortexcn.dev/docs/charts).

- [Area Chart](https://ui.cortexcn.dev/docs/charts/area-chart.md): A composable area chart with gradient fills, tooltips, and hover interactions
- [Bar Chart](https://ui.cortexcn.dev/docs/charts/bar-chart.md): A composable bar chart with spring animations, stacked bars, horizontal orientation, and grouped series support
- [Candlestick Chart](https://ui.cortexcn.dev/docs/charts/candlestick-chart.md): A composable OHLC candlestick chart with gradients, patterns, tooltips, and hover interactions
- [Choropleth Chart](https://ui.cortexcn.dev/docs/charts/choropleth-chart.md): A composable geographic map chart for visualizing data across regions with interactive tooltips, zoom controls, and pattern support
- [Composed Chart](https://ui.cortexcn.dev/docs/charts/composed-chart.md): Mix SeriesBar, Line, and Area on one shared time axis (Recharts ComposedChart–style)
- [Funnel Chart](https://ui.cortexcn.dev/docs/charts/funnel-chart.md): An animated funnel chart with multi-layer halo rings, hover interactions, and staggered entrance animations
- [Gauge](https://ui.cortexcn.dev/docs/charts/gauge-chart.md): Notch-based radial or linear gauge with optional center label, theme fills, patterns, arc gradients, and responsive sizing
- [Heatmap Chart](https://ui.cortexcn.dev/docs/charts/heatmap-chart.md): A contribution heatmap with animated cells, configurable level colors and patterns, and an interactive legend
- [Line Chart](https://ui.cortexcn.dev/docs/charts/line-chart.md): A composable line chart with tooltips, markers, and hover interactions
- [Live Line Chart](https://ui.cortexcn.dev/docs/charts/live-line-chart.md): Real-time streaming line chart with smooth scrolling, crosshair, and animated axes
- [Pie Chart](https://ui.cortexcn.dev/docs/charts/pie-chart.md): A composable pie and donut chart with animated slices, hover interactions, patterns, gradients, and an interactive legend
- [Profit/Loss Line](https://ui.cortexcn.dev/docs/charts/profit-loss-line.md): Sign-colored line segments for profit and loss on a shared zero baseline
- [Radar Chart](https://ui.cortexcn.dev/docs/charts/radar-chart.md): A composable multi-series radar chart with animated polygons, hover interactions, and customizable metrics
- [Ring Chart](https://ui.cortexcn.dev/docs/charts/ring-chart.md): A composable multi-ring progress chart with animated arcs, hover interactions, and a reusable legend component
- [Sankey Chart](https://ui.cortexcn.dev/docs/charts/sankey-chart.md): A composable sankey diagram for visualizing flow between nodes with animated links and interactive tooltips
- [Scatter Chart](https://ui.cortexcn.dev/docs/charts/scatter-chart.md): A composable time-series scatter chart with offset rings, hover dimming, and animated enter
- [Sunburst Chart](https://ui.cortexcn.dev/docs/charts/sunburst-chart.md): A composable hierarchical sunburst chart with drill-down zoom, animated segments, breadcrumb navigation, and legend sync