# cascivo component index Every component, chart, block, and layout in the registry, with its distribution channel and per-component doc. Names are exact registry names (namespaced entries keep their prefix). Full manifests: `/llms/.md`. | Component | Channel | Doc | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------------------------- | | **Accordion** — Vertically stacked, collapsible content sections | npm @cascivo/react · or copy-paste | `/llms/accordion.md` | | **ActionSheet** — Bottom-rising sheet of discrete actions (iOS action-sheet pattern) with a Cancel button | npm @cascivo/react · or copy-paste | `/llms/action-sheet.md` | | **Alert** — Highlights a short, important message inline | npm @cascivo/react · or copy-paste | `/llms/alert.md` | | **AlertDialog** — Confirmation dialog requiring explicit user action; no light-dismiss | npm @cascivo/react · or copy-paste | `/llms/alert-dialog.md` | | **AppShell** — Sticky-header + full-height side-nav + single-scroll-container layout with an animated, accessible nav toggle. | npm @cascivo/react · or copy-paste | `/llms/app-shell.md` | | **AspectRatio** — Constrains content to a fixed width-to-height ratio | npm @cascivo/react · or copy-paste | `/llms/aspect-ratio.md` | | **Avatar** — Displays a user image with initials fallback | npm @cascivo/react · or copy-paste | `/llms/avatar.md` | | **AvatarGroup** — Overlapping stack of avatars with a max cap and an i18n-labelled +N overflow chip | npm @cascivo/react · or copy-paste | `/llms/avatar-group.md` | | **Badge** — Small status label or category indicator | npm @cascivo/react · or copy-paste | `/llms/badge.md` | | **App Shell** — Two-column layout with collapsible sidebar, nav links, and content area. | copy-paste | `/llms/block/app-shell.md` | | **Login Form** — Email + password login with remember-me checkbox and forgot-password link. | copy-paste | `/llms/block/auth-login.md` | | **Sign Up Form** — Full-name, email, password, confirm-password sign-up form with terms checkbox. | copy-paste | `/llms/block/auth-signup.md` | | **ConsoleApp** — Carbon-parity console shell: ShellHeader + icon-rail SideNav + HeaderPanel notifications/switcher + collapsible aside + main content. | copy-paste | `/llms/block/console-app.md` | | **DashboardCharts** — Dashboard layout with KPI tiles, line chart, bar chart, and pie chart. | copy-paste | `/llms/block/dashboard-charts.md` | | **Dashboard Overview** — Welcome header with four KPI stat cards (revenue, users, orders, conversion). | copy-paste | `/llms/block/dashboard-overview.md` | | **Dashboard Table** — Searchable, sortable, paginated data table with export button. | copy-paste | `/llms/block/dashboard-table.md` | | **EmptyDashboard** — Dashboard page showing an empty state with a call-to-action button. | copy-paste | `/llms/block/empty-dashboard.md` | | **FAQ Accordion** — Frequently-asked-questions section composed from the Accordion component, with a centered, readable measure. | copy-paste | `/llms/block/faq.md` | | **LoginPage** — Authentication login page with email and password form. | copy-paste | `/llms/block/login-page.md` | | **Feature Grid** — Three-column responsive feature grid with icon, title, and description per cell. | copy-paste | `/llms/block/marketing-features.md` | | **Hero Section** — Full-width hero with headline, subtitle, CTA pair, and trust badges. | copy-paste | `/llms/block/marketing-hero.md` | | **NotificationCenter** — A list of notification alerts with a mark-all-read action. | copy-paste | `/llms/block/notification-center.md` | | **PageWithBreadcrumb** — A centered content page with a breadcrumb navigation and page header. | copy-paste | `/llms/block/page-with-breadcrumb.md` | | **Pricing Tiers** — Responsive three-tier pricing section composed from Card, Badge, and Button, with a highlighted featured plan. | copy-paste | `/llms/block/pricing.md` | | **SettingsFormPage** — Settings page with profile form inside a two-column settings layout. | copy-paste | `/llms/block/settings-form-page.md` | | **Settings — Profile** — Two-section settings form: personal info fields + preference toggles. | copy-paste | `/llms/block/settings-profile.md` | | **SidebarApp** — Full app shell with collapsible side navigation and top header. | copy-paste | `/llms/block/sidebar-app.md` | | **Site Footer** — Multi-column site footer composed from Link and Separator, with a brand blurb, link columns, and a legal row. | copy-paste | `/llms/block/site-footer.md` | | **StatsCards** — Grid of KPI stat cards with trend badges. | copy-paste | `/llms/block/stats-cards.md` | | **Testimonials** — Responsive testimonial grid composed from Card and Avatar, with a quote and attribution per card. | copy-paste | `/llms/block/testimonials.md` | | **UsersTablePage** — Full users management page with table, search, and invite action. | copy-paste | `/llms/block/users-table-page.md` | | **Blockquote** — Quoted passage with optional attribution footer | npm @cascivo/react · or copy-paste | `/llms/blockquote.md` | | **BottomSheet** — Mobile bottom sheet with drag-to-resize detents, velocity-projected snapping, and drag-to-dismiss | npm @cascivo/react · or copy-paste | `/llms/bottom-sheet.md` | | **Breadcrumb** — Shows the current page location within a navigation hierarchy | npm @cascivo/react · or copy-paste | `/llms/breadcrumb.md` | | **Button** — Triggers an action or event | npm @cascivo/react · or copy-paste | `/llms/button.md` | | **ButtonGroup** — Visually joins a set of related buttons into a single segmented control | npm @cascivo/react · or copy-paste | `/llms/button-group.md` | | **Calendar** — An accessible standalone month-grid date picker. | npm @cascivo/react · or copy-paste | `/llms/calendar.md` | | **Card** — Container for grouping related content | npm @cascivo/react · or copy-paste | `/llms/card.md` | | **Carousel** — Scroll-snap slide deck with previous/next controls and dot indicators | npm @cascivo/react · or copy-paste | `/llms/carousel.md` | | **AreaChart** — Area chart with optional stacking, multi-series support, and hover tooltip. | npm @cascivo/charts | `/llms/chart/area-chart.md` | | **BarChart** — Bar chart with vertical/horizontal orientation, grouped or stacked modes, and multi-series support. | npm @cascivo/charts | `/llms/chart/bar-chart.md` | | **Boxplot** — Box-and-whisker plot with five-number summary and outlier dots per series. | npm @cascivo/charts | `/llms/chart/boxplot.md` | | **BubbleChart** — Bubble chart mapping x, y, and size dimensions; radius is area-proportional via sqrt scale. | npm @cascivo/charts | `/llms/chart/bubble-chart.md` | | **Bullet** — Bullet chart with background range bands, measure bar, and target tick. | npm @cascivo/charts | `/llms/chart/bullet.md` | | **Calendar** — Calendar heatmap — a week-column grid of day cells colored by value (GitHub-style). | npm @cascivo/charts | `/llms/chart/calendar.md` | | **Candlestick** — OHLC financial chart — each period a high–low wick and an open↔close body, coloured up/down. | npm @cascivo/charts | `/llms/chart/candlestick.md` | | **ComboChart** — Combination bar + line chart on shared or dual y-axes. | npm @cascivo/charts | `/llms/chart/combo-chart.md` | | **Funnel** — Vertical conversion funnel — each stage is a trapezoid narrowing toward the next, with optional conversion labels. | npm @cascivo/charts | `/llms/chart/funnel.md` | | **Gauge** — A speedometer gauge — a value arc over a min–max sweep with threshold zones, ticks, and a needle. | npm @cascivo/charts | `/llms/chart/gauge.md` | | **Heatmap** — Two-dimensional heatmap with band scales and color-mix cell interpolation. | npm @cascivo/charts | `/llms/chart/heatmap.md` | | **Histogram** — Frequency histogram using Freedman–Diaconis binning with hover tooltips. | npm @cascivo/charts | `/llms/chart/histogram.md` | | **Kpi** — KPI card showing a primary metric with optional delta indicator, icon, and sparkline. | npm @cascivo/charts | `/llms/chart/kpi.md` | | **LineChart** — Time-series or numeric line chart with multi-series support, hover tooltip, and legend. | npm @cascivo/charts | `/llms/chart/line-chart.md` | | **Meter** — Progress meter in bar or gauge variant with threshold coloring. | npm @cascivo/charts | `/llms/chart/meter.md` | | **PieChart** — Pie or donut chart with hover segments and optional legend. | npm @cascivo/charts | `/llms/chart/pie-chart.md` | | **Polar** — A polar coordinate plot — categories around the circle, value as radius. Bars (a rose), or a polar line/area. | npm @cascivo/charts | `/llms/chart/polar.md` | | **Radar** — Radar / spider chart with polar grid rings, spokes, and multi-series polygon overlays. | npm @cascivo/charts | `/llms/chart/radar.md` | | **RadialBar** — Concentric radial bars (a circular gauge family) — each datum is a ring whose sweep is proportional to its value. | npm @cascivo/charts | `/llms/chart/radial-bar.md` | | **Sankey** — Flow diagram — ranked nodes connected by throughput-sized link ribbons. | npm @cascivo/charts | `/llms/chart/sankey.md` | | **ScatterChart** — Scatter plot with variable point radius, multi-series, and hover tooltip. | npm @cascivo/charts | `/llms/chart/scatter-chart.md` | | **Sparkline** — Compact inline sparkline for embedding trend data in dashboards or KPI cards. | npm @cascivo/charts | `/llms/chart/sparkline.md` | | **Stream** — Streamgraph — stacked areas on a centered (silhouette) flowing baseline. | npm @cascivo/charts | `/llms/chart/stream.md` | | **Sunburst** — Radial hierarchy — concentric rings where each node is an annular segment sized by value. | npm @cascivo/charts | `/llms/chart/sunburst.md` | | **Treemap** — Squarified treemap for visualizing part-to-whole hierarchical data. | npm @cascivo/charts | `/llms/chart/treemap.md` | | **ChatBubble** — Message bubble for chat and messaging UIs with avatar, name, and timestamp support | npm @cascivo/react · or copy-paste | `/llms/chat-bubble.md` | | **Checkbox** — Binary toggle for forms, with indeterminate support | npm @cascivo/react · or copy-paste | `/llms/checkbox.md` | | **CheckboxCard** — Multi-selectable card backed by a native checkbox. Use multiple independent CheckboxCards for multi-select scenarios. | npm @cascivo/react · or copy-paste | `/llms/checkbox-card.md` | | **Code** — Inline code span for identifiers, commands, and short snippets | npm @cascivo/react · or copy-paste | `/llms/code.md` | | **CodeSnippet** — Displays code (inline, single-line, or multi-line) with an optional copy button, lightweight built-in syntax highlighting for bash/css/js/ts, and an optional terminal-window look | npm @cascivo/react · or copy-paste | `/llms/code-snippet.md` | | **Collapsible** — A single disclosure region toggled open and closed by its trigger | npm @cascivo/react · or copy-paste | `/llms/collapsible.md` | | **ColorPicker** — Interactive color selection widget with saturation/lightness area, hue and alpha sliders | npm @cascivo/react · or copy-paste | `/llms/color-picker.md` | | **Combobox** — Filterable single-select with an animated custom listbox, built on the dropdown open/close machine | npm @cascivo/react · or copy-paste | `/llms/combobox.md` | | **CommandMenu** — Cmd+K command palette with fuzzy search over grouped commands | npm @cascivo/react · or copy-paste | `/llms/command-menu.md` | | **Comparison** — Reveals the difference between two layers with a draggable divider | npm @cascivo/react · or copy-paste | `/llms/comparison.md` | | **ContainedList** — Labelled list of rows inside a bordered container | npm @cascivo/react · or copy-paste | `/llms/contained-list.md` | | **ContextMenu** — Right-click context menu anchored at pointer coordinates via CSS custom properties | npm @cascivo/react · or copy-paste | `/llms/context-menu.md` | | **CopyButton** — Icon button that copies a value to the clipboard with copied feedback | npm @cascivo/react · or copy-paste | `/llms/copy-button.md` | | **DataList** — Key-value pairs rendered as a description list | npm @cascivo/react · or copy-paste | `/llms/data-list.md` | | **DataTable** — Signal-driven data table with client/server sort, filter, pagination, multi-selection, expandable rows, and CSS content-visibility row containment for large datasets | npm @cascivo/react · or copy-paste | `/llms/data-table.md` | | **DatePicker** — An accessible date-picker with a calendar popover. | npm @cascivo/react · or copy-paste | `/llms/date-picker.md` | | **DateRangePicker** — A dual-calendar picker for selecting a contiguous date range. | npm @cascivo/react · or copy-paste | `/llms/date-range-picker.md` | | **Dock** — Fixed bottom navigation bar for mobile app shells with up to 5 items | npm @cascivo/react · or copy-paste | `/llms/dock.md` | | **Drawer** — Edge-anchored dialog panel that slides in from a screen edge with CSS-only enter/exit motion | npm @cascivo/react · or copy-paste | `/llms/drawer.md` | | **Dropdown** — Menu of actions revealed from a trigger | npm @cascivo/react · or copy-paste | `/llms/dropdown.md` | | **Editable** — Inline click-to-edit text field | npm @cascivo/react · or copy-paste | `/llms/editable.md` | | **CodeEditor** — Lightweight code editor — a native textarea overlaid on a syntax-highlighted layer, with line numbers and Tab indent. | npm @cascivo/editor | `/llms/editor/code-editor.md` | | **Highlight** — Read-only syntax-highlighted code block — the same owned tokenizer as CodeEditor, without the textarea. | npm @cascivo/editor | `/llms/editor/highlight.md` | | **EmptyState** — Placeholder for views that have no data to display | npm @cascivo/react · or copy-paste | `/llms/empty-state.md` | | **Fab** — Floating action button anchored to a screen corner, with an optional speed-dial of secondary actions | npm @cascivo/react · or copy-paste | `/llms/fab.md` | | **Field** — Form-field wrapper composing label, control, description, and error | npm @cascivo/react · or copy-paste | `/llms/field.md` | | **FileUploader** — Drag-and-drop file upload zone with file list and status indicators. | npm @cascivo/react · or copy-paste | `/llms/file-uploader.md` | | **Filter** — A group of toggleable pill or outline buttons for filtering content by category | npm @cascivo/react · or copy-paste | `/llms/filter.md` | | **Flow** — The declarative, AI-first flow surface — render a node/edge graph from plain serializable data. | npm @cascivo/flow | `/llms/flow/flow.md` | | **FlowBackground** — Decorative dots / grid / cross canvas background, drawn purely in CSS gradients. | npm @cascivo/flow | `/llms/flow/flow-background.md` | | **FlowCanvas** — The pan/zoom canvas pane — a single CSS-transformed layer driven by the viewport signal. | npm @cascivo/flow | `/llms/flow/flow-canvas.md` | | **FlowControls** — Zoom in / out / fit-view controls for a flow canvas — real, i18n-labeled buttons. | npm @cascivo/flow | `/llms/flow/flow-controls.md` | | **FlowEdge** — An SVG edge with bezier/straight/smoothstep paths, an arrowhead, an optional label, and animation. | npm @cascivo/flow | `/llms/flow/flow-edge.md` | | **FlowHandle** — A connection port on a node edge — where edges attach and interactive connect starts. | npm @cascivo/flow | `/llms/flow/flow-handle.md` | | **FlowMiniMap** — A scaled SVG overview of the graph with a draggable viewport rectangle. | npm @cascivo/flow | `/llms/flow/flow-minimap.md` | | **FlowNode** — An HTML node box positioned in the viewport pane — draggable, selectable, with arbitrary children. | npm @cascivo/flow | `/llms/flow/flow-node.md` | | **FlowPanel** — An absolutely-positioned slot for custom flow-canvas UI (legend, toolbar). | npm @cascivo/flow | `/llms/flow/flow-panel.md` | | **FlowStory** — A scripted, sequenced, looping flow animation — walks a graph step by step with fade-in captions. | npm @cascivo/flow | `/llms/flow/flow-story.md` | | **Form** — Typed signal-based form store (createForm/useForm) with sync/async validation and a thin Form element wrapper | npm @cascivo/react · or copy-paste | `/llms/form.md` | | **Header** — App top bar with brand, primary navigation links, and an actions slot | npm @cascivo/react · or copy-paste | `/llms/header.md` | | **HeaderPanel** — Non-modal panel anchored below the shell header at the inline-end edge — hosts notifications, app switcher, user settings | npm @cascivo/react · or copy-paste | `/llms/header-panel.md` | | **Heading** — Section heading with semantic level decoupled from visual size | npm @cascivo/react · or copy-paste | `/llms/heading.md` | | **HoverCard** — Hover-triggered popover with configurable open/close delay | npm @cascivo/react · or copy-paste | `/llms/hover-card.md` | | **IconButton** — Square, icon-only button with a required accessible label | npm @cascivo/react · or copy-paste | `/llms/icon-button.md` | | **Image** — Image with load state, blur-up placeholder, graceful fallback, and optional zoom | npm @cascivo/react · or copy-paste | `/llms/image.md` | | **Indicator** — Positions an overlay element (badge, dot, count) at a corner of its child | npm @cascivo/react · or copy-paste | `/llms/indicator.md` | | **InlineLoading** — Compact inline status indicator that pairs a label with a loading, success, or error state | npm @cascivo/react · or copy-paste | `/llms/inline-loading.md` | | **Input** — Text input field with optional label, hint, and error state | npm @cascivo/react · or copy-paste | `/llms/input.md` | | **InputGroup** — Prefix/suffix addon wrapper for Input; InputGroupAddon renders inline icons/units inside the field border; ButtonGroup collapses adjacent button borders | npm @cascivo/react · or copy-paste | `/llms/input-group.md` | | **Item** — Generic content row primitive with media, content, and action regions | npm @cascivo/react · or copy-paste | `/llms/item.md` | | **Join** — Groups adjacent children into a seamless joined element by removing interior borders and radii | npm @cascivo/react · or copy-paste | `/llms/join.md` | | **Kbd** — Displays a keyboard key or shortcut | npm @cascivo/react · or copy-paste | `/llms/kbd.md` | | **Label** — Accessible caption for a form control | npm @cascivo/react · or copy-paste | `/llms/label.md` | | **AppShell** — Full-page application shell with persisted collapsible sidebar. Includes a signal-driven top progress bar with determinate progress, error state, and dismissible error strip. | copy-paste | `/llms/layout/app-shell.md` | | **AuthLayout** — Centered card layout for authentication pages (login, register, forgot password). | copy-paste | `/llms/layout/auth-layout.md` | | **AutoGrid** — Media-query-free responsive grid — columns auto-fill based on available space. | copy-paste | `/llms/layout/auto-grid.md` | | **Center** — Horizontally centered container with a configurable max-width. | copy-paste | `/llms/layout/center.md` | | **Columns** — Equal-width multi-column layout that collapses to single column on narrow viewports. | copy-paste | `/llms/layout/columns.md` | | **DashboardLayout** — Dashboard page layout with stats strip, main content area, and optional aside. | copy-paste | `/llms/layout/dashboard-layout.md` | | **Flex** — Flex layout primitive for vertical or horizontal stacking with gap control. ⚠ Unlike CSS `flex-direction`, `direction` defaults to `vertical` — pass `direction="horizontal"` for a row. | copy-paste | `/llms/layout/flex.md` | | **Grid** — CSS grid layout primitive with responsive column collapsing. Establishes its own containment, so responsive `cols` adapt to the grid’s own slot width with no wrapper or container ancestor required. | copy-paste | `/llms/layout/grid.md` | | **Masonry** — Masonry layout — native CSS masonry where supported, multi-column fallback elsewhere (fallback orders items top-to-bottom per column). | copy-paste | `/llms/layout/masonry.md` | | **PageHeader** — Page-level header with title, description, breadcrumb, and actions slots. | copy-paste | `/llms/layout/page-header.md` | | **Section** — Page-section shell with block padding, centered inner width, and stack gap. | copy-paste | `/llms/layout/section.md` | | **SettingsLayout** — Two-column settings page layout with a fixed-width menu and fluid content area. | copy-paste | `/llms/layout/settings-layout.md` | | **Spacer** — Fixed-height spacing block using design token steps. | copy-paste | `/llms/layout/spacer.md` | | **SplitView** — Resizable two-pane split layout with keyboard and pointer drag support. | copy-paste | `/llms/layout/split-view.md` | | **Link** — Styled anchor for navigation, standalone or inline within prose | npm @cascivo/react · or copy-paste | `/llms/link.md` | | **List** — Styled unordered or ordered list with ListItem | npm @cascivo/react · or copy-paste | `/llms/list.md` | | **LogViewer** — Virtualized monospace console for high-frequency log and stream output | npm @cascivo/react · or copy-paste | `/llms/log-viewer.md` | | **Menu** — Dropdown menu with keyboard navigation, built on usePopover | npm @cascivo/react · or copy-paste | `/llms/menu.md` | | **MenuButton** — A button that opens an anchored action menu of one-shot commands | npm @cascivo/react · or copy-paste | `/llms/menu-button.md` | | **Menubar** — Horizontal application menu bar with keyboard-navigable dropdown menus | npm @cascivo/react · or copy-paste | `/llms/menubar.md` | | **Modal** — Accessible dialog overlay using native element | npm @cascivo/react · or copy-paste | `/llms/modal.md` | | **MultiSelect** — Searchable multi-value select with popover listbox | npm @cascivo/react · or copy-paste | `/llms/multi-select.md` | | **NativeSelect** — A styled native