# Cortexcn

> Cortexcn is a shadcn/ui registry of React components, charts, and blocks. Install them with one command, or let your AI agent build with them. Built for freelancers, developers, and startups who ship fast.

Cortexcn items are installed with the shadcn CLI. Add the registry to `components.json` once, then add any item by name. The source is copied into the project as React and Tailwind CSS, so there is no runtime package to update.

- Registry namespace: `@cortexcn`, served from `https://ui.cortexcn.dev/r/{name}.json`
- Registry index: https://ui.cortexcn.dev/r/registry.json
- Install an item: `npx shadcn@latest add @cortexcn/<name>`
- Agents: connect the shadcn MCP server (`npx shadcn@latest mcp init --client claude`) and ask for an item by name
- Site: https://www.cortexcn.dev · Docs: https://ui.cortexcn.dev/docs

## Docs
- [Introduction](https://ui.cortexcn.dev/docs.md): Cortexcn is a set of beautifully designed components and a code distribution platform. Works with your favorite React frameworks and AI models. Open Code.
- [Components](https://ui.cortexcn.dev/docs/components.md): Every component you can add to your project from the Cortexcn registry.
- [Installation](https://ui.cortexcn.dev/docs/installation.md): How to install and configure Cortexcn in your project.
- [Skills](https://ui.cortexcn.dev/docs/skills.md): Give AI agents project-aware context for Cortexcn components in your application.
- [Theming](https://ui.cortexcn.dev/docs/theming.md): Theme your charts using CSS custom properties for consistent, customizable styling.

## Components
Everyday building blocks from shadcn/ui, from buttons and dialogs to menus, forms, and sidebars.

- [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.

- [Command Search](https://ui.cortexcn.dev/docs/components/command-search.md): A command palette that types queries and live-filters grouped results, with keyboard navigation.
- [FAQ Tabs Card](https://ui.cortexcn.dev/docs/components/faq-tabs-card.md): A tabbed FAQ card with animated accordion answers and a support footer.
- [Line Nav](https://ui.cortexcn.dev/docs/components/line-nav.md): Vertical navigation with a line marker that expands on hover and active state.
- [Logos Carousel](https://ui.cortexcn.dev/docs/components/logos-carousel.md): Cycle through logos column by column in a staggered wave.
- [Marquee](https://ui.cortexcn.dev/docs/components/marquee.md): An infinite scrolling component that can be used to display text, images, or videos.
- [Number Ticker](https://ui.cortexcn.dev/docs/components/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/components/perspective-marquee.md): A tilted wall of images that scrolls endlessly in alternating columns.
- [Theme Toggle Effect](https://ui.cortexcn.dev/docs/components/theme-toggle-effect.md): Animated transitions when switching between light and dark themes.
- [Work Experience](https://ui.cortexcn.dev/docs/components/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.

- [Light Speed](https://ui.cortexcn.dev/docs/components/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.

- [Area Chart](https://ui.cortexcn.dev/docs/components/area-chart.md): A composable area chart with gradient fills, tooltips, and hover interactions
- [Bar Chart](https://ui.cortexcn.dev/docs/components/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/components/candlestick-chart.md): A composable OHLC candlestick chart with gradients, patterns, tooltips, and hover interactions
- [Choropleth Chart](https://ui.cortexcn.dev/docs/components/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/components/composed-chart.md): Mix SeriesBar, Line, and Area on one shared time axis (Recharts ComposedChart–style)
- [Funnel Chart](https://ui.cortexcn.dev/docs/components/funnel-chart.md): An animated funnel chart with multi-layer halo rings, hover interactions, and staggered entrance animations
- [Gauge](https://ui.cortexcn.dev/docs/components/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/components/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/components/line-chart.md): A composable line chart with tooltips, markers, and hover interactions
- [Live Line Chart](https://ui.cortexcn.dev/docs/components/live-line-chart.md): Real-time streaming line chart with smooth scrolling, crosshair, and animated axes
- [Pie Chart](https://ui.cortexcn.dev/docs/components/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/components/profit-loss-line.md): Sign-colored line segments for profit and loss on a shared zero baseline
- [Radar Chart](https://ui.cortexcn.dev/docs/components/radar-chart.md): A composable multi-series radar chart with animated polygons, hover interactions, and customizable metrics
- [Ring Chart](https://ui.cortexcn.dev/docs/components/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/components/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/components/scatter-chart.md): A composable time-series scatter chart with offset rings, hover dimming, and animated enter
- [Sunburst Chart](https://ui.cortexcn.dev/docs/components/sunburst-chart.md): A composable hierarchical sunburst chart with drill-down zoom, animated segments, breadcrumb navigation, and legend sync

## Chart utilities
- [Axis](https://ui.cortexcn.dev/docs/utility/axis.md): X and Y axis components for line and area charts
- [X Axis](https://ui.cortexcn.dev/docs/utility/axis/x-axis.md): Date labels for the horizontal axis in line and area charts
- [Y Axis](https://ui.cortexcn.dev/docs/utility/axis/y-axis.md): Value labels for the vertical axis in line and area charts
- [Background](https://ui.cortexcn.dev/docs/utility/background.md): Pattern fill for the plot area when grid lines are hidden — presets, edge fade, and enter animation
- [Brush](https://ui.cortexcn.dev/docs/utility/brush.md): Time-range brush for zooming area and line charts with a mini-chart strip and draggable selection handles
- [Custom Indicator](https://ui.cortexcn.dev/docs/utility/custom-indicator.md): Create custom tooltip indicators for charts using the useChart hook
- [Grid](https://ui.cortexcn.dev/docs/utility/grid.md): A customizable grid component for charts with horizontal and vertical lines, edge fade, edge line hiding, and dashed styling
- [Legend](https://ui.cortexcn.dev/docs/utility/legend.md): A composable legend component for charts with progress bars, markers, and customizable layouts
- [Projection Line](https://ui.cortexcn.dev/docs/utility/projection-line.md): Forecast segment extending a line series past the last data point — dashed stroke, gradient, and horizon marker
- [Reference Area](https://ui.cortexcn.dev/docs/utility/reference-area.md): Shaded Y band for target ranges and thresholds on cartesian charts — solid or pattern fill, dashed edges, and Y-axis tick coloring
- [Tooltip](https://ui.cortexcn.dev/docs/utility/tooltip.md): An interactive tooltip component for charts with crosshair, dots, date picker, and customizable content
- [useChart Hook](https://ui.cortexcn.dev/docs/utility/use-chart.md): Access chart state and context for building custom chart components

## Blocks
- [Features](https://ui.cortexcn.dev/blocks/features): Feature sections that explain what your product does, with icons, images, and motion.
- [Stat Cards](https://ui.cortexcn.dev/blocks/stat-cards): KPI cards with animated numbers, trend badges, and chart sparklines.

## Optional
- [Full documentation](https://www.cortexcn.dev/llms-full.txt): every docs page in one markdown file
- [Home page](https://www.cortexcn.dev/index.md): the landing page in markdown
- [Chart gallery](https://ui.cortexcn.dev/charts/area-chart): live examples of every chart
- [Pricing](https://www.cortexcn.dev/pricing): the one-time component plans, starting prices for every client service and retainer, and a project estimator, in US dollars
- [Contact](https://www.cortexcn.dev/contact): email, phone, and a contact form for questions, support, and custom work