# Components

> 131 live components and 15 showcase pages from Crew OS and Max, each with a live preview, guidelines, its API and example code.

`window.DigitalCrew` carries both products' libraries, bundled from their source at the repositories' pinned versions and running on React 19.2.3 (shipped in `components/lib/`). They read the semantic tokens, so each renders in ink under the Crew OS themes and in orange under the Max themes.

- **Primitives (Max's library)**: [Button](/design/components/button.md), [Badge](/design/components/badge.md), [Input](/design/components/input.md), [Textarea](/design/components/textarea.md), [Label](/design/components/label.md), [Checkbox](/design/components/checkbox.md), [RadioGroup](/design/components/radio-group.md), [Switch](/design/components/switch.md), [Select](/design/components/select.md), [SecretInput](/design/components/secret-input.md), [DateTimePicker](/design/components/date-time-picker.md), [Calendar](/design/components/calendar.md), [PhoneInput](/design/components/phone-input.md), [TypedOptionPicker](/design/components/typed-option-picker.md), [TimezoneSelector](/design/components/timezone-selector.md), [Dialog](/design/components/dialog.md), [AlertDialog](/design/components/alert-dialog.md), [ConfirmDialogProvider](/design/components/confirm-dialog-provider.md), [DiscardChangesDialog](/design/components/discard-changes-dialog.md), [Sheet](/design/components/sheet.md), [Popover](/design/components/popover.md), [DropdownMenu](/design/components/dropdown-menu.md), [Tooltip](/design/components/tooltip.md), [HelpTooltip](/design/components/help-tooltip.md), [Command](/design/components/command.md), [Tabs](/design/components/tabs.md), [Pagination](/design/components/pagination.md), [Sidebar](/design/components/sidebar.md), [Card](/design/components/card.md), [Separator](/design/components/separator.md), [Accordion](/design/components/accordion.md), [Collapsible](/design/components/collapsible.md), [ScrollArea](/design/components/scroll-area.md), [Table](/design/components/table.md), [PanelSplitter](/design/components/panel-splitter.md), [Skeleton](/design/components/skeleton.md), [Progress](/design/components/progress.md), [Toaster](/design/components/toaster.md), [Avatar](/design/components/avatar.md).
- **Primitives only Crew OS has**: [Alert](/design/components/alert.md), [Breadcrumb](/design/components/breadcrumb.md), [ChartContainer](/design/components/chart-container.md) (recharts 2 via `Recharts`), [Drawer](/design/components/drawer.md), [Form](/design/components/form.md) (`useForm`), [Slider](/design/components/slider.md), [Toggle](/design/components/toggle.md), [ToggleGroup](/design/components/toggle-group.md), [GlassButton](/design/components/glass-button.md).
- **App shell**: [Main](/design/components/main.md), [Header](/design/components/header.md), [ContentSection](/design/components/content-section.md), [ThemeSwitcher](/design/components/theme-switcher.md), [ListMapToggle](/design/components/list-map-toggle.md), [Snippet](/design/components/snippet.md), the data-table kit ([DataTableToolbar](/design/components/data-table-toolbar.md), DataTableColumnHeader, DataTablePagination, DataTableBulkActions, `useDataTable`).
- **Agents**: [AgentFace](/design/components/agent-face.md), AgentPortrait, [AgentAvatar](/design/components/agent-avatar.md), [AgentSkillTag](/design/components/agent-skill-tag.md), [BrandBadge](/design/components/brand-badge.md), [EquipmentBadge](/design/components/equipment-badge.md), [ThinkingBox](/design/components/thinking-box.md), [AskMaxAction](/design/components/ask-max-action.md), [ToolStatusIndicator](/design/components/tool-status-indicator.md), [OAuthRequestCard](/design/components/oauth-request-card.md), plus the [**CrewAgents**](/design/components/crew-agents.md), [**MaxRoster**](/design/components/max-roster.md), [**AgentAccents**](/design/components/agent-accents.md) and [**MaxChat**](/design/components/max-chat.md) pages.
- **AI text**: [Markdown](/design/components/markdown.md), [ResponseStream](/design/components/response-stream.md), [Reasoning](/design/components/reasoning.md), and the [ShimmerText](/design/components/shimmer-text.md) / [StreamingText](/design/components/streaming-text.md) motion cards.
- **Unibox**: [UniboxIdlePanel](/design/components/unibox-idle-panel.md), [ChatListItem](/design/components/chat-list-item.md), [MessageBubble](/design/components/message-bubble.md), [MessageComposer](/design/components/message-composer.md), [ChannelSegments](/design/components/channel-segments.md), [ReplySuggestions](/design/components/reply-suggestions.md), [SyncProgressPanel](/design/components/sync-progress-panel.md), [ChannelBadge](/design/components/channel-badge.md), [ProspectAvatar](/design/components/prospect-avatar.md).
- **Analytics and pipeline**: [KpiCard](/design/components/kpi-card.md), [HeroMetric](/design/components/hero-metric.md), [MetricTile](/design/components/metric-tile.md), [BrandStatCard](/design/components/brand-stat-card.md), [ActivityChart](/design/components/activity-chart.md), [FunnelChart](/design/components/funnel-chart.md), [InsightsCard](/design/components/insights-card.md), [QualificationContent](/design/components/qualification-content.md), [AnimateDigits](/design/components/animate-digits.md), [AnimatedCircularProgressBar](/design/components/animated-circular-progress-bar.md), [DealCard](/design/components/deal-card.md), [DealColumn](/design/components/deal-column.md), [MovableCardGrid](/design/components/movable-card-grid.md), [SalesWorkspaceMap](/design/components/sales-workspace-map.md), [WorldGlobe](/design/components/world-globe.md), [TimeLens](/design/components/time-lens.md), [CampaignStatusBadge](/design/components/campaign-status-badge.md), [EmailVerificationBadge](/design/components/email-verification-badge.md), and the [**StageColors**](/design/components/stage-colors.md) and [**StatusColors**](/design/components/status-colors.md) pages.
- **Motion and effects**: [MotionScale](/design/components/motion-scale.md), [ShimmerText](/design/components/shimmer-text.md), [StreamingText](/design/components/streaming-text.md), [SkeletonReveal](/design/components/skeleton-reveal.md), [CardResize](/design/components/card-resize.md), [SignatureGradient](/design/components/signature-gradient.md), [UniboxMotion](/design/components/unibox-motion.md), [JoyfulTaskCheckbox](/design/components/joyful-task-checkbox.md), [ActionFocusSession](/design/components/action-focus-session.md), [ChapterScrubber](/design/components/chapter-scrubber.md), [FlickeringGrid](/design/components/flickering-grid.md), [GlowingEffect](/design/components/glowing-effect.md), [Marquee](/design/components/marquee.md), [CpuArchitecture](/design/components/cpu-architecture.md), [CosmicSynapseCanvas](/design/components/cosmic-synapse-canvas.md), [ContainerScroll](/design/components/container-scroll.md), [InfiniteSlider](/design/components/infinite-slider.md), [ProgressiveBlur](/design/components/progressive-blur.md), [OrbitingCircles](/design/components/orbiting-circles.md), [PixelCard](/design/components/pixel-card.md), [HyperText](/design/components/hyper-text.md), [Glitchy404](/design/components/glitchy-404.md), [FeatureSlideshow](/design/components/feature-slideshow.md), [Globe](/design/components/globe.md), [FirstBentoAnimation](/design/components/first-bento-animation.md), [SecondBentoAnimation](/design/components/second-bento-animation.md), [ThirdBentoAnimation](/design/components/third-bento-animation.md), [FourthBentoAnimation](/design/components/fourth-bento-animation.md), [NumberFlowCounter](/design/components/number-flow-counter.md), [Lottie](/design/components/lottie.md), [BackgroundEffect](/design/components/background-effect.md), [SplashCursor](/design/components/splash-cursor.md).
- **Appearance**: AppearanceProvider, [AppearanceControls](/design/components/appearance-controls.md), SettingsSection, [BackgroundEffect](/design/components/background-effect.md) — personal density, button finish, motion and background, saved per user and product.
- **Marketing sections (Crew OS public site)**: [SectionHeader](/design/components/section-header.md), [SocialProofTestimonials](/design/components/social-proof-testimonials.md), [FeaturesGridWithGlowingEffect](/design/components/features-grid-with-glowing-effect.md), [BentoSection](/design/components/bento-section.md), [FAQSection](/design/components/faq-section.md), [CTASection](/design/components/cta-section.md), [SectionSolutions](/design/components/section-solutions.md), [CpuSuperposition](/design/components/cpu-superposition.md), [CrewNetwork](/design/components/crew-network.md), [FeatureSection](/design/components/feature-section.md), [ConnectSection](/design/components/connect-section.md) — with the site's real English copy.

Wrap an app once in `TooltipProvider` and [`ConfirmDialogProvider`](/design/components/confirm-dialog-provider.md), and mount one [`Toaster`](/design/components/toaster.md). Confirm destructive actions through `useConfirm()`, never `window.confirm`. Components that read next-themes (Globe, FeatureSection, WorldGlobe, Toaster) follow the app's `ThemeProvider`; outside the apps, wrap them in `PageThemeProvider`, which follows the page's `data-theme`.

**Where the two apps' copies differ** (the bundle carries Max's): Crew OS's Dialog is 400px wide with a `radius-xl` panel, a darker 80% overlay and z-index 101 (menus 102); its Badge is `rounded-md`; its Tooltip is `primary` on `primary-foreground`; its Select opens as a popper below the trigger; its Switch is 44 × 24px; its Sidebar is the stock two-state shadcn one; its GlowingEffect uses the brand accents (magenta, gold, forest, ocean) where Max's is orange (the bundle carries Crew OS's). The shared `@digitalcrew/ui` Button, Input and Textarea draw the focus halo at full `ring` strength (Max: 50%) and support the Glass finish.

## Foundations

- [AgentAccents](/design/components/agent-accents.md) (showcase page): Each Max agent owns one of 16 Tailwind hues, used as its initials tile, card hover ring, bar and dot.
- [StatusColors](/design/components/status-colors.md) (showcase page): How Max colours state: one tinted-pill template, a mapping per domain, and 17 pipeline stage colours.

## Actions

- [Badge](/design/components/badge.md): A small pill label: count, channel, state or tag (Max's `components/ui/badge.tsx`).
- [Button](/design/components/button.md): The action control for both products: filled with `primary` by default, in six variants and six sizes (Max's `components/ui/button.tsx`).
- [GlassButton](/design/components/glass-button.md): The Crew OS button with a frosted-glass finish: the same variants, sizes and `asChild` as `Button`, plus a backdrop blur and a soft highlight layer.
- [Toggle](/design/components/toggle.md): A two-state button (Radix toggle) that stays pressed until clicked again.
- [ToggleGroup](/design/components/toggle-group.md): A segmented set of toggles (Radix toggle group) where one or several options are on at a time.

## Forms

- [Calendar](/design/components/calendar.md): A month grid (react-day-picker 10) in the app's tokens: today and the selection in `primary`, outside days muted.
- [Checkbox](/design/components/checkbox.md): A 16px square check for independent on/off choices and row selection; the box fills in 150ms, then the tick draws in over 350ms (`.t-check`).
- [DateTimePicker](/design/components/date-time-picker.md): A date-and-time field in the app's own widget, instead of the browser's `datetime-local`; works in ISO strings.
- [Form](/design/components/form.md): Form fields wired to react-hook-form: each field gets a label, a control, an optional hint and an error message, with ids and ARIA linked for you.
- [Input](/design/components/input.md): The single-line text field: 36px tall, `input` border, `radius-md`, transparent over its ground (dark themes fill it with `input` at 30%).
- [Label](/design/components/label.md): The accessible field label (Radix Label): 14px medium, `leading-none`, 8px gap for an inline icon or `HelpTooltip`.
- [PhoneInput](/design/components/phone-input.md): An international phone field: `react-phone-number-input` with Max's `Input` and a searchable country picker that shows flags.
- [RadioGroup](/design/components/radio-group.md): One choice from a short, visible list (Radix RadioGroup): 16px rings in `primary`, 10px dot.
- [SecretInput](/design/components/secret-input.md): A field for API keys and tokens: masked by default with a reveal toggle, monospace, opted out of autofill.
- [Select](/design/components/select.md): A native-feeling single choice from a list (Radix Select): 36px trigger (`size="sm"`: 32px) with a chevron; the list opens in 250ms from 97% (`.t-dropdown`).
- [Slider](/design/components/slider.md): A Radix slider for picking a number, or a range with two thumbs, on a continuous scale.
- [Switch](/design/components/switch.md): The on/off control for settings that apply immediately (Radix Switch): a 32 × 18px pill, `input` track off, `primary` on, 16px thumb with a double-bounce (`.t-toggle`, 350ms thumb, 150ms track).
- [Textarea](/design/components/textarea.md): The multi-line field; it grows with its content (`field-sizing: content`) from a 64px minimum.
- [TimezoneSelector](/design/components/timezone-selector.md): A searchable combobox (a `Popover` holding a `Command` list) over every IANA time zone the browser knows.
- [TypedOptionPicker](/design/components/typed-option-picker.md): A searchable, grouped picker for long option lists (Popover + Command), in single and multi versions.

## Overlays

- [AlertDialog](/design/components/alert-dialog.md): A blocking confirmation for irreversible or costly actions; same motion and surface as **Dialog**, no close ×, no click-outside dismissal.
- [Command](/design/components/command.md): A keyboard-first search-and-act list (cmdk); the ⌘K menu and the core of every searchable picker.
- [ConfirmDialogProvider](/design/components/confirm-dialog-provider.md): App-wide confirmations through one hook: wrap the app in `ConfirmDialogProvider`, then call `useConfirm().confirm({...})` anywhere.
- [Dialog](/design/components/dialog.md): A modal for focused tasks that need an answer before going on; opens in 250ms from 96% scale and closes in 150ms (`.t-modal`).
- [DiscardChangesDialog](/design/components/discard-changes-dialog.md): An alert dialog that asks the user to confirm throwing away unsaved edits.
- [Drawer](/design/components/drawer.md): A panel that slides in from the bottom edge (or any edge), built on vaul, with a drag handle and swipe-to-dismiss.
- [DropdownMenu](/design/components/dropdown-menu.md): A menu of actions for one object, opening from a button; 250ms in from 97%, 150ms out to 99%.
- [Popover](/design/components/popover.md): A light panel anchored to its trigger; opens in 250ms from 97% scale (`.t-dropdown`).
- [Sheet](/design/components/sheet.md): A panel that slides in from an edge; opens in 400ms and closes in 350ms on the smooth-out ease (`--panel-*`).
- [Tooltip](/design/components/tooltip.md): A short ink label on hover or focus: `foreground` fill with `background` text, 12px, 150ms in after an 80ms delay, 50ms out (`.t-tt`).

## Navigation

- [Breadcrumb](/design/components/breadcrumb.md): A page trail that shows where the current page sits in the hierarchy, built from composable parts inside a `<nav aria-label="breadcrumb">`.
- [Header](/design/components/header.md): The app's top bar: a sidebar toggle and a divider, followed by whatever you pass in.
- [ListMapToggle](/design/components/list-map-toggle.md): A two-button segmented switch between a List view and a Map view.
- [Pagination](/design/components/pagination.md): Numbered page links with previous/next and an ellipsis.
- [Sidebar](/design/components/sidebar.md): The app shell: a collapsible left sidebar beside an inset content panel (`SidebarProvider` › `Sidebar` + `SidebarInset`).
- [Tabs](/design/components/tabs.md): A segmented list that switches panels in place: a 36px `muted` track with 3px padding; the active tab lifts onto `background`.
- [ThemeSwitcher](/design/components/theme-switcher.md): A round icon button with a Light, Dark and System menu that sets the next-themes theme.

## Layout

- [Accordion](/design/components/accordion.md): Stacked sections that expand one at a time (or several); height animates in 250ms on the smooth-out ease (`--acc-*`).
- [Card](/design/components/card.md): The raised surface for grouped content: `card` fill, `border`, `radius-xl` (14px), `shadow-sm`, 24px padding and gap.
- [Collapsible](/design/components/collapsible.md): Shows and hides one region under its trigger (Radix Collapsible); animates with the accordion tokens.
- [ContentSection](/design/components/content-section.md): The settings-page section: a title, a one-line description, a separator, then a scrolling body.
- [DataTableToolbar](/design/components/data-table-toolbar.md): The toolbar of Max's data-table kit (search, faceted filters, Reset and the View columns menu) and how the kit's pieces fit around a `Table`.
- [Main](/design/components/main.md): The page body of Max's app shell: a `<main>` with the standard page padding and, by default, a centred 7xl width.
- [PanelSplitter](/design/components/panel-splitter.md): The draggable seam between two side-by-side panels; every split view in Max uses it, so one gesture works everywhere.
- [ScrollArea](/design/components/scroll-area.md): A scroll container with thin themed scrollbars (10px track, `border`-coloured thumb) that appear on hover.
- [Separator](/design/components/separator.md): A 1px `border` hairline, horizontal or vertical (Radix Separator, decorative by default).
- [Table](/design/components/table.md): The data table primitive: 14px rows with `border` dividers, 40px header cells in medium weight, `muted` at 50% on hover and selection.

## Feedback

- [Alert](/design/components/alert.md): An inline, non-dismissable notice (`role="alert"`) with an optional icon, a one-line title and a description.
- [AnimatedCircularProgressBar](/design/components/animated-circular-progress-bar.md): A circular gauge for a value against a quota, with the number in the middle.
- [HelpTooltip](/design/components/help-tooltip.md): A 16px `HelpCircle` in `muted-foreground` that shows an explanation on hover or focus.
- [Progress](/design/components/progress.md): A determinate bar: `primary` fill on `primary` at 20%, 8px tall, `r-full`.
- [Skeleton](/design/components/skeleton.md): A placeholder block that pulses (`t-skel-pulse`, 1s) in `accent` while content loads.
- [Toaster](/design/components/toaster.md): Toast notifications (Sonner) on the `popover` surface with a `border` and `radius-lg`; mount one `Toaster` at the root and call `toast()` from anywhere.

## Data display

- [AgentFace](/design/components/agent-face.md): A Digital Worker's face: its approved portrait, or its initials on its accent tile.
- [AnimateDigits](/design/components/animate-digits.md): A number whose digits spring in and out as it changes (motion), direction following the change.
- [Avatar](/design/components/avatar.md): A round image with an initials fallback (Radix Avatar), 32px by default.
- [CampaignStatusBadge](/design/components/campaign-status-badge.md): The campaign lifecycle pill: Draft, Active, Paused, Stopped, Completed, Archived.
- [ChannelBadge](/design/components/channel-badge.md): Marks which channel a conversation or step runs on: email (amber), LinkedIn (sky), WhatsApp (emerald).
- [EmailVerificationBadge](/design/components/email-verification-badge.md): The deliverability verdict for an email address, with an icon and an optional score.
- [HeroMetric](/design/components/hero-metric.md): One big number with its previous-period comparison, a trend pill and a pacing bar.
- [KpiCard](/design/components/kpi-card.md): A KPI tile — label, value, trend — and `KpiSection`, the glass panel that groups them.
- [MaxIconSet](/design/components/max-icon-set.md) (showcase page): Max's own SVG icons, exported as `DC.MaxIcons`: integration and channel logos, message delivery states, and the appearance-picker tiles.
- [MetricTile](/design/components/metric-tile.md): A compact glass tile for a scored metric: label, value toned by score band, hint.
- [ProspectAvatar](/design/components/prospect-avatar.md): A prospect's photo, or a gradient disc hashed from their name, with an optional unread halo.
- [Snippet](/design/components/snippet.md): A monospace command block with a copy button whose icon turns into a check after copying.
- [TimeLens](/design/components/time-lens.md): Max's agenda: hour marks, ticks and tasks in one scrolling column, read through a fixed lens that shows the time under it.
- [WorldGlobe](/design/components/world-globe.md): An interactive d3-geo globe on canvas with avatar markers that merge into heat-coloured count bubbles.

## Agents

- [AgentAvatar](/design/components/agent-avatar.md): A Digital Worker's face as a muted, looping video in a rounded square, framed and glowing in the agent's brand colour, with an optional live dot.
- [AgentSkillTag](/design/components/agent-skill-tag.md): A tiny chip naming one of a Digital Worker's skills, tinted with that worker's colour.
- [AskMaxAction](/design/components/ask-max-action.md): A contextual "Ask Max" button.
- [CrewAgents](/design/components/crew-agents.md) (showcase page): The Digital Crew's eight agents, each one colour broken out of the ink: the palette ramp, the gradient, the role and the skills the public site gives them.
- [EquipmentBadge](/design/components/equipment-badge.md): A small chip showing one piece of a Digital Worker's desk equipment as an emoji, with or without its label.
- [MaxRoster](/design/components/max-roster.md) (showcase page): Max's 24 Digital Workers in their seven teams, each with its face (**AgentFace**) and accent dot.
- [OAuthRequestCard](/design/components/oauth-request-card.md): A "Connect HubSpot" or "Connect Notion" card that an agent drops into the chat.
- [ThinkingBox](/design/components/thinking-box.md): Max's thinking box: the running account of what he thought, which tools he called, what he sent and what came back.
- [ToolStatusIndicator](/design/components/tool-status-indicator.md): Compact dot, label and state rows that report tool activity in the onboarding and meetings chats.

## Agent surfaces

- [MaxChat](/design/components/max-chat.md) (showcase page): A static rendition of `.maxchat`, the surface every Max agent speaks through: the Max chat, the Ask Max panel, the meetings assistant and the onboarding chat.

## AI

- [Markdown](/design/components/markdown.md): Renders a markdown string (GitHub-flavoured: tables, task lists, strikethrough) and stays cheap while an AI reply streams in.
- [Reasoning](/design/components/reasoning.md): A collapsible block that shows how an agent reached its answer, with the reasoning streamed in as markdown.
- [ResponseStream](/design/components/response-stream.md): Reveals text progressively, either typed out character by character or faded in word by word, from a string or an async stream of chunks.

## Unibox

- [ChannelSegments](/design/components/channel-segments.md): The Unibox channel filter: a rail of icons where one shared pill glides to the selected channel, and only that segment spells out its name.
- [ChatListItem](/design/components/chat-list-item.md): One conversation in the Unibox list: a motion row that staggers in, glides when a new reply reorders the inbox, and pops its unread badge.
- [MessageBubble](/design/components/message-bubble.md): One message in a Unibox thread: your side in the brand gradient, theirs in muted glass, each rising in from its own side of the conversation.
- [MessageComposer](/design/components/message-composer.md): The Unibox reply box: text, emoji and staged images in one rounded field, with a send button that springs awake when there is something to send.
- [ReplySuggestions](/design/components/reply-suggestions.md): The band between a Unibox thread and its composer: ask for a few replies, watch them arrive, pick one.
- [SyncProgressPanel](/design/components/sync-progress-panel.md): The dialog behind the Unibox sync button.
- [UniboxIdlePanel](/design/components/unibox-idle-panel.md): The Unibox's empty conversation pane: a breathing glass orb with the three channels in slow orbit and a quiet "Listening for new replies" line.

## Analytics

- [ActivityChart](/design/components/activity-chart.md): A day-bucketed Recharts chart in Max's glass panel: each series is drawn as an area, a line or a bar, with a dot legend and a popover tooltip.
- [ChartContainer](/design/components/chart-container.md): The shell every Crew OS chart sits in: it wraps a Recharts 2 chart in a `ResponsiveContainer`, turns a config object into per-series colour variables and styles axes, grid, tooltip and legend with the theme tokens.
- [FunnelChart](/design/components/funnel-chart.md): A vertical column funnel with a summary panel.
- [InsightsCard](/design/components/insights-card.md): A meeting's numbers (sentiment, stat tiles, per-speaker talk share, an over-talk hint), all derived on the client from the transcript.
- [QualificationContent](/design/components/qualification-content.md): The body of a BANT qualification snapshot: a score, a verdict, a confirmed count, and one tile per criterion with its status, rationale and first piece of transcript evidence.

## Pipeline

- [DealCard](/design/components/deal-card.md): One draggable deal on the deals board, plus `DealCardPreview`, the tilted copy shown under the cursor while dragging.
- [DealColumn](/design/components/deal-column.md): One column of the deals board: a droppable, infinitely scrolling list of `DealCard`s under a header with the stage dot, a count badge and money totals.
- [MovableCardGrid](/design/components/movable-card-grid.md): A card grid the reader can rearrange.
- [SalesWorkspaceMap](/design/components/sales-workspace-map.md): A read-only React Flow map of how a workspace's lists, signals, campaigns, rules and pipelines connect.
- [StageColors](/design/components/stage-colors.md) (showcase page): The 17-colour palette for pipeline and deal stage accents, with helpers that return static Tailwind classes and a hex value for each colour.

## Motion

- [ActionFocusSession](/design/components/action-focus-session.md): The focus timebox for one task in the actions cockpit: a live billable clock with approve, start, pause, run and done, and a burst of sparkles on completion.
- [CardResize](/design/components/card-resize.md) (showcase page): A container that tweens its width and height when its content changes (`.t-resize`).
- [ChapterScrubber](/design/components/chapter-scrubber.md): A rail of ticks, one per chapter, that swell like a dock under the pointer, with a card previewing the hovered chapter.
- [ContainerScroll](/design/components/container-scroll.md): A hero block where a device-like frame starts tilted back in 3D and straightens as the page scrolls, with the title drifting up.
- [FeatureSlideshow](/design/components/feature-slideshow.md): A step-by-step feature explainer: an accordion of steps on the left that advances on a timer, a progress line on the open step, and a large media slot on the right.
- [FirstBentoAnimation](/design/components/first-bento-animation.md): A self-playing chat vignette for the bento grid: a user asks for a meeting slot, the Digital Crew avatar shows typing dots, then the reply streams in as a `Reasoning` block.
- [FourthBentoAnimation](/design/components/fourth-bento-animation.md): A scheduling vignette for the bento grid: a week ruler, three task bars that spring into place, and a time cursor that follows the pointer.
- [HyperText](/design/components/hyper-text.md): A monospaced, uppercase text effect: letters scramble through random characters, then lock in from left to right.
- [InfiniteSlider](/design/components/infinite-slider.md): A JavaScript-driven endless strip (Framer Motion) that renders its children twice and slides them in a loop, optionally slowing on hover.
- [JoyfulTaskCheckbox](/design/components/joyful-task-checkbox.md): A task checkbox with a small, restrained completion moment: one soft bloom, two sparks, then stillness.
- [Lottie](/design/components/lottie.md): The lottie-react player, exported as-is, for the Lottie animations that ship with Crew OS (`animations/*.json`).
- [Marquee](/design/components/marquee.md): An endless CSS scroll of repeated content, horizontal or vertical, speed set with two CSS variables.
- [MotionScale](/design/components/motion-scale.md) (showcase page): The shared motion scale made visible: the same distance travelled on each duration token and each easing, with a Replay button.
- [NumberFlowCounter](/design/components/number-flow-counter.md): A small dark pill that shows one number at a time and rolls its digits to the next value every two seconds (NumberFlow).
- [OrbitingCircles](/design/components/orbiting-circles.md): Places its children on a circular orbit around the centre of the parent and spins them, with an optional faint ring for the path.
- [ShimmerText](/design/components/shimmer-text.md) (showcase page): A status line with a light band sweeping across its glyphs — Max's "Thinking…" and live tool lines (`.t-shimmer`).
- [SignatureGradient](/design/components/signature-gradient.md) (showcase page): The signature Digital Crew gradient — indigo → pink → amber (`dc-andre`, `dc-camille`, `dc-amber`) — in its four forms.
- [SkeletonReveal](/design/components/skeleton-reveal.md) (showcase page): A skeleton that cross-blurs into the loaded content, so the swap reads as one motion (`.t-skel`).
- [StreamingText](/design/components/streaming-text.md) (showcase page): Streamed words resolving through a soft cross-blur, one after another (`.t-stream-w` → `.is-in`).
- [ThirdBentoAnimation](/design/components/third-bento-animation.md): An insight vignette for the bento grid: a smooth area line draws itself, a dot pulses at its midpoint and a dark pill above it ticks through values.
- [UniboxMotion](/design/components/unibox-motion.md) (showcase page): The Unibox's shared motion vocabulary: every surface moves on the same few springs, so the whole inbox feels like one physical material.

## Effects

- [CosmicSynapseCanvas](/design/components/cosmic-synapse-canvas.md): A canvas animation of a slowly rotating sphere of neurons that fire and send pulses along their links, like a brain lighting up.
- [CpuArchitecture](/design/components/cpu-architecture.md): An SVG circuit diagram: eight traces run into a central chip labelled "DIGITAL CREW", with coloured light pulses travelling along them.
- [FlickeringGrid](/design/components/flickering-grid.md): A canvas of small squares whose opacity flickers at random, with optional text knocked into the grid as brighter squares.
- [Glitchy404](/design/components/glitchy-404.md): A "404" made of shaking fragments, rasterised to a canvas where every pixel row is jittered sideways each frame, like a bad signal.
- [Globe](/design/components/globe.md): An auto-rotating 3D dot-matrix globe (cobe, WebGL) with orange city markers, which the visitor can drag to spin.
- [GlowingEffect](/design/components/glowing-effect.md): A multicolour glow that runs along a card's border and follows the pointer around it.
- [PixelCard](/design/components/pixel-card.md): A card whose surface fills with shimmering pixels, spreading out from the centre, while it is hovered or focused.
- [ProgressiveBlur](/design/components/progressive-blur.md): A stack of backdrop-blur layers, each masked to a band, so content behind it blurs progressively toward one edge.
- [SecondBentoAnimation](/design/components/second-bento-animation.md): A security emblem for the bento grid: a solid shield sits on a flickering dot grid, and the whole tile is clipped to a shield silhouette until hovered.
- [SplashCursor](/design/components/splash-cursor.md): A WebGL fluid simulation that trails the pointer in coloured dye behind the page content.

## Appearance

- [AppearanceControls](/design/components/appearance-controls.md): The "Appearance" settings panel from `@digitalcrew/ui`: density, button finish, motion, background effect and intensity, the splash cursor, and a live preview of the result.
- [BackgroundEffect](/design/components/background-effect.md): A decorative canvas that fills a positioned region with one of seven pointer-reactive background effects, drawn in the current `--primary` colour.

## Marketing

- [BentoSection](/design/components/bento-section.md): The landing-page bento: a `SectionHeader` over a two-by-two grid of animated tiles (collaboration, security, insights, automation), each with a title and description.
- [BrandBadge](/design/components/brand-badge.md): A rounded pill in any brand colour, in three weights: solid, outline and subtle.
- [BrandIconSet](/design/components/brand-icon-set.md) (showcase page): The Crew OS brand icon set, `Icons` in the app and `DC.BrandIcons` here: the Digital Crew mark, compliance seals, and partner and integration marks as inline SVG components.
- [BrandStatCard](/design/components/brand-stat-card.md): A frosted summary card for a headline number, tinted with one brand colour: icon tile, badge, uppercase label, big value and a subtitle.
- [ConnectSection](/design/components/connect-section.md): The "Connect your context" section: one rounded panel with a heading, a tools row (integration logos orbiting the Digital Crew mark) and a knowledge row (the `CosmicSynapseCanvas` neuron sphere).
- [CpuSuperposition](/design/components/cpu-superposition.md): The features block of the Crew OS landing page: the `CpuArchitecture` circuit on top, overlapping the five glowing value cards of `FeaturesGridWithGlowingEffect` below it.
- [CrewNetwork](/design/components/crew-network.md): The "How work moves through the network" section: a live mission card and a four-step timeline (ask, match, work, paid) that plays through six real-looking missions, showing a Digital Worker handing a brief to a human operator.
- [CTASection](/design/components/cta-section.md): The closing call to action: a dark gradient panel with Camille's looping portrait video, a heading, a short line and one glass button to contact the team.
- [FAQSection](/design/components/faq-section.md): The landing-page FAQ: a `SectionHeader` and seventeen questions in a single-open, collapsible accordion.
- [FeatureSection](/design/components/feature-section.md): The Crew Network hero: a giant three-line headline ("Discover / the internet / of actions") over a slowly turning WebGL globe laced with glowing connection arcs, then a description and three stats.
- [FeaturesGridWithGlowingEffect](/design/components/features-grid-with-glowing-effect.md): The five value cards of the Crew OS landing page (cut waste, run lean, always on, reliable by default, shared knowledge), each wrapped in a pointer-following `GlowingEffect`.
- [SectionHeader](/design/components/section-header.md): The centred intro block that opens every Crew OS marketing section: generous padding, a bottom rule, and whatever eyebrow, heading and lede you pass in.
- [SectionSolutions](/design/components/section-solutions.md): The "Hire your Crew" section: a numbered roster of six Digital Workers beside a dossier card for the selected one, advancing on its own until the visitor picks someone.
- [SocialProofTestimonials](/design/components/social-proof-testimonials.md): A wall of customer quotes: `TestimonialCard`s stacked in columns that scroll vertically at different speeds, fading out at the top and bottom.