---
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", "blocks", "buttons", "cards", "dashboard", "developer-tools", "forms", "icons", "loaders", "marketing", "media", "navigation", "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: 2
component_count: 84
generated_at: "2026-09-05T09:50:59.044Z"
---

# @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.vercel.app/registry/atroui
- This file: https://sh4dcn.vercel.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 (84)

| name | type | description | install |
| --- | --- | --- | --- |
| utils | registry:lib | cn() helper (clsx + tailwind-merge). | `npx shadcn@latest add https://www.atroui.com/r/utils.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 | AtroUI button with CVA variants. Source lands in your project. | `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 | Multi-line text input styled for AtroUI forms. | `npx shadcn@latest add https://www.atroui.com/r/textarea.json` |
| form-select | registry:ui | Accessible select built on Base UI. | `npx shadcn@latest add https://www.atroui.com/r/form-select.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 | Scroll-triggered fade + rise using motion. | `npx shadcn@latest add https://www.atroui.com/r/fade-in.json` |
| stagger | registry:ui | Stagger children on scroll with StaggerChild. | `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` |
| 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` |
| contact-form | registry:block | Multi-step contact form with editable CONTENT; posts to your API. | `npx shadcn@latest add https://www.atroui.com/r/contact-form.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` |
| mockup-frame | registry:ui | Browser-frame UI placeholder for case studies. | `npx shadcn@latest add https://www.atroui.com/r/mockup-frame.json` |
| timeline-animation | registry:ui | Scroll-linked sequenced motion for hero timelines. | `npx shadcn@latest add https://www.atroui.com/r/timeline-animation.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` |
| before-after-slider | registry:block | Compare wireframe vs shipped UI mockups. | `npx shadcn@latest add https://www.atroui.com/r/before-after-slider.json` |
| visual-case-study | registry:block | Case study band with editable CONTENT and before/after. | `npx shadcn@latest add https://www.atroui.com/r/visual-case-study.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` |
| testimonial-schema | registry:block | Review JSON-LD with editable CONTENT. | `npx shadcn@latest add https://www.atroui.com/r/testimonial-schema.json` |
| json-ld | registry:block | Site graph, article, FAQ, and breadcrumb JSON-LD helpers. | `npx shadcn@latest add https://www.atroui.com/r/json-ld.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` |
| 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` |
| count-up | registry:block | In-view count-up number with reduced-motion support. | `npx shadcn@latest add https://www.atroui.com/r/count-up.json` |
| deadline-countdown | registry:block | Days-to-deadline band with segmented progress and CountUp. | `npx shadcn@latest add https://www.atroui.com/r/deadline-countdown.json` |
| currently | registry:block | Narrow “now” list with editable stamp and items. | `npx shadcn@latest add https://www.atroui.com/r/currently.json` |
| project-list | registry:block | Hairline project list with tags and optional view-all link. | `npx shadcn@latest add https://www.atroui.com/r/project-list.json` |
| log-preview | registry:block | Recent log entries band with view-all link. | `npx shadcn@latest add https://www.atroui.com/r/log-preview.json` |
| changelog | registry:block | Filterable month-grouped changelog list. | `npx shadcn@latest add https://www.atroui.com/r/changelog.json` |
| command-menu | registry:block | ⌘K command palette for nav, posts, connect, and theme. | `npx shadcn@latest add https://www.atroui.com/r/command-menu.json` |
| reveal | registry:block | IntersectionObserver reveal using .atro-reveal CSS. | `npx shadcn@latest add https://www.atroui.com/r/reveal.json` |
| theme-toggle-icon | registry:block | Compact sun/moon theme toggle for narrow chrome. | `npx shadcn@latest add https://www.atroui.com/r/theme-toggle-icon.json` |
| site-header-narrow | registry:block | Sticky 640px personal header with mono nav and theme icon. | `npx shadcn@latest add https://www.atroui.com/r/site-header-narrow.json` |
| site-footer-narrow | registry:block | Quiet personal footer with tagline and link grid. | `npx shadcn@latest add https://www.atroui.com/r/site-footer-narrow.json` |
| social-float | registry:block | Fixed social FAB with expandable link tray. | `npx shadcn@latest add https://www.atroui.com/r/social-float.json` |
| reading-shelf | registry:block | Horizontal book-cover shelf for currently reading. | `npx shadcn@latest add https://www.atroui.com/r/reading-shelf.json` |
| personal-hero | registry:block | Narrow personal intro with status, lede links, and meta. | `npx shadcn@latest add https://www.atroui.com/r/personal-hero.json` |
| resume | registry:block | Printable resume layout with experience, skills, and projects. | `npx shadcn@latest add https://www.atroui.com/r/resume.json` |
| local-clock | registry:block | Timezone-aware local time chip. | `npx shadcn@latest add https://www.atroui.com/r/local-clock.json` |
| weather-chip | registry:block | Open-Meteo weather chip — no API key required. | `npx shadcn@latest add https://www.atroui.com/r/weather-chip.json` |
| stack-list | registry:block | Sectioned tools/stack definition list. | `npx shadcn@latest add https://www.atroui.com/r/stack-list.json` |

## For AI agents

```text
You are adding components from @atroui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.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.vercel.app/json (library slug: atroui).
```