@atroui

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

84 components react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://www.atroui.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://www.atroui.com/r/registry.json

bun bunx shadcn@latest add https://www.atroui.com/r/registry.json

fetch registry curl -s https://www.atroui.com/r/registry.json

Components

84 total

Utils lib

cn() helper (clsx + tailwind-merge).

npx shadcn@latest add https://www.atroui.com/r/utils.json

Brand 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 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 ui

AtroUI button with CVA variants. Source lands in your project.

npx shadcn@latest add https://www.atroui.com/r/button.json

Theme Toggle ui

Light / system / dark toggle using next-themes.

npx shadcn@latest add https://www.atroui.com/r/theme-toggle.json

Adaptive Theme 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

Adaptive Theme Switch 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 ui

Elevated surface with header, content, and footer slots.

npx shadcn@latest add https://www.atroui.com/r/card.json

Textarea ui

Multi-line text input styled for AtroUI forms.

npx shadcn@latest add https://www.atroui.com/r/textarea.json

Form Select ui

Accessible select built on Base UI.

npx shadcn@latest add https://www.atroui.com/r/form-select.json

Breadcrumbs ui

Path navigation trail for docs and product pages.

npx shadcn@latest add https://www.atroui.com/r/breadcrumbs.json

Prose ui

Long-form typography container for articles and MDX.

npx shadcn@latest add https://www.atroui.com/r/prose.json

Fade In ui

Scroll-triggered fade + rise using motion.

npx shadcn@latest add https://www.atroui.com/r/fade-in.json

Stagger ui

Stagger children on scroll with StaggerChild.

npx shadcn@latest add https://www.atroui.com/r/stagger.json

Scroll Progress ui

Reading-progress bar driven by scroll position.

npx shadcn@latest add https://www.atroui.com/r/scroll-progress.json

Logo 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 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 block

Founder / who band with editable CONTENT constants.

npx shadcn@latest add https://www.atroui.com/r/home-who.json

Site Header block

Sticky site header with editable NAV and CTA.

npx shadcn@latest add https://www.atroui.com/r/site-header.json

Bold Footer block

Bold footer with editable headline, studio links, and socials.

npx shadcn@latest add https://www.atroui.com/r/footer-bold.json

Home Principle 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 block

Selected work band with editable PROJECTS list.

npx shadcn@latest add https://www.atroui.com/r/home-work.json

Home Lab block

Free tools / lab band with editable TOOLS catalog.

npx shadcn@latest add https://www.atroui.com/r/home-lab.json

Home Crafts 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 block

Fixed-package pricing band with editable CONTENT and PACKAGES.

npx shadcn@latest add https://www.atroui.com/r/pricing-overview.json

Feature Grid block

Product feature grid with editable CONTENT and FEATURES.

npx shadcn@latest add https://www.atroui.com/r/feature-grid.json

Logo Cloud block

Partner / client name strip with editable CONTENT and NAMES.

npx shadcn@latest add https://www.atroui.com/r/logo-cloud.json

Contextual CTA 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 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 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 block

Lighter footer with editable CONTENT and link columns.

npx shadcn@latest add https://www.atroui.com/r/site-footer.json

FAQ block

Accordion FAQ with editable CONTENT and ITEMS.

npx shadcn@latest add https://www.atroui.com/r/faq.json

Waitlist Form 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 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 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 block

Credit badge + copyable HTML snippet with editable CONTENT.

npx shadcn@latest add https://www.atroui.com/r/made-with-embed.json

Theme Provider ui

next-themes wrapper for class-based dark mode.

npx shadcn@latest add https://www.atroui.com/r/theme-provider.json

Mockup Frame ui

Browser-frame UI placeholder for case studies.

npx shadcn@latest add https://www.atroui.com/r/mockup-frame.json

Timeline Animation ui

Scroll-linked sequenced motion for hero timelines.

npx shadcn@latest add https://www.atroui.com/r/timeline-animation.json

Founder Avatar ui

Circular founder portrait with editable CONTENT src.

npx shadcn@latest add https://www.atroui.com/r/founder-avatar.json

Site URL lib

getSiteUrl() for metadata and JSON-LD.

npx shadcn@latest add https://www.atroui.com/r/site-url.json

SEO helpers lib

getSiteDomain() helper for structured data.

npx shadcn@latest add https://www.atroui.com/r/seo.json

Analytics lib

trackEvent and experiment helpers.

npx shadcn@latest add https://www.atroui.com/r/analytics.json

Social Share block

X / LinkedIn / copy-link share bar.

npx shadcn@latest add https://www.atroui.com/r/social-share.json

Before / After block

Compare wireframe vs shipped UI mockups.

npx shadcn@latest add https://www.atroui.com/r/before-after-slider.json

Case Study 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 block

