# Array UI (array-ui)

> One design system for personal sites, developer SaaS, and HTML explainer docs. Zero custom CSS, machined telemetry, and an agent-first component architecture. Complete shadcn CLI distribution, React components, and native Astro primitives hosted at https://ui.arpitbhayani.me.

Array UI is built for engineers and autonomous AI coding assistants (Cursor, Claude Code, Windsurf, Codex, Antigravity) who need machine-readable specifications, copy-paste prompts, and instant component installations.

Agent skills: `npx skills add https://ui.arpitbhayani.me` installs `array-ui` and `array-ui-review` into Claude Code, Cursor, Windsurf, Codex, and other agents.

## Autonomous Integration Guide for AI Agents

When asked to build, modify, or enhance interfaces using Array UI:

### 1. Integration Mode Decision Matrix
- **If the project uses Next.js / Vite / React with Tailwind**:
  Use **Mode A (shadcn CLI Registry)**. No package installation required.
  1. Ensure `components.json` has the `@aui` registry:
  ```json
  {
    "$schema": "https://ui.shadcn.com/schema.json",
    "style": "default",
    "registries": {
      "@aui": "https://ui.arpitbhayani.me/r/{name}.json"
    }
  }
  ```
  2. Install design tokens & base font layer: `npx shadcn@latest add @aui/aui -y`
  3. Autonomously install needed components: `npx shadcn@latest add @aui/page-shell @aui/navbar @aui/footer @aui/button @aui/card @aui/terminal @aui/ping-status @aui/tooltip -y`
  4. Import directly: `import { PageShell } from "@/components/ui/page-shell";`

- **If the project uses Astro or direct npm package**:
  Use **Mode B (Direct Package Dependency)**.
  1. Install package: `npm install array-ui` (or `pnpm add array-ui` / `bun add array-ui`)
  2. Setup styles in root layout: `import "array-ui/styles.css";`
  3. Import components:
     - React / Next.js: `import { PageShell, Button, Terminal, DiffBlock, PingStatus, Card } from "array-ui/nextjs";`
     - Astro: `import Terminal from "array-ui/astro/Terminal.astro";`

