# cobalt > A starter kit for building and publishing your own shadcn registry components. Use this index to discover the available documentation pages, markdown mirrors, and registry resources before browsing. ## Docs - Get Started - [Introduction](https://cobalt-ui.xiaopengye.com/docs.md): A template for building and publishing your own shadcn registry components. - [Installation](https://cobalt-ui.xiaopengye.com/docs/installation.md) - Components - [Components](https://cobalt-ui.xiaopengye.com/docs/components.md): Browse the components available in this registry. - [Accordion](https://cobalt-ui.xiaopengye.com/docs/components/accordion.md): The Accordion component from this design system, built on Base UI. - [Agent Thinking](https://cobalt-ui.xiaopengye.com/docs/components/agent-thinking.md): An activity indicator for an assistant response. - [Alert](https://cobalt-ui.xiaopengye.com/docs/components/alert.md): The Alert component from this design system, built on Base UI. - [Alert Dialog](https://cobalt-ui.xiaopengye.com/docs/components/alert-dialog.md): The Alert Dialog component from this design system, built on Base UI. - [Announcement](https://cobalt-ui.xiaopengye.com/docs/components/announcement.md): A compact card for sharing an update or action. - [Aspect Ratio](https://cobalt-ui.xiaopengye.com/docs/components/aspect-ratio.md): A container that maintains a specified width-to-height ratio. - [Attachment](https://cobalt-ui.xiaopengye.com/docs/components/attachment.md): The Attachment component from this design system, built on Base UI. - [Avatar](https://cobalt-ui.xiaopengye.com/docs/components/avatar.md): The Avatar component from this design system, built on Base UI. - [Badge](https://cobalt-ui.xiaopengye.com/docs/components/badge.md): The Badge component from this design system, built on Base UI. - [Breadcrumb](https://cobalt-ui.xiaopengye.com/docs/components/breadcrumb.md): The Breadcrumb component from this design system, built on Base UI. - [Bubble](https://cobalt-ui.xiaopengye.com/docs/components/bubble.md): The Bubble component from this design system, built on Base UI. - [Button](https://cobalt-ui.xiaopengye.com/docs/components/button.md): The Button component from this design system, built on Base UI. - [Button Group](https://cobalt-ui.xiaopengye.com/docs/components/button-group.md): The Button Group component from this design system, built on Base UI. - [Calendar](https://cobalt-ui.xiaopengye.com/docs/components/calendar.md): Put a month right on the page for picking a delivery day, a deadline, or a run of nights. - [Card](https://cobalt-ui.xiaopengye.com/docs/components/card.md): The Card component from this design system, built on Base UI. - [Carousel](https://cobalt-ui.xiaopengye.com/docs/components/carousel.md): The Carousel component from this design system, built on Base UI. - [Checkbox](https://cobalt-ui.xiaopengye.com/docs/components/checkbox.md): The Checkbox component from this design system, built on Base UI. - [Checkbox Card](https://cobalt-ui.xiaopengye.com/docs/components/checkbox-card.md): A selectable card built on the Checkbox component. - [Code Block](https://cobalt-ui.xiaopengye.com/docs/components/code-block.md): The Code Block component from this design system, built on Base UI. - [Collapsible](https://cobalt-ui.xiaopengye.com/docs/components/collapsible.md): The Collapsible component from this design system, built on Base UI. - [Color Picker](https://cobalt-ui.xiaopengye.com/docs/components/color-picker.md): Choose a colour by eye or by hex, with an optional opacity rail and preset swatches. - [Combobox](https://cobalt-ui.xiaopengye.com/docs/components/combobox.md): The Combobox component from this design system, built on Base UI. - [Command](https://cobalt-ui.xiaopengye.com/docs/components/command.md): A searchable list of actions and destinations, built on cmdk and Base UI. - [Composer](https://cobalt-ui.xiaopengye.com/docs/components/composer.md): Composable chat input parts built on Input Group, with a pill shell, toolbars, a footer, and a working state. - [Composer Loader](https://cobalt-ui.xiaopengye.com/docs/components/composer-loader.md): An animated light band for a composer or other loading surface. - [Context Menu](https://cobalt-ui.xiaopengye.com/docs/components/context-menu.md): The Context Menu component from this design system, built on Base UI. - [Data Grid](https://cobalt-ui.xiaopengye.com/docs/components/data-grid.md): An editable spreadsheet-style grid for structured data. - [Data Table](https://cobalt-ui.xiaopengye.com/docs/components/data-table.md): A sortable data table composed with TanStack Table. - [Date Picker](https://cobalt-ui.xiaopengye.com/docs/components/date-picker.md): Select a date or date range. - [Dialog](https://cobalt-ui.xiaopengye.com/docs/components/dialog.md): The Dialog component from this design system, built on Base UI. - [Direction](https://cobalt-ui.xiaopengye.com/docs/components/direction.md): The Direction component from this design system, built on Base UI. - [Drawer](https://cobalt-ui.xiaopengye.com/docs/components/drawer.md): The Drawer component from this design system, built on Base UI. - [Dropdown Menu](https://cobalt-ui.xiaopengye.com/docs/components/dropdown-menu.md): A popover menu of grouped actions. Unlike Select, it does not pick a value into its trigger. - [Empty](https://cobalt-ui.xiaopengye.com/docs/components/empty.md): The Empty component from this design system, built on Base UI. - [Field](https://cobalt-ui.xiaopengye.com/docs/components/field.md): The Field component from this design system, built on Base UI. - [File Upload](https://cobalt-ui.xiaopengye.com/docs/components/file-upload.md): A file selection and drop zone with validation and simulated progress. - [Hover Card](https://cobalt-ui.xiaopengye.com/docs/components/hover-card.md): The Hover Card component from this design system, built on Base UI. - [Input](https://cobalt-ui.xiaopengye.com/docs/components/input.md): The Input component from this design system, built on Base UI. - [Input Group](https://cobalt-ui.xiaopengye.com/docs/components/input-group.md): The Input Group component from this design system, built on Base UI. - [Input Otp](https://cobalt-ui.xiaopengye.com/docs/components/input-otp.md): The Input Otp component from this design system, built on Base UI. - [Item](https://cobalt-ui.xiaopengye.com/docs/components/item.md): The Item component from this design system, built on Base UI. - [Kbd](https://cobalt-ui.xiaopengye.com/docs/components/kbd.md): The Kbd component from this design system, built on Base UI. - [Label](https://cobalt-ui.xiaopengye.com/docs/components/label.md): The Label component from this design system, built on Base UI. - [Marker](https://cobalt-ui.xiaopengye.com/docs/components/marker.md): The Marker component from this design system, built on Base UI. - [Menubar](https://cobalt-ui.xiaopengye.com/docs/components/menubar.md): The Menubar component from this design system, built on Base UI. - [Message](https://cobalt-ui.xiaopengye.com/docs/components/message.md): The Message component from this design system, built on Base UI. - [Message Scroller](https://cobalt-ui.xiaopengye.com/docs/components/message-scroller.md): The Message Scroller component from this design system, built on Base UI. - [Meter](https://cobalt-ui.xiaopengye.com/docs/components/meter.md): The Meter component from this design system, built on Base UI. - [Native Select](https://cobalt-ui.xiaopengye.com/docs/components/native-select.md): The Native Select component from this design system, built on Base UI. - [Navigation Menu](https://cobalt-ui.xiaopengye.com/docs/components/navigation-menu.md): The Navigation Menu component from this design system, built on Base UI. - [Number Field](https://cobalt-ui.xiaopengye.com/docs/components/number-field.md): A formatted number typed or stepped, with minus and plus buttons at the end of an Input. - [Pagination](https://cobalt-ui.xiaopengye.com/docs/components/pagination.md): The Pagination component from this design system, built on Base UI. - [Period Switcher](https://cobalt-ui.xiaopengye.com/docs/components/period-switcher.md): A chip with previous and next buttons around a label that slides up when the period changes. - [Popover](https://cobalt-ui.xiaopengye.com/docs/components/popover.md): The Popover component from this design system, built on Base UI. - [Progress](https://cobalt-ui.xiaopengye.com/docs/components/progress.md): The Progress component from this design system, built on Base UI. - [Questionnaire](https://cobalt-ui.xiaopengye.com/docs/components/questionnaire.md): The Questionnaire component from this design system, built on Base UI. - [Radio Card](https://cobalt-ui.xiaopengye.com/docs/components/radio-card.md): A selectable card built on Radio Group. - [Radio Group](https://cobalt-ui.xiaopengye.com/docs/components/radio-group.md): The Radio Group component from this design system, built on Base UI. - [Resizable](https://cobalt-ui.xiaopengye.com/docs/components/resizable.md): The Resizable component from this design system, built on react-resizable-panels. - [Reveal](https://cobalt-ui.xiaopengye.com/docs/components/reveal.md): An entrance animation for list items, cards and page sections. The element fades in and rises 12px. - [Scroll Area](https://cobalt-ui.xiaopengye.com/docs/components/scroll-area.md): The Scroll Area component from this design system, built on Base UI. - [Search Field](https://cobalt-ui.xiaopengye.com/docs/components/search-field.md): A text field for a query, with a search icon, a clear button and an optional loading light. - [Select](https://cobalt-ui.xiaopengye.com/docs/components/select.md): The Select component from this design system, built on Base UI. - [Separator](https://cobalt-ui.xiaopengye.com/docs/components/separator.md): The Separator component from this design system, built on Base UI. - [Sheet](https://cobalt-ui.xiaopengye.com/docs/components/sheet.md): The Sheet component from this design system, built on Base UI. - [Sidebar](https://cobalt-ui.xiaopengye.com/docs/components/sidebar.md): The Sidebar component from this design system, built on Base UI. - [Skeleton](https://cobalt-ui.xiaopengye.com/docs/components/skeleton.md): The Skeleton component from this design system, built on Base UI. - [Slider](https://cobalt-ui.xiaopengye.com/docs/components/slider.md): The Slider component from this design system, built on Base UI. - [Social Button](https://cobalt-ui.xiaopengye.com/docs/components/social-button.md): A provider sign-in button built on Base UI. - [Sonner](https://cobalt-ui.xiaopengye.com/docs/components/sonner.md): Toasts drawn as notification cards, powered by Sonner. - [Spinner](https://cobalt-ui.xiaopengye.com/docs/components/spinner.md): The Spinner component from this design system, built on Base UI. - [Status Dot](https://cobalt-ui.xiaopengye.com/docs/components/status-dot.md): A compact decorative indicator for status labels. - [Switch](https://cobalt-ui.xiaopengye.com/docs/components/switch.md): The Switch component from this design system, built on Base UI. - [Switch Card](https://cobalt-ui.xiaopengye.com/docs/components/switch-card.md): A selectable settings card built on the Base UI Switch. - [Table](https://cobalt-ui.xiaopengye.com/docs/components/table.md): The Table component from this design system, built on Base UI. - [Tabs](https://cobalt-ui.xiaopengye.com/docs/components/tabs.md): The Tabs component from this design system, built on Base UI. - [Tag Group](https://cobalt-ui.xiaopengye.com/docs/components/tag-group.md): A labelled set of tags for filtering, picking or pruning, built on Base UI. - [Textarea](https://cobalt-ui.xiaopengye.com/docs/components/textarea.md): The Textarea component from this design system, built on Base UI. - [Theme Toggle](https://cobalt-ui.xiaopengye.com/docs/components/theme-toggle.md): A light and dark theme control built on Base UI and next-themes. - [Time Field](https://cobalt-ui.xiaopengye.com/docs/components/time-field.md): A time of day typed segment by segment, on Input's field shell with a clock icon. - [Toggle](https://cobalt-ui.xiaopengye.com/docs/components/toggle.md): The Toggle component from this design system, built on Base UI. - [Toggle Group](https://cobalt-ui.xiaopengye.com/docs/components/toggle-group.md): The Toggle Group component from this design system, built on Base UI. - [Tooltip](https://cobalt-ui.xiaopengye.com/docs/components/tooltip.md): The Tooltip component from this design system, built on Base UI. - [Trace](https://cobalt-ui.xiaopengye.com/docs/components/trace.md): Show an assistant's steps and working state. - [Tree View](https://cobalt-ui.xiaopengye.com/docs/components/tree-view.md): A keyboard-navigable tree for nested content. - Blocks - [Blocks](https://cobalt-ui.xiaopengye.com/docs/blocks.md): Browse the assembled blocks available in this registry. - [Agent Creator 01](https://cobalt-ui.xiaopengye.com/docs/blocks/agent-creator-01.md): A compact editor for an agent profile and avatar. - [Agent Limits Card 01](https://cobalt-ui.xiaopengye.com/docs/blocks/agent-limits-card-01.md): A compact view of context capacity and usage allowances. - [Agent Progress 01](https://cobalt-ui.xiaopengye.com/docs/blocks/agent-progress-01.md): A collapsible progress panel for a sequence of tasks. - [AI Chat 01](https://cobalt-ui.xiaopengye.com/docs/blocks/ai-chat-01.md): A coding workspace with conversations and a side preview. - [AI Image Generation 01](https://cobalt-ui.xiaopengye.com/docs/blocks/ai-image-generation-01.md): A contained image generation workspace with a conversation and gallery. - [AI Profile 01](https://cobalt-ui.xiaopengye.com/docs/blocks/ai-profile-01.md): A profile dashboard with activity and usage charts. - [Alerts Card 01](https://cobalt-ui.xiaopengye.com/docs/blocks/alerts-card-01.md): A compact, scrollable feed of recent alerts. - [Auth Card 01](https://cobalt-ui.xiaopengye.com/docs/blocks/auth-card-01.md): Sign-in, sign-up, and verification cards with optional social providers. - [Calendar 01](https://cobalt-ui.xiaopengye.com/docs/blocks/calendar-01.md): A month view for events with an inbox and event details. - [Composer 01](https://cobalt-ui.xiaopengye.com/docs/blocks/composer-01.md): A full chat composer block with add and model menus, a voice toggle, branch and folder controls, and a context meter. - [Composer Attachments 01](https://cobalt-ui.xiaopengye.com/docs/blocks/composer-attachments-01.md): A message composer with compact attachment previews. - [Composer Panel 01](https://cobalt-ui.xiaopengye.com/docs/blocks/composer-panel-01.md): A message composer with model and permission controls. - [Finance Dashboard 01](https://cobalt-ui.xiaopengye.com/docs/blocks/finance-dashboard-01.md): A personal finance body with KPI cards, a cash flow diagram, spending charts and a transactions table. - [Home Dashboard 01](https://cobalt-ui.xiaopengye.com/docs/blocks/home-dashboard-01.md): A home dashboard body with new hires, earnings, revenue, activity, KPI cards and a customer table. - [Marketing Dashboard 01](https://cobalt-ui.xiaopengye.com/docs/blocks/marketing-dashboard-01.md): A responsive marketing overview with interactive charts and campaigns. - [Medical Profile 01](https://cobalt-ui.xiaopengye.com/docs/blocks/medical-profile-01.md): An interactive health profile dashboard with local sample data. - [Meeting Scheduler 01](https://cobalt-ui.xiaopengye.com/docs/blocks/meeting-scheduler-01.md): A scheduling panel with a calendar and time slots. - [Multi Agent Chat 01](https://cobalt-ui.xiaopengye.com/docs/blocks/multi-agent-chat-01.md): A three-column workspace for chatting with a team of agents. - [Notification Center 01](https://cobalt-ui.xiaopengye.com/docs/blocks/notification-center-01.md): A notification center with category filters, unread counts, and actions. - [Patient Info Card 01](https://cobalt-ui.xiaopengye.com/docs/blocks/patient-info-card-01.md): A compact patient profile and details card. - [Project Board 01](https://cobalt-ui.xiaopengye.com/docs/blocks/project-board-01.md): A contained workspace for organizing project tickets. - [Questionnaire 01](https://cobalt-ui.xiaopengye.com/docs/blocks/questionnaire-01.md): A compact, multi-step questionnaire with single and multiple selection. - [Settings Modal 01](https://cobalt-ui.xiaopengye.com/docs/blocks/settings-modal-01.md): A settings dialog with a navigation rail and scrollable pages. - [Sidebar 01](https://cobalt-ui.xiaopengye.com/docs/blocks/sidebar-01.md): A floating workspace sidebar with search and account menus. - [Stat Cards 01](https://cobalt-ui.xiaopengye.com/docs/blocks/stat-cards-01.md): A responsive set of dashboard metrics in compact and footer layouts. - [Task List 01](https://cobalt-ui.xiaopengye.com/docs/blocks/task-list-01.md): A progressive activity log for multi-step work. - [Web Search 01](https://cobalt-ui.xiaopengye.com/docs/blocks/web-search-01.md): A compact research trail with source links and a chat example. - Charts - [Charts](https://cobalt-ui.xiaopengye.com/docs/charts.md): Chart cards built on the Chart component, ready to install. - [Activity Rings Card 01](https://cobalt-ui.xiaopengye.com/docs/charts/activity-rings-card-01.md): A compact view of progress toward three daily goals. - [Area Chart Card 01](https://cobalt-ui.xiaopengye.com/docs/charts/area-chart-card-01.md): A multi-series area chart with period selection and totals. - [Bar List Card 01](https://cobalt-ui.xiaopengye.com/docs/charts/bar-list-card-01.md): A compact breakdown with proportional bars and optional tabs. - [Combo Chart Card 01](https://cobalt-ui.xiaopengye.com/docs/charts/combo-chart-card-01.md): Compare a volume and a rate on independent axes. - [Contributions Card 01](https://cobalt-ui.xiaopengye.com/docs/charts/contributions-card-01.md): An activity heatmap with summary statistics and time intervals. - [Earnings Chart Card 01](https://cobalt-ui.xiaopengye.com/docs/charts/earnings-chart-card-01.md): A revenue chart with selectable reporting periods. - [Funnel Chart Card 01](https://cobalt-ui.xiaopengye.com/docs/charts/funnel-chart-card-01.md): A horizontal funnel with selectable ranges and stage details. - [Heatmap Chart Card 01](https://cobalt-ui.xiaopengye.com/docs/charts/heatmap-chart-card-01.md): A compact matrix for comparing values across two dimensions. - [Line Chart Card 01](https://cobalt-ui.xiaopengye.com/docs/charts/line-chart-card-01.md): A period selector and summary above an area chart. - [Most Active Days Card 01](https://cobalt-ui.xiaopengye.com/docs/charts/most-active-days-card-01.md): A scrollable activity calendar paired with daily progress rings. - [Orders Chart Card 01](https://cobalt-ui.xiaopengye.com/docs/charts/orders-chart-card-01.md): A monthly comparison chart with an animated total. - [Radar Chart Card 01](https://cobalt-ui.xiaopengye.com/docs/charts/radar-chart-card-01.md): Compare values across dimensions in a compact radar chart. - [Radial Chart Card 01](https://cobalt-ui.xiaopengye.com/docs/charts/radial-chart-card-01.md): A compact radial chart with optional breakdown tiles. - [Revenue Chart Card 01](https://cobalt-ui.xiaopengye.com/docs/charts/revenue-chart-card-01.md): A revenue comparison chart with a changing headline. - [Sankey Chart Card 01](https://cobalt-ui.xiaopengye.com/docs/charts/sankey-chart-card-01.md): A two-column flow chart with selectable periods. - [Scatter Chart Card 01](https://cobalt-ui.xiaopengye.com/docs/charts/scatter-chart-card-01.md): Compare groups across two measures, with optional bubbles. - [Sleep Score Card 01](https://cobalt-ui.xiaopengye.com/docs/charts/sleep-score-card-01.md): A weekly sleep summary with an interactive score ring. - [Stage Bars Card 01](https://cobalt-ui.xiaopengye.com/docs/charts/stage-bars-card-01.md): Compare stages of a journey with colored or monochrome bars. - [Steps Card 01](https://cobalt-ui.xiaopengye.com/docs/charts/steps-card-01.md): A weekly activity chart with a week switcher. - Templates - [Templates](https://cobalt-ui.xiaopengye.com/docs/templates.md): Complete working apps you can install and make your own. - [Chat Starter](https://cobalt-ui.xiaopengye.com/docs/templates/chat-starter.md): A conversational app with a dashboard and account screens. - [Project Board](https://cobalt-ui.xiaopengye.com/docs/templates/project-board.md): A project workspace with a five-column ticket board. - [Home Dashboard](https://cobalt-ui.xiaopengye.com/docs/templates/home-dashboard.md): A workspace home with hires, earnings, revenue, activity and a customer table. - [Finance Dashboard](https://cobalt-ui.xiaopengye.com/docs/templates/finance-dashboard.md): A personal finance overview with a cash flow diagram, spending charts and a transactions table. - [Marketing Dashboard](https://cobalt-ui.xiaopengye.com/docs/templates/marketing-dashboard.md): A marketing overview with KPIs, a funnel, channel charts and a campaign table. - [Calendar](https://cobalt-ui.xiaopengye.com/docs/templates/calendar.md): A month calendar with a calendars popover, a day picker and an event details popover, with a dialog to create and edit events. - [Medical Profile](https://cobalt-ui.xiaopengye.com/docs/templates/medical-profile.md): A health profile with activity, sleep, alerts and a filterable patient table. - [AI Profile](https://cobalt-ui.xiaopengye.com/docs/templates/ai-profile.md): A profile with a cover, contribution heatmap, agents per day and token usage. - [AI Chat](https://cobalt-ui.xiaopengye.com/docs/templates/ai-chat.md): A coding agent workspace with sessions, a scripted run, composer menus and an image gallery. - [AI Image Generation](https://cobalt-ui.xiaopengye.com/docs/templates/ai-image-generation.md): An image generation workspace with a conversation, scripted generation and a gallery. - [Multi-agent Chat](https://cobalt-ui.xiaopengye.com/docs/templates/multi-agent-chat.md): A workspace for chatting with a team of agents, with a live avatar editor, a marketplace and group chats. ## Machine-readable Resources - [Full documentation](https://cobalt-ui.xiaopengye.com/llms-full.txt) - [Homepage markdown](https://cobalt-ui.xiaopengye.com/llms.md/content.md) - [OpenAPI description](https://cobalt-ui.xiaopengye.com/openapi.json) - [API catalog](https://cobalt-ui.xiaopengye.com/.well-known/api-catalog) - [Agent skill](https://cobalt-ui.xiaopengye.com/.well-known/agent-skills/site-skill.md) - [shadcn MCP server documentation](https://ui.shadcn.com/docs/mcp)