model-viewer AR portfolio with editable CONTENT models.

npx shadcn@latest add https://www.atroui.com/r/ar-portfolio.json

Live Dashboard block

Studio status board with editable CONTENT projects.

npx shadcn@latest add https://www.atroui.com/r/live-dashboard.json

Project Planner block

Multi-step project scoping planner UI.

npx shadcn@latest add https://www.atroui.com/r/project-planner.json

Testimonial Schema block

Review JSON-LD with editable CONTENT.

npx shadcn@latest add https://www.atroui.com/r/testimonial-schema.json

JSON-LD block

Site graph, article, FAQ, and breadcrumb JSON-LD helpers.

npx shadcn@latest add https://www.atroui.com/r/json-ld.json

Analytics Provider block

Plausible / GA loader with trackEvent helpers.

npx shadcn@latest add https://www.atroui.com/r/analytics-provider.json

OG Live Preview block

CSS OG card preview with editable CONTENT presets.

npx shadcn@latest add https://www.atroui.com/r/og-live-preview.json

OG Examples block

OG style gallery with editable CONTENT examples.

npx shadcn@latest add https://www.atroui.com/r/og-examples.json

OG Workspace block

OG generator UI shell. Wire CONTENT.endpoint (Host API).

npx shadcn@latest add https://www.atroui.com/r/og-workspace.json

Thumbnail Preview block

CSS thumbnail preview with editable CONTENT.

npx shadcn@latest add https://www.atroui.com/r/thumbnail-live-preview.json

Thumbnail Workspace block

Thumbnail generator UI shell. Wire CONTENT.endpoint (Host API).

npx shadcn@latest add https://www.atroui.com/r/thumbnail-workspace.json

Scope Chat block

AI scoping chat UI. Wire CONTENT.endpoint (Host API).

npx shadcn@latest add https://www.atroui.com/r/scope-chat.json

Journal block

Blog index layout with editable CONTENT posts.

npx shadcn@latest add https://www.atroui.com/r/journal-content.json

Resources block

Resource library layout with editable CONTENT items.

npx shadcn@latest add https://www.atroui.com/r/resources-content.json

Contact API item

POST /api/contact - honeypot, rate limit, SMTP via atroui/api/contact.

npx shadcn@latest add https://www.atroui.com/r/api-contact.json

Waitlist API item

POST /api/waitlist - Resend audience or SMTP via atroui/api/waitlist.

npx shadcn@latest add https://www.atroui.com/r/api-waitlist.json

Newsletter API item

POST /api/newsletter - Resend audience or SMTP via atroui/api/newsletter.

npx shadcn@latest add https://www.atroui.com/r/api-newsletter.json

OG Generate API 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

Thumbnail API 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

Scope Chat API 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 block

In-view count-up number with reduced-motion support.

npx shadcn@latest add https://www.atroui.com/r/count-up.json

Deadline Countdown block

Days-to-deadline band with segmented progress and CountUp.

npx shadcn@latest add https://www.atroui.com/r/deadline-countdown.json

Currently block

Narrow “now” list with editable stamp and items.

npx shadcn@latest add https://www.atroui.com/r/currently.json

Project List 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 block

Recent log entries band with view-all link.

npx shadcn@latest add https://www.atroui.com/r/log-preview.json

Changelog block

Filterable month-grouped changelog list.

npx shadcn@latest add https://www.atroui.com/r/changelog.json

Command Menu block

⌘K command palette for nav, posts, connect, and theme.

npx shadcn@latest add https://www.atroui.com/r/command-menu.json

Reveal block

IntersectionObserver reveal using .atro-reveal CSS.

npx shadcn@latest add https://www.atroui.com/r/reveal.json

Theme Toggle Icon 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 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 block

Quiet personal footer with tagline and link grid.

npx shadcn@latest add https://www.atroui.com/r/site-footer-narrow.json

Social Float block

Fixed social FAB with expandable link tray.

npx shadcn@latest add https://www.atroui.com/r/social-float.json

Reading Shelf block

Horizontal book-cover shelf for currently reading.

npx shadcn@latest add https://www.atroui.com/r/reading-shelf.json

Personal Hero block

Narrow personal intro with status, lede links, and meta.

npx shadcn@latest add https://www.atroui.com/r/personal-hero.json

Resume block

Printable resume layout with experience, skills, and projects.

npx shadcn@latest add https://www.atroui.com/r/resume.json

Local Clock block

Timezone-aware local time chip.

npx shadcn@latest add https://www.atroui.com/r/local-clock.json

Weather Chip block

Open-Meteo weather chip — no API key required.

npx shadcn@latest add https://www.atroui.com/r/weather-chip.json

Stack List block

Sectioned tools/stack definition list.

npx shadcn@latest add https://www.atroui.com/r/stack-list.json