### 2. Strict Invariants (0% Custom CSS & Aesthetic Rules)
- **Zero Custom CSS Invariant**: NEVER write custom `.css` files and NEVER write `<style>` blocks in pages. All layouts, spacing, and styling MUST be driven exclusively by Array UI components and foundational utility classes (`.aui-grid`, `.aui-stack`, `.aui-row`, `.aui-container`, `.aui-h1`, etc.).
- **Mandatory Font Enforcement**: ALWAYS ensure Google Fonts are loaded in `globals.css` or root `<head>` (`Assistant`, `IBM Plex Mono`, `Lora`) and `body { font-family: var(--font-sans) }`. Never allow fallback to Arial/Inter.
- **PageShell Invariant**: Always frame full pages in `<PageShell navbar={<Navbar ... />} footer={<Footer ... />}>`.
- **Palette**: Paper canvas in light mode (#faf9f5), obsidian carbon in dark mode (#111113).
- **Hairline borders**: 1px subtle borders everywhere (#dfded9 in light, #27272c in dark).
- **Signature Crimson (#e5000f light, #ff3344 dark)**: Reserved strictly for primary action buttons, active navigation, and key focus rings.
- **Amber (#cc9900)**: Exclusively for engineering maxim quotes and warnings.
- **Emerald (#10b981)**: Operational status, ping dots, and diff additions.
- **Rose (#f43f5e)**: Errors, outages, and diff deletions.
- **Typography**: Assistant bold headings and body (dense, 15px base), Lora italic serif pull quotes/maxims, IBM Plex Mono code.
- **Action Clarity (Tooltip Invariant)**: Wrap every action button, theme toggle, copy button, and status dot in `<Tooltip content="...">`.
- **Autonomous Execution**: Never ask the user which components to install. Autonomously choose the required components and execute installation with `-y`.


### Architecture Views from a Repository (ArchitectureCanvas)
Install: `npx shadcn@latest add @aui/architecture-canvas -y`. To turn a codebase into an interactive diagram:
1. List components (services, packages, datastores, queues, external systems): one node per meaningful unit, 8 to 30 nodes.
2. Give each node a stable `id`, short `label`, `badge` (language or kind), and one-line `description`.
3. Set `group` to the owning package or service and declare it in `groups` (`kind`: service, layer, package, external). Groups collapse into one node.
4. Add one connection per dependency (caller to callee) with a short `label`; use `variant: "dashed"` for async edges.
5. Do NOT set `x`/`y`: the canvas auto-layouts (`direction="LR"` or `"TB"`). Explicit `x`/`y` still pins a node. Auto-layout targets about 40 nodes or fewer and does not nest groups.
```tsx
<ArchitectureCanvas
  title="Checkout Service"
  groups={[{ id: "core", label: "Core", kind: "service" }]}
  nodes={[
    { id: "web", label: "Web App" },
    { id: "api", label: "API Gateway", group: "core" },
    { id: "orders", label: "Orders", group: "core" },
  ]}
  connections={[
    { from: "web", to: "api", label: "HTTPS" },
    { from: "api", to: "orders", label: "gRPC" },
  ]}
/>
```

## Machine-Readable Endpoints

- [shadcn Registry Index](https://ui.arpitbhayani.me/r/registry.json): JSON manifest of all available registry components.
- [Full LLM Documentation](https://ui.arpitbhayani.me/llms-full.txt): Comprehensive single-file reference with all component APIs, prop types, and TSX examples.
- [Theme Style](https://ui.arpitbhayani.me/r/aui.json): Theme CSS variables, fonts, and light/dark color tokens.
- [Agent Guide (AGENTS.md)](https://raw.githubusercontent.com/arpitbbhayani/aui/main/AGENTS.md): Repository AGENTS.md guide for AI coding assistants.

## Components Registry

### Core UI & Action Primitives
- [Button](https://ui.arpitbhayani.me/r/button.json): Signature tactile action button with crimson primary, secondary, outline, ghost, and danger variants. `npx shadcn@latest add @aui/button -y`
- [Badge](https://ui.arpitbhayani.me/r/badge.json): Status pills and tag badges (crimson, emerald green, amber, rose red, sky blue, outline). `npx shadcn@latest add @aui/badge -y`
- [Card](https://ui.arpitbhayani.me/r/card.json): Flat card surface with 1px hairline border, header, title, description, content, and footer. `npx shadcn@latest add @aui/card -y`
- [Input](https://ui.arpitbhayani.me/r/input.json): Machined text input with subtle focus ring and optional keyboard shortcut badge. `npx shadcn@latest add @aui/input -y`
- [Select](https://ui.arpitbhayani.me/r/select.json): Minimal machined select input with native option support. `npx shadcn@latest add @aui/select -y`
- [Textarea](https://ui.arpitbhayani.me/r/textarea.json): Machined multi-line text field with hairline border. `npx shadcn@latest add @aui/textarea -y`
- [Switch](https://ui.arpitbhayani.me/r/switch.json): Machined toggle switch with smooth state animation. `npx shadcn@latest add @aui/switch -y`
- [Checkbox](https://ui.arpitbhayani.me/r/checkbox.json): Machined checkbox input with custom accent color. `npx shadcn@latest add @aui/checkbox -y`
- [Table](https://ui.arpitbhayani.me/r/table.json): Dense monospace table with hover rows and structured subcomponents. `npx shadcn@latest add @aui/table -y`
- [Toast](https://ui.arpitbhayani.me/r/toast.json): Status-tinted notification toast with dismiss button. `npx shadcn@latest add @aui/toast -y`
- [Spinner](https://ui.arpitbhayani.me/r/spinner.json): Minimal rotating loader indicator with size variants. `npx shadcn@latest add @aui/spinner -y`
- [Skeleton](https://ui.arpitbhayani.me/r/skeleton.json): Animated placeholder loader for text, cards, and avatars. `npx shadcn@latest add @aui/skeleton -y`
- [SearchBox](https://ui.arpitbhayani.me/r/searchbox.json): Machined search input with search icon and keyboard shortcut keycap. `npx shadcn@latest add @aui/searchbox -y`
- [Kbd](https://ui.arpitbhayani.me/r/kbd.json): Monospace keyboard shortcut keycap badge. `npx shadcn@latest add @aui/kbd -y`
- [Tooltip](https://ui.arpitbhayani.me/r/tooltip.json): Accessible tooltip hint on hover and focus. `npx shadcn@latest add @aui/tooltip -y`
- [Alert](https://ui.arpitbhayani.me/r/alert.json): Status-tinted inline alert callout (info, success, warning, destructive). `npx shadcn@latest add @aui/alert -y`
- [Tabs](https://ui.arpitbhayani.me/r/tabs.json): Underline tab navigation with keyboard accessibility. `npx shadcn@latest add @aui/tabs -y`
- [Accordion](https://ui.arpitbhayani.me/r/accordion.json): Collapsible hairline accordion sections for FAQs and structured content. `npx shadcn@latest add @aui/accordion -y`
- [Dropdown](https://ui.arpitbhayani.me/r/dropdown.json): Minimal click-trigger dropdown menu with click outside dismissal and actions. `npx shadcn@latest add @aui/dropdown -y`
- [Gutter](https://ui.arpitbhayani.me/r/gutter.json): Component-driven whitespace blank spacing primitive between UI elements (e.g. navbar and content). `npx shadcn@latest add @aui/gutter -y`
- [Progress](https://ui.arpitbhayani.me/r/progress.json): Machined linear progress bar with percentage indicator and status color variants. `npx shadcn@latest add @aui/progress -y`
- [SplitPane](https://ui.arpitbhayani.me/r/split-pane.json): Responsive two-column split layout with sticky aside, ratio presets, and mobile stacking. `npx shadcn@latest add @aui/split-pane -y`
- [Layout](https://ui.arpitbhayani.me/r/layout.json): Foundational layout primitives (Container, Stack, Row, Grid) without hand-written CSS. `npx shadcn@latest add @aui/layout -y`
- [Typography](https://ui.arpitbhayani.me/r/typography.json): Editorial typography primitives (Heading H1-H6, Lead paragraph) with signature Space Grotesk tracking. `npx shadcn@latest add @aui/typography -y`
- [StepNav](https://ui.arpitbhayani.me/r/step-nav.json): Guided walkthrough step navigation bar with previous/next actions, position badge, and keyboard shortcuts. `npx shadcn@latest add @aui/step-nav -y`
- [ThemeToggle](https://ui.arpitbhayani.me/r/theme-toggle.json): Tactile light and dark theme mode toggle button with Sun and Moon icons. `npx shadcn@latest add @aui/theme-toggle -y`
- [ThemeScript](https://ui.arpitbhayani.me/r/theme-script.json): Early theme bootstrapping script and Google Fonts loader to prevent flash of unstyled content (FOUC). `npx shadcn@latest add @aui/theme-script -y`

### Developer & Telemetry Primitives
- [Terminal](https://ui.arpitbhayani.me/r/terminal.json): Machined telemetry terminal with bash command dots and styled outputs. `npx shadcn@latest add @aui/terminal -y`
- [DiffBlock](https://ui.arpitbhayani.me/r/diff-block.json): Git patch viewer with line gutters, additions, and deletions. `npx shadcn@latest add @aui/diff-block -y`
- [PingStatus](https://ui.arpitbhayani.me/r/ping-status.json): Live telemetry pulsing dot indicator with status and latency. `npx shadcn@latest add @aui/ping-status -y`
- [PropertyGrid](https://ui.arpitbhayani.me/r/property-grid.json): Key-value metadata inspector with one-click copy functionality. `npx shadcn@latest add @aui/property-grid -y`
- [PackageManager](https://ui.arpitbhayani.me/r/package-manager.json): pnpm/npm/bun/yarn command switcher with copy button. `npx shadcn@latest add @aui/package-manager -y`
- [FileTree](https://ui.arpitbhayani.me/r/file-tree.json): Directory explorer tree with collapsible folders and item selection. `npx shadcn@latest add @aui/file-tree -y`

### Editorial & Content Primitives
- [Maxim](https://ui.arpitbhayani.me/r/maxim.json): Editorial quote callout with amber left rail and citation. `npx shadcn@latest add @aui/maxim -y`
- [TakeawaysBox](https://ui.arpitbhayani.me/r/takeaways-box.json): Key takeaways container with bulleted highlights. `npx shadcn@latest add @aui/takeaways-box -y`
- [Hero](https://ui.arpitbhayani.me/r/hero.json): Editorial profile hero section with avatar, heading, and bio. `npx shadcn@latest add @aui/hero -y`
- [SocialPill](https://ui.arpitbhayani.me/r/social-pill.json): Clean pill button with platform icon, handle, and follower count. `npx shadcn@latest add @aui/social-pill -y`
- [CourseCard](https://ui.arpitbhayani.me/r/course-card.json): Editorial course and project card with badges, tags, and CTA. `npx shadcn@latest add @aui/course-card -y`
- [StatCard](https://ui.arpitbhayani.me/r/stat-card.json): Large key metric display card with optional trend indicator. `npx shadcn@latest add @aui/stat-card -y`
- [EmptyState](https://ui.arpitbhayani.me/r/empty-state.json): Dashed container for empty content and call-to-actions. `npx shadcn@latest add @aui/empty-state -y`
- [Footer](https://ui.arpitbhayani.me/r/footer.json): Editorial 4-column directory footer with category hints, highlights, disclaimer, and social pills. `npx shadcn@latest add @aui/footer -y`
- [Modal](https://ui.arpitbhayani.me/r/modal.json): Accessible dialog modal with backdrop blur, focus handling, and escape key dismissal. `npx shadcn@latest add @aui/modal -y`
- [VideoEmbed](https://ui.arpitbhayani.me/r/video-embed.json): Responsive 16:9 aspect ratio video embed wrapper with border hairline styling. `npx shadcn@latest add @aui/video-embed -y`

### Technical Documentation Primitives
- [Canvas](https://ui.arpitbhayani.me/r/canvas.json): Engineering diagram frame with dotted coordinate grid and hairline border. `npx shadcn@latest add @aui/canvas -y`
- [ApiEndpoint](https://ui.arpitbhayani.me/r/api-endpoint.json): Machined HTTP/gRPC API specification block with method pill, copyable paths, parameters, and response tabs. `npx shadcn@latest add @aui/api-endpoint -y`
- [DocStepper](https://ui.arpitbhayani.me/r/doc-stepper.json): Connected numbered step walkthrough for tutorials, runbooks, and installation guides. `npx shadcn@latest add @aui/doc-stepper -y`
- [ParamTable](https://ui.arpitbhayani.me/r/param-table.json): Dense configuration options and parameter reference table with types, required badges, and defaults. `npx shadcn@latest add @aui/param-table -y`
- [FeatureMatrix](https://ui.arpitbhayani.me/r/feature-matrix.json): Dense matrix comparison table comparing engines, editions, or versions with status indicators. `npx shadcn@latest add @aui/feature-matrix -y`
- [VersionSelector](https://ui.arpitbhayani.me/r/version-selector.json): Compact documentation version switcher and runtime environment selector. `npx shadcn@latest add @aui/version-selector -y`

### Interactive Explorables & Systems Visualizers
- [MemoryLayout](https://ui.arpitbhayani.me/r/memory-layout.json): Contiguous byte/memory layout visualizer with offsets, binary structs, and interactive field inspector. `npx shadcn@latest add @aui/memory-layout -y`
- [PipelineFlow](https://ui.arpitbhayani.me/r/pipeline-flow.json): Multi-stage data pipeline flow visualizer with throughput metrics and animated pulse lines. `npx shadcn@latest add @aui/pipeline-flow -y`
- [BenchmarkDelta](https://ui.arpitbhayani.me/r/benchmark-delta.json): Comparative system performance delta block showing baseline vs candidate metrics. `npx shadcn@latest add @aui/benchmark-delta -y`
- [LatencyDistribution](https://ui.arpitbhayani.me/r/latency-distribution.json): Percentile latency distribution bar (p50, p75, p90, p99, p99.9) with color thresholds and SLA lines. `npx shadcn@latest add @aui/latency-distribution -y`
- [ClusterState](https://ui.arpitbhayani.me/r/cluster-state.json): Distributed consensus cluster topology visualizer (Leader, Followers, Candidates, Quorum status). `npx shadcn@latest add @aui/cluster-state -y`
- [ParamSandbox](https://ui.arpitbhayani.me/r/param-sandbox.json): Interactive slider sandbox for mathematical formulas and live reactive system calculations. `npx shadcn@latest add @aui/param-sandbox -y`
- [ArchitectureCanvas](https://ui.arpitbhayani.me/r/architecture-canvas.json): Interactive system architecture and flow canvas with animated packet pulses, directional connections, and node inspector. `npx shadcn@latest add @aui/architecture-canvas -y`
- [ReactFlowCanvas](https://ui.arpitbhayani.me/r/reactflow-canvas.json): Interactive infinite-canvas node diagram powered by React Flow with Array UI tokens, handles, and styling. `npx shadcn@latest add @aui/reactflow-canvas -y`
- [SequenceDiagram](https://ui.arpitbhayani.me/r/sequence-diagram.json): Interactive sequence protocol walkthrough with step scrubber playback, lifelines, and callout notes. `npx shadcn@latest add @aui/sequence-diagram -y`
- [StateMachine](https://ui.arpitbhayani.me/r/state-machine.json): Finite state machine diagram with interactive transition triggers, active state highlighting, and audit history. `npx shadcn@latest add @aui/state-machine -y`
- [ConceptWalkthrough](https://ui.arpitbhayani.me/r/concept-walkthrough.json): Split-pane storyboard explainer with synchronized visual stage, narrative milestones, and keyboard navigation. `npx shadcn@latest add @aui/concept-walkthrough -y`
- [TradeoffMatrix](https://ui.arpitbhayani.me/r/tradeoff-matrix.json): Architectural trade-off comparison matrix evaluating candidate technologies across weighted dimensions. `npx shadcn@latest add @aui/tradeoff-matrix -y`
- [AnalogyCard](https://ui.arpitbhayani.me/r/analogy-card.json): Dual-perspective mental model card bridging real-world analogies to underlying technical mechanisms. `npx shadcn@latest add @aui/analogy-card -y`

### SaaS & Control Plane Primitives
- [Combobox](https://ui.arpitbhayani.me/r/combobox.json): Searchable autocomplete select with keyboard navigation, empty states, and badge support. `npx shadcn@latest add @aui/combobox -y`
- [Drawer](https://ui.arpitbhayani.me/r/drawer.json): Slide-over panel for inspecting logs, resources, and configurations without losing page context. `npx shadcn@latest add @aui/drawer -y`
- [AlertDialog](https://ui.arpitbhayani.me/r/alert-dialog.json): Destructive action confirmation dialog with danger styling and optional string confirmation phrase. `npx shadcn@latest add @aui/alert-dialog -y`
- [SecretInput](https://ui.arpitbhayani.me/r/secret-input.json): Masked credential display input with reveal toggle and one-click copy feedback. `npx shadcn@latest add @aui/secret-input -y`
- [Sidebar](https://ui.arpitbhayani.me/r/sidebar.json): Application shell navigation sidebar with route icons, tenant header, profile footer, and collapse mode. `npx shadcn@latest add @aui/sidebar -y`
- [MultiSelect](https://ui.arpitbhayani.me/r/multi-select.json): Scoped multi-select tag picker with badge pills, search filter, and batch actions. `npx shadcn@latest add @aui/multi-select -y`
- [Slider](https://ui.arpitbhayani.me/r/slider.json): Continuous or stepped range slider with styled track, tactile thumb, and value readout. `npx shadcn@latest add @aui/slider -y`
- [Popover](https://ui.arpitbhayani.me/r/popover.json): Floating anchor-positioned overlay container with collision awareness for forms and filter cards. `npx shadcn@latest add @aui/popover -y`
- [Charts](https://ui.arpitbhayani.me/r/charts.json): Lightweight SVG-based telemetry charts (AreaChart, BarChart, Sparkline) with crosshair and hover tooltips. `npx shadcn@latest add @aui/charts -y`
- [DatePicker](https://ui.arpitbhayani.me/r/date-picker.json): Calendar date picker and date range picker with monospace display and quick range presets. `npx shadcn@latest add @aui/date-picker -y`
- [DataTable](https://ui.arpitbhayani.me/r/data-table.json): Dense SaaS data table with search filtering, multi-row selection, sorting, and pagination. `npx shadcn@latest add @aui/data-table -y`
- [SideNav](https://ui.arpitbhayani.me/r/side-nav.json): Left/right vertical navigation rail with brand logo, vertical tab menu, user profile card, and logout action. `npx shadcn@latest add @aui/side-nav -y`
- [TopNav](https://ui.arpitbhayani.me/r/top-nav.json): Top navigation header bar with brand logo, navigation links, dropdown menus, user profile trigger, and theme selector. `npx shadcn@latest add @aui/top-nav -y`

## Components by Use Case

Find components by the job you are doing. A component can appear under more than one use case.

### Code Review & Change Understanding
- `DiffBlock`: unified patch with line gutters and add/delete stats.
- `FileTree`: changed-file map with per-node badges.
- `CodeBlock`: syntax-highlighted source for context around a change.
- `Terminal`: command output, build logs, and failing test output.
- `PropertyGrid`: PR metadata (author, base, commit SHAs) with copy.
- `Badge`, `Alert`: risk labels and merge warnings.
- `Tabs`, `Accordion`: group files, hunks, and notes.
- `Timeline`: commit history and review activity.

### Explaining How a System Works
- `ArchitectureCanvas`: blast radius and data flow between services.
- `SequenceDiagram`: request and protocol call flows.
- `StateMachine`: states and transitions.
- `PipelineFlow`: multi-stage data paths with metrics.
- `ClusterState`: consensus and replication topology.
- `MemoryLayout`: byte-level struct and wire formats.
- `ConceptWalkthrough`, `StepScrubber`: guided, stepwise explainers.
- `AnalogyCard`: mental models for non-obvious mechanisms.
- `Canvas`: frame for any custom diagram.

### Testing, Assurance & Performance
- `BenchmarkDelta`: baseline vs candidate regressions.
- `LatencyDistribution`: percentile tails against an SLA.
- `AreaChart`, `BarChart`, `Sparkline`: metrics over time.
- `StatCard`, `Progress`: pass rate, coverage, and threshold readouts.
- `PingStatus`: health of checks and environments.
- `Terminal`: raw test and CI output.
- `DataTable`, `Table`: test and check results with sorting and filtering.

### Decisions & Trade-offs
- `TradeoffMatrix`: weighted comparison with a verdict.
- `FeatureMatrix`: capability comparison across options or versions.
- `ParamSandbox`: tune inputs and see computed outcomes.
- `TakeawaysBox`, `Maxim`: conclusions and principles.

### Technical Documentation & Reference
- `ApiEndpoint`: HTTP/gRPC specs with parameters and responses.
- `ParamTable`: configuration and flag references.
- `DocStepper`: runbooks and tutorials.
- `PackageManager`: install commands.
- `VersionSelector`: version and environment switching.
- `CodeBlock`, `Terminal`: code and shell samples.
- `TableOfContents`, `Breadcrumbs`, `Sidebar`: navigation.
- `Accordion`, `Tabs`: FAQs and grouped content.

### Operations & Control Plane
- `Sidebar`, `Navbar`: application shell.
- `DataTable`: resource lists with selection and bulk actions.
- `Drawer`: inspect logs and config in place.
- `AlertDialog`: confirm destructive actions.
- `SecretInput`: credentials with reveal and copy.
- `ClusterState`, `PingStatus`: live system health.
- `Timeline`: incident and deploy history.
- `Charts`: telemetry dashboards.
- `Toast`, `Alert`: feedback and incident banners.

### Forms & Filtering
- `Input`, `Textarea`, `Select`, `Checkbox`, `Switch`, `SearchBox`
- `Combobox`, `MultiSelect`, `Slider`, `SegmentedControl`
- `DatePicker`, `DateRangePicker`
- `Popover`, `Dropdown`, `CommandPalette`

### Editorial, Marketing & Content
- `Hero`, `SocialPill`, `CourseCard`, `CoverCard`, `Newsletter`
- `Maxim`, `TakeawaysBox`, `NoticeBox`
- `VideoEmbed`, `Footer`, `EmptyState`

### Layout & Primitives
- `Button`, `Card`, `Badge`, `Kbd`, `Tooltip`, `Avatar`, `Divider`, `Gutter`
- `Modal`, `Spinner`, `Skeleton`, `Pagination`

## Full Library Native Components (React & Astro)

In addition to shadcn copy-paste components, the official package dependency (`array-ui`) includes 72+ native components for React (`array-ui/nextjs`, `array-ui/react`) and Astro (`array-ui/astro/*`):
- **Inputs & Forms**: Button, Input, Select, Textarea, Switch, Checkbox, SearchBox, SegmentedControl, VersionSelector, Combobox, SecretInput, MultiSelect, Slider
- **Navigation**: Breadcrumbs, Tabs, Pagination, Accordion, TableOfContents, Sidebar, Navbar
- **Feedback & Loading**: Alert, AlertDialog, Toast, Progress, Spinner, Skeleton, EmptyState, Modal, Drawer, Tooltip, Popover
- **Data Display & Tables**: Table, DataTable, Timeline, StatCard, DiffBlock, Terminal, PropertyGrid, FileTree, Avatar, AvatarGroup, Badge, Kbd, Divider, Gutter, DatePicker, DateRangePicker
- **Telemetry & Charts**: AreaChart, BarChart, Sparkline, LatencyDistribution, BenchmarkDelta
- **Technical Documentation**: ApiEndpoint, DocStepper, ParamTable, FeatureMatrix, Canvas
- **Interactive Explorables**: MemoryLayout, PipelineFlow, StepScrubber, ClusterState, ParamSandbox
- **Editorial & Media**: Hero, Maxim, TakeawaysBox, NoticeBox, Newsletter, Card, CoverCard, CourseCard, SocialPill, Footer, VideoEmbed


## Optional Links

- [Official Array UI Documentation & Component Catalog](https://ui.arpitbhayani.me): Interactive component catalog, specimens, and live controls.
- [GitHub Repository](https://github.com/arpitbbhayani/aui): Source code, tokens, React and Astro packages.