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

Brand

Brand kit

Assets and voice for AtroUI - the React / Next.js component library at atroui.com. Use these when linking, embedding, or writing about the project.

Mark

Interrupted A - open letterform with a floating brand bar (#0b7bff). Download SVGs from the docs public folder:

  • atroui-mark.svg - transparent mark
  • atroui-mark-app.svg - app tile
AtroUI markAtroUI app icon

Made with badge

Credit AtroUI on projects that ship with the catalog. Prefer linking to www.atroui.com.

Made with AtroUI
html
<a href="https://www.atroui.com">
  <img src="https://www.atroui.com/badge/atroui.svg" alt="Made with AtroUI" width="160" height="40" />
</a>

Or use the MadeWithEmbed component.

Colors

  • Canvas

    #0a0a0a

  • Brand

    #0b7bff

  • Accent mist

    #92dbe0

Voice

  • Say AtroUI, atroui.com, and npx shadcn add @atroui/….
  • Position as a production React / Next.js catalog on the shadcn registry - not a generic clone.
  • Precise, calm, product-first. Avoid hype and personal bylines on product pages.