AtroUIAtroUI
DocsComponentsBlogTheming
StarOwn the UI
  • Introduction
  • Installation
  • Registry
  • Theming
  • Brand kit
  • Compare
  • Changelog
  • Blog
  • ButtonCLI
  • CardCLI
  • Form SelectCLI
  • TextareaCLI
  • BreadcrumbsCLI
  • ProseCLI
  • Founder AvatarCLI
  • Theme ToggleCLI
  • Theme ProviderCLI
  • LogoCLI
  • Mockup FrameCLI
  • TimelineCLI
  • Fade InCLI
  • StaggerCLI
  • Scroll ProgressCLI
  • Site HeaderCLI
  • Site FooterCLI
  • Bold FooterCLI
  • HeroCLI
  • PrincipleCLI
  • WorkCLI
  • CraftsCLI
  • LabCLI
  • WhoCLI
  • PricingCLI
  • FAQCLI
  • Contextual CTACLI
  • Exit IntentCLI
  • Contact FormHost API
  • Calendly EmbedCLI
  • Waitlist FormHost API
  • Newsletter FormHost API
  • JournalCLI
  • Social ShareCLI
  • ResourcesCLI
  • Before / AfterCLI
  • Case StudyCLI
  • AR PortfolioCLI
  • Made With EmbedCLI
  • OG ExamplesCLI
  • OG Live PreviewCLI
  • OG WorkspaceHost API
  • Thumbnail PreviewCLI
  • Thumbnail WorkspaceHost API
  • Project PlannerCLI
  • Scope ChatHost API
  • Live DashboardCLI
  • Analytics ProviderCLI
  • JSON-LDCLI
  • Testimonial SchemaCLI

Getting started

Registry

AtroUI ships a shadcn-compatible registry. Components are copied into your project so you can edit code, content, and design - the same ownership model as shadcn/ui. Registry items match the docs catalog look; change CONTENT / DEFAULT_BRAND in the installed files to make them yours.

1. Init shadcn (if needed)

bash
npx shadcn@latest init

You need a components.json in the app. Tailwind CSS v4 and a dark-friendly token sheet (AtroUI globals.css or your own) work best.

2. Add the AtroUI registry

bash
npx shadcn@latest registry add @atroui=https://www.atroui.com/r/{name}.json

Or add this to components.json:

json
{
  "registries": {
    "@atroui": "https://www.atroui.com/r/{name}.json"
  }
}

3. Add a component

bash
npx shadcn@latest add @atroui/home-hero
npx shadcn@latest add @atroui/site-header
npx shadcn@latest add @atroui/faq
npx shadcn@latest add @atroui/waitlist-form
npx shadcn@latest add @atroui/site-footer

Source files land under your aliases (for example components/blocks/home-hero.tsx). Open the file and edit the CONTENT / NAV constants at the top - that is the point. Dependencies resolve as @atroui/brand, @atroui/utils, etc. (not bare names on the default shadcn registry).

Catalog

  • Libs: @atroui/utils, @atroui/brand, @atroui/site-url, @atroui/seo, @atroui/analytics
  • UI: @atroui/button, @atroui/card, @atroui/textarea, @atroui/form-select, @atroui/breadcrumbs, @atroui/prose, @atroui/theme-toggle, @atroui/theme-provider, @atroui/logo, @atroui/mockup-frame, @atroui/timeline-animation, @atroui/founder-avatar
  • Motion: @atroui/fade-in, @atroui/stagger, @atroui/scroll-progress
  • Chrome: @atroui/site-header, @atroui/site-footer, @atroui/footer-bold
  • Home: @atroui/home-hero, @atroui/home-who, @atroui/home-principle, @atroui/home-work, @atroui/home-lab
  • Convert: @atroui/pricing-overview, @atroui/faq, @atroui/contextual-cta, @atroui/exit-intent-popup, @atroui/contact-form
  • Capture: @atroui/waitlist-form, @atroui/newsletter-form, @atroui/calendly-embed, @atroui/made-with-embed
  • Content & share: @atroui/social-share, @atroui/journal-content, @atroui/resources-content
  • Case study & studio: @atroui/before-after-slider, @atroui/visual-case-study, @atroui/ar-portfolio, @atroui/live-dashboard, @atroui/project-planner
  • SEO & analytics: @atroui/json-ld, @atroui/testimonial-schema, @atroui/analytics-provider
  • Tools (OG / thumbnail / scope): @atroui/og-live-preview, @atroui/og-examples, @atroui/og-workspace, @atroui/thumbnail-live-preview, @atroui/thumbnail-workspace, @atroui/scope-chat
  • Host APIs (forms): @atroui/api-contact, @atroui/api-waitlist, @atroui/api-newsletter, @atroui/api-generate, @atroui/api-thumbnail, @atroui/api-scope

Browse the catalog JSON at /r/registry.json.

Next steps

Step-by-step setup lives on Installation. How AtroUI sits next to other kits: Compare.