---
name: "@atroui"
slug: "atroui"
description: "Dark-first React / Next.js components and marketing blocks. Install with the shadcn CLI and own the source."
category: "Animated components"
tags: ["animation", "auth", "blocks", "buttons", "cards", "dashboard", "forms", "icons", "loaders", "marketing", "media", "navigation", "overlays", "theming"]
framework: "react"
license: "MIT"
author: "atroui"
website: "https://www.atroui.com"
github: "https://github.com/atroui/atroui"
registry: "https://www.atroui.com/r/registry.json"
pro: false
pro_url: null
github_stars: 3
component_count: 126
generated_at: "2026-10-27T06:34:08.542Z"
---

# @atroui

Dark-first React / Next.js components and marketing blocks. Install with the shadcn CLI and own the source.

## Links

- Website: https://www.atroui.com
- GitHub: https://github.com/atroui/atroui
- Registry JSON: https://www.atroui.com/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/atroui
- This file: https://sh4dcn.netlify.app/md/atroui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.atroui.com/r/registry.json
pnpm dlx shadcn@latest add https://www.atroui.com/r/registry.json
bunx shadcn@latest add https://www.atroui.com/r/registry.json
# clone the source repo
git clone https://github.com/atroui/atroui.git
# fetch the raw registry index
curl -s https://www.atroui.com/r/registry.json
```

## Components (126)

| name | type | description | install |
| --- | --- | --- | --- |
| utils | registry:lib | cn() helper (clsx + tailwind-merge). | `npx shadcn@latest add https://www.atroui.com/r/utils.json` |
| motion | registry:lib | Shared motion tokens — hover language, presence helpers, timeline reveal (Family Values easings, no springs/blur). | `npx shadcn@latest add https://www.atroui.com/r/motion.json` |
| brand | registry:lib | getBrand() and DEFAULT_BRAND - edit or override with NEXT_PUBLIC_SITE_*. | `npx shadcn@latest add https://www.atroui.com/r/brand.json` |
| project-brief | registry:lib | Shared ProjectBrief type + OG/thumbnail href helpers for Scope → Planner → social card glue. | `npx shadcn@latest add https://www.atroui.com/r/project-brief.json` |
| button | registry:ui | Soft-rect AtroUI button — hover lift ≤1px, press into surface, focus parity. | `npx shadcn@latest add https://www.atroui.com/r/button.json` |
| theme-toggle | registry:ui | Light / system / dark toggle using next-themes. | `npx shadcn@latest add https://www.atroui.com/r/theme-toggle.json` |
| adaptive-theme | registry:lib | Contrast helpers that lift muted type to WCAG AA against the canvas. | `npx shadcn@latest add https://www.atroui.com/r/adaptive-theme.json` |
| theme-adapt | registry:ui | Light/dark switch that keeps brand canvases and lifts type that would vanish in the other mode. | `npx shadcn@latest add https://www.atroui.com/r/theme-adapt.json` |
| card | registry:ui | Elevated surface with header, content, and footer slots. | `npx shadcn@latest add https://www.atroui.com/r/card.json` |
| textarea | registry:ui | Soft-rect multi-line control aligned to Atro input tokens. | `npx shadcn@latest add https://www.atroui.com/r/textarea.json` |
| checkbox | registry:ui | Soft-rect checkbox with Motion check path draw on Base UI. | `npx shadcn@latest add https://www.atroui.com/r/checkbox.json` |
| checkbox-group | registry:ui | Soft-rect checkbox group — compose with Checkbox (value / parent). | `npx shadcn@latest add https://www.atroui.com/r/checkbox-group.json` |
| radio | registry:ui | Radio group with Motion fill-scale indicator on Base UI. | `npx shadcn@latest add https://www.atroui.com/r/radio.json` |
| accordion | registry:ui | Disclosure with height:auto, chevron rotate, and optional focus morph. | `npx shadcn@latest add https://www.atroui.com/r/accordion.json` |
| collapsible | registry:ui | Single disclosure with height:auto settle and chevron rotate. | `npx shadcn@latest add https://www.atroui.com/r/collapsible.json` |
| combobox | registry:ui | Filterable select on Base UI with Mira soft-rect, popup settle, and list stagger ≤40ms. | `npx shadcn@latest add https://www.atroui.com/r/combobox.json` |
| autocomplete | registry:ui | Suggest-as-you-type with popup settle, layoutId highlight, and list stagger ≤40ms. | `npx shadcn@latest add https://www.atroui.com/r/autocomplete.json` |
| drawer | registry:ui | Edge panel with panelTween slide, backdrop fade, and portal presence. | `npx shadcn@latest add https://www.atroui.com/r/drawer.json` |
| form-select | registry:ui | Soft-rect select on Base UI with caret rotate, popup settle, and list stagger ≤40ms. | `npx shadcn@latest add https://www.atroui.com/r/form-select.json` |
| dialog | registry:ui | Modal dialog on Base UI with Mira surfaces and short settle motion. | `npx shadcn@latest add https://www.atroui.com/r/dialog.json` |
| alert-dialog | registry:ui | Confirm destructive or irreversible actions with Base UI Alert Dialog. | `npx shadcn@latest add https://www.atroui.com/r/alert-dialog.json` |
| menu | registry:ui | Dropdown menu on Base UI with soft-rect items and settle motion. | `npx shadcn@latest add https://www.atroui.com/r/menu.json` |
| context-menu | registry:ui | Pointer context menu on Base UI with menu settle and row stagger. | `npx shadcn@latest add https://www.atroui.com/r/context-menu.json` |
| navigation-menu | registry:ui | Site nav panels with peer crossfade and soft-rect Mira popup. | `npx shadcn@latest add https://www.atroui.com/r/navigation-menu.json` |
| menubar | registry:ui | Focus-roving menubar shell with Menu grammar and Motion popups. | `npx shadcn@latest add https://www.atroui.com/r/menubar.json` |
| popover | registry:ui | Anchored popover surface for progressive disclosure. | `npx shadcn@latest add https://www.atroui.com/r/popover.json` |
| tooltip | registry:ui | Fast tooltip with micro appear motion and reduced-motion respect. | `npx shadcn@latest add https://www.atroui.com/r/tooltip.json` |
| preview-card | registry:ui | Hover/focus link preview — soft popover settle; opt-in tilt / magnetic / spotlight for media. | `npx shadcn@latest add https://www.atroui.com/r/preview-card.json` |
| scroll-area | registry:ui | Bounded scroll region with soft-rect thumb that fades when idle. | `npx shadcn@latest add https://www.atroui.com/r/scroll-area.json` |
| separator | registry:ui | Soft-rect hairline divider — static, no decorative motion. | `npx shadcn@latest add https://www.atroui.com/r/separator.json` |
| field | registry:ui | Quiet Field spine — label, description, Motion error reveal, control. | `npx shadcn@latest add https://www.atroui.com/r/field.json` |
| input | registry:ui | Single-line input aligned to Atro control height and soft-rect. | `npx shadcn@latest add https://www.atroui.com/r/input.json` |
| number-field | registry:ui | Soft-rect stepper number field with careful scrub feedback on Base UI. | `npx shadcn@latest add https://www.atroui.com/r/number-field.json` |
| otp-field | registry:ui | Soft-rect OTP digit slots with whileFocus settle (~160ms easeOutExpo) on Base UI. | `npx shadcn@latest add https://www.atroui.com/r/otp-field.json` |
| form | registry:ui | Base UI form validation orchestration — pair with Field. | `npx shadcn@latest add https://www.atroui.com/r/form.json` |
| fieldset | registry:ui | Legend + soft-rect group chrome for related controls. | `npx shadcn@latest add https://www.atroui.com/r/fieldset.json` |
| switch | registry:ui | Soft-rect switch — layout thumb + flex justify flip (Motion.dev Base UI). | `npx shadcn@latest add https://www.atroui.com/r/switch.json` |
| toast | registry:ui | Edge toast stack on Base UI with opacity+y enter/exit and careful CSS-var stacking. | `npx shadcn@latest add https://www.atroui.com/r/toast.json` |
| progress | registry:ui | Task progress bar with soft-rect fill width tween on Base UI Progress. | `npx shadcn@latest add https://www.atroui.com/r/progress.json` |
| slider | registry:ui | Range slider with thumb press micro-motion; track fill stays 1:1 while dragging. | `npx shadcn@latest add https://www.atroui.com/r/slider.json` |
| meter | registry:ui | Read-only meter gauge with soft-rect value fill tween on Base UI Meter. | `npx shadcn@latest add https://www.atroui.com/r/meter.json` |
| avatar | registry:ui | Soft-rect avatar with image fade-in and fallback crossfade on Base UI Avatar. | `npx shadcn@latest add https://www.atroui.com/r/avatar.json` |
| tabs | registry:ui | Tabs with layoutId pill morph + panel layout height (Motion.dev layout). | `npx shadcn@latest add https://www.atroui.com/r/tabs.json` |
| toggle | registry:ui | Soft-rect two-state button with pressed fill morph on Base UI. | `npx shadcn@latest add https://www.atroui.com/r/toggle.json` |
| toggle-group | registry:ui | Toggle peers with layoutId highlight morph — Motion.dev Base UI pattern. | `npx shadcn@latest add https://www.atroui.com/r/toggle-group.json` |
| toolbar | registry:ui | Dense soft-rect toolbar chrome with Motion press feedback. | `npx shadcn@latest add https://www.atroui.com/r/toolbar.json` |
| breadcrumbs | registry:ui | Path navigation trail for docs and product pages. | `npx shadcn@latest add https://www.atroui.com/r/breadcrumbs.json` |
| prose | registry:ui | Long-form typography container for articles and MDX. | `npx shadcn@latest add https://www.atroui.com/r/prose.json` |
| fade-in | registry:ui | The scroll reveal — opacity + rise. One primitive; use fadeInSection for landing triggers. | `npx shadcn@latest add https://www.atroui.com/r/fade-in.json` |
| stagger | registry:ui | Stagger children on scroll with StaggerChild (clamped ≤50ms). | `npx shadcn@latest add https://www.atroui.com/r/stagger.json` |
| scroll-progress | registry:ui | Reading-progress bar driven by scroll position. | `npx shadcn@latest add https://www.atroui.com/r/scroll-progress.json` |
| logo | registry:component | Interrupted-A mark and wordmark. Edit the SVG in your repo. | `npx shadcn@latest add https://www.atroui.com/r/logo.json` |
| home-hero | registry:block | Docs-matching homepage hero with editable CONTENT (stamp, CTAs, sprint, OG preview panel). | `npx shadcn@latest add https://www.atroui.com/r/home-hero.json` |
| home-who | registry:block | Founder / who band with editable CONTENT constants. | `npx shadcn@latest add https://www.atroui.com/r/home-who.json` |
| site-header | registry:block | Sticky site header with editable NAV and CTA. | `npx shadcn@latest add https://www.atroui.com/r/site-header.json` |
| footer-bold | registry:block | Bold footer with editable headline, studio links, and socials. | `npx shadcn@latest add https://www.atroui.com/r/footer-bold.json` |
| home-principle | registry:block | How-we-work principles band with editable CONTENT and PRINCIPLES. | `npx shadcn@latest add https://www.atroui.com/r/home-principle.json` |
| home-work | registry:block | Selected work band with editable PROJECTS list. | `npx shadcn@latest add https://www.atroui.com/r/home-work.json` |
| home-lab | registry:block | Free tools / lab band with editable TOOLS catalog. | `npx shadcn@latest add https://www.atroui.com/r/home-lab.json` |
| home-crafts | registry:block | Capabilities / crafts band with editable CONTENT and CRAFTS (distinct from pricing). | `npx shadcn@latest add https://www.atroui.com/r/home-crafts.json` |
| pricing-overview | registry:block | Fixed-package pricing band with editable CONTENT and PACKAGES. | `npx shadcn@latest add https://www.atroui.com/r/pricing-overview.json` |
| feature-grid | registry:block | Product feature grid with editable CONTENT and FEATURES. | `npx shadcn@latest add https://www.atroui.com/r/feature-grid.json` |
| logo-cloud | registry:block | Partner / client name strip with editable CONTENT and NAMES. | `npx shadcn@latest add https://www.atroui.com/r/logo-cloud.json` |
| feature-bento | registry:block | Bento feature grid with editable CONTENT and FEATURES. Soft-rect panels. | `npx shadcn@latest add https://www.atroui.com/r/feature-bento.json` |
| testimonials-stack | registry:block | Layered testimonial cards with prev/next. Editable CONTENT and TESTIMONIALS. | `npx shadcn@latest add https://www.atroui.com/r/testimonials-stack.json` |
| stats-band | registry:block | Metric strip with editable CONTENT and STATS. | `npx shadcn@latest add https://www.atroui.com/r/stats-band.json` |
| cta-band | registry:block | Headline + primary/ghost CTAs over a quiet brand wash. Editable CONTENT. | `npx shadcn@latest add https://www.atroui.com/r/cta-band.json` |
| pricing-tiers | registry:block | Toggleable pricing tiers with editable CONTENT and TIERS. | `npx shadcn@latest add https://www.atroui.com/r/pricing-tiers.json` |
| logo-marquee | registry:block | CSS logo/name marquee with editable CONTENT and LOGOS. Respects reduced motion. | `npx shadcn@latest add https://www.atroui.com/r/logo-marquee.json` |
| auth-split | registry:block | Split login/signup shell with editable CONTENT. No auth backend. | `npx shadcn@latest add https://www.atroui.com/r/auth-split.json` |
| saas-starter | registry:block | One-file SaaS landing composition. Editable CONTENT — compose sections after install. | `npx shadcn@latest add https://www.atroui.com/r/saas-starter.json` |
| contextual-cta | registry:block | Sticky scroll CTA with editable CONTENT (no analytics wiring). | `npx shadcn@latest add https://www.atroui.com/r/contextual-cta.json` |
| exit-intent-popup | registry:block | Exit-intent dialog with editable CONTENT and storage keys. | `npx shadcn@latest add https://www.atroui.com/r/exit-intent-popup.json` |
| site-footer | registry:block | Lighter footer with editable CONTENT and link columns. | `npx shadcn@latest add https://www.atroui.com/r/site-footer.json` |
| faq | registry:block | Accordion FAQ with editable CONTENT and ITEMS. | `npx shadcn@latest add https://www.atroui.com/r/faq.json` |
| waitlist-form | registry:block | Email waitlist form with editable CONTENT; posts to your API. | `npx shadcn@latest add https://www.atroui.com/r/waitlist-form.json` |
| newsletter-form | registry:block | Email newsletter form with editable CONTENT; posts to your API. | `npx shadcn@latest add https://www.atroui.com/r/newsletter-form.json` |
| calendly-embed | registry:block | Theme-aware Calendly iframe with editable CONTENT and email fallback. | `npx shadcn@latest add https://www.atroui.com/r/calendly-embed.json` |
| made-with-embed | registry:block | Credit badge + copyable HTML snippet with editable CONTENT. | `npx shadcn@latest add https://www.atroui.com/r/made-with-embed.json` |
| theme-provider | registry:ui | next-themes wrapper for class-based dark mode. | `npx shadcn@latest add https://www.atroui.com/r/theme-provider.json` |
| timeline-animation | registry:ui | Sequential in-view reveal for heroes — opacity + y only (no blur). | `npx shadcn@latest add https://www.atroui.com/r/timeline-animation.json` |
| in-view | registry:ui | Deprecated alias of Fade In with landing defaults. Prefer @atroui/fade-in. | `npx shadcn@latest add https://www.atroui.com/r/in-view.json` |
| text-morph | registry:ui | Shared-letter morph between label strings. Opt-in for state swaps. | `npx shadcn@latest add https://www.atroui.com/r/text-morph.json` |
| copy-button | registry:ui | Copy → check Button recipe with TextMorph + icon swap. Rare-path delight — not default on every Button. | `npx shadcn@latest add https://www.atroui.com/r/copy-button.json` |
| label-roll | registry:ui | Letter-staggered label swap on hover/focus for links and secondary CTAs. | `npx shadcn@latest add https://www.atroui.com/r/label-roll.json` |
| line-reveal | registry:ui | Word/line stagger enter — opacity + y + clip. Marketing default. | `npx shadcn@latest add https://www.atroui.com/r/line-reveal.json` |
| word-reveal-scroll | registry:ui | Progress-driven word opacity via scroll — opacity only, no blur. Pull lines. | `npx shadcn@latest add https://www.atroui.com/r/word-reveal-scroll.json` |
| magnetic | registry:ui | Mild pointer pull for media cards — intensity ≤0.35, range ≤80px. Never chrome. | `npx shadcn@latest add https://www.atroui.com/r/magnetic.json` |
| tilt | registry:ui | Mild 3D media tilt toward the pointer — rotationFactor ≤6–8°. Opt-in only. | `npx shadcn@latest add https://www.atroui.com/r/tilt.json` |
| spotlight | registry:ui | Low-opacity cursor wash for dark Mira media cards. Reduced motion skips. | `npx shadcn@latest add https://www.atroui.com/r/spotlight.json` |
| animate-number | registry:ui | Pricing/stats counter — digits tween as numbers with easeOutSoft. Reduced motion jumps to final. | `npx shadcn@latest add https://www.atroui.com/r/animate-number.json` |
| transition-panel | registry:ui | Wait-mode content swaps for feature tabs and docs panels — opacity + small y. | `npx shadcn@latest add https://www.atroui.com/r/transition-panel.json` |
| founder-avatar | registry:ui | Circular founder portrait with editable CONTENT src. | `npx shadcn@latest add https://www.atroui.com/r/founder-avatar.json` |
| site-url | registry:lib | getSiteUrl() for metadata and JSON-LD. | `npx shadcn@latest add https://www.atroui.com/r/site-url.json` |
| seo | registry:lib | getSiteDomain() helper for structured data. | `npx shadcn@latest add https://www.atroui.com/r/seo.json` |
| analytics | registry:lib | trackEvent and experiment helpers. | `npx shadcn@latest add https://www.atroui.com/r/analytics.json` |
| social-share | registry:block | X / LinkedIn / copy-link share bar. | `npx shadcn@latest add https://www.atroui.com/r/social-share.json` |
| ar-portfolio | registry:block | model-viewer AR portfolio with editable CONTENT models. | `npx shadcn@latest add https://www.atroui.com/r/ar-portfolio.json` |
| live-dashboard | registry:block | Studio status board with editable CONTENT projects. | `npx shadcn@latest add https://www.atroui.com/r/live-dashboard.json` |
| project-planner | registry:block | Multi-step project scoping planner UI. | `npx shadcn@latest add https://www.atroui.com/r/project-planner.json` |
| analytics-provider | registry:block | Plausible / GA loader with trackEvent helpers. | `npx shadcn@latest add https://www.atroui.com/r/analytics-provider.json` |
| og-live-preview | registry:block | CSS OG card preview with editable CONTENT presets. | `npx shadcn@latest add https://www.atroui.com/r/og-live-preview.json` |
| og-examples | registry:block | OG style gallery with editable CONTENT examples. | `npx shadcn@latest add https://www.atroui.com/r/og-examples.json` |
| og-workspace | registry:block | OG generator UI shell. Wire CONTENT.endpoint (Host API). | `npx shadcn@latest add https://www.atroui.com/r/og-workspace.json` |
| thumbnail-live-preview | registry:block | CSS thumbnail preview with editable CONTENT. | `npx shadcn@latest add https://www.atroui.com/r/thumbnail-live-preview.json` |
| thumbnail-workspace | registry:block | Thumbnail generator UI shell. Wire CONTENT.endpoint (Host API). | `npx shadcn@latest add https://www.atroui.com/r/thumbnail-workspace.json` |
| scope-chat | registry:block | AI scoping chat UI. Wire CONTENT.endpoint (Host API). | `npx shadcn@latest add https://www.atroui.com/r/scope-chat.json` |
| launch-workflow | registry:block | Scope → Planner → OG in one room. Shared ProjectBrief. Preview without keys; AI Host APIs are BYOK. | `npx shadcn@latest add https://www.atroui.com/r/launch-workflow.json` |
| landing-kit | registry:block | Vibrant soft-rect marketing stack in one add: header, hero, logos, bento, stats, testimonials, pricing, FAQ, CTA, footer. | `npx shadcn@latest add https://www.atroui.com/r/landing-kit.json` |
| journal-content | registry:block | Blog index layout with editable CONTENT posts. | `npx shadcn@latest add https://www.atroui.com/r/journal-content.json` |
| resources-content | registry:block | Resource library layout with editable CONTENT items. | `npx shadcn@latest add https://www.atroui.com/r/resources-content.json` |
| api-contact | registry:item | POST /api/contact - honeypot, rate limit, SMTP via atroui/api/contact. | `npx shadcn@latest add https://www.atroui.com/r/api-contact.json` |
| api-waitlist | registry:item | POST /api/waitlist - Resend audience or SMTP via atroui/api/waitlist. | `npx shadcn@latest add https://www.atroui.com/r/api-waitlist.json` |
| api-newsletter | registry:item | POST /api/newsletter - Resend audience or SMTP via atroui/api/newsletter. | `npx shadcn@latest add https://www.atroui.com/r/api-newsletter.json` |
| api-generate | registry:item | POST /api/generate - consumer HF/Google keys via atroui/api/generate. No keys shipped. | `npx shadcn@latest add https://www.atroui.com/r/api-generate.json` |
| api-thumbnail | registry:item | POST /api/thumbnail - consumer HF/Google/XAI keys via atroui/api/thumbnail. No keys shipped. | `npx shadcn@latest add https://www.atroui.com/r/api-thumbnail.json` |
| api-scope | registry:item | POST /api/scope - rule-based by default; optional XAI_API_KEY via atroui/api/scope. | `npx shadcn@latest add https://www.atroui.com/r/api-scope.json` |
| ascii-rig | registry:lib | Shared ASCII kit — luminance ramps, offscreen/reduced-motion aware tick loop, canvas character-cell metrics. | `npx shadcn@latest add https://www.atroui.com/r/ascii-rig.json` |
| ascii-donut | registry:ui | The spinning torus — 3D points z-buffered per character cell, shaded by luminance ramp. | `npx shadcn@latest add https://www.atroui.com/r/ascii-donut.json` |
| ascii-rain | registry:ui | Falling streams of glyphs whose color fades along each tail. | `npx shadcn@latest add https://www.atroui.com/r/ascii-rain.json` |
| ascii-wave | registry:ui | Function field f(x,y,t) mapped through a luminance ramp — one text node per frame. | `npx shadcn@latest add https://www.atroui.com/r/ascii-wave.json` |
| ascii-spark | registry:ui | Block-element bars (░–█); a copyable plain-text sparkline. | `npx shadcn@latest add https://www.atroui.com/r/ascii-spark.json` |
| ascii-bar | registry:ui | Pseudo-graphics progress (▰▱) filling in plottable steps. | `npx shadcn@latest add https://www.atroui.com/r/ascii-bar.json` |
| ascii-boot | registry:ui | VT100-style init log typed character by character, cursor pulsing. | `npx shadcn@latest add https://www.atroui.com/r/ascii-boot.json` |
| ascii-wordmark | registry:ui | FIGlet-style big text from a built-in 3×5 pixel font. | `npx shadcn@latest add https://www.atroui.com/r/ascii-wordmark.json` |
| ascii-decode | registry:ui | Cipher glyphs locking into the message left to right. | `npx shadcn@latest add https://www.atroui.com/r/ascii-decode.json` |

## For AI agents

```text
You are adding components from @atroui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/atroui.md) for the component list.
2. Fetch the machine-readable index: https://www.atroui.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: atroui).
```