System Message
Deploy succeeded
neubrutal-theme was built and deployed in 42 seconds. No warnings, no errors.
Astro + Tailwind CSS v4
The neubrutalist theme with the components built in.
Thick borders, hard shadows, and flat color — a complete Astro component library, block set, and layout. Pick a tier, copy the components, ship.
Theme features
Why this theme
The features that come with every license tier — typed props, theme tokens, and zero-JS interactivity, all wired up out of the box.
40+ typed Astro components
Buttons, cards, forms, modals, tables, tabs — all typed, slotted, and copy-paste ready.
Tailwind v4 @theme tokens
Six categorical accents, two inverting neutrals, and a three-tier hard-offset shadow scale — every component reads from the same tokens.
Zero client JS by default
Pages ship as static HTML. Interactivity (modals, drawers, tabs, gallery) is opt-in via shared data-* attributes.
Composable blocks & layouts
Hero, Navbar, Pricing, FAQ, CTA, Footer — blocks built from the same primitives you get.
Accessible by construction
Visible focus rings, contrast-checked tokens, semantic HTML, keyboard-friendly overlays — by default.
Self-hosted fonts
Display, body, and mono fonts are loaded via Astro's Fonts API — no runtime request to Google, no render-blocking external CSS.
What's in the box
Everything you get
The actual surfaces that ship with the theme — counts are illustrative, scroll down to see every one.
40+
Components
7
Blocks
3
Layouts
15
Pages
9
Color tokens
4
Shadow tiers
Components
Gallery
A responsive image grid with keyboard-navigable lightbox — open any tile to view it full-size, then arrow through the rest without leaving the dialog.
Components
Badges
Three ways to attach a small, flat-color label to real content.
Tags
NewAstro 5.0 is here
A quick look at what shipped in the latest major release.
Dismissible filters
Active filters, removable inline.
ReactUnder $50
Status indicators
Live system state, at a glance.
APIOperational
Build queueDegraded
Components
Cards
One base Card, a couple of content-specific variants, and a few things you can build from just the base.
Design
Composable by default
Pass a title, description, and accent — or drop in your own markup via slots.
Shipping a full component library in a weekend
Notes on building buttons, cards, and forms fast without reaching for a UI kit.
Pro
$29/mo
All components and themes, plus unlimited projects and priority support.
42+
Components shipped
Lightning setup
Install once, theme everything from a single CSS file.
Components
Avatars & Lists
Sizes & shapes
Ava Stone
Design Lead
Marcus Lin
Engineer
Priya Anand
Product
AI agent chat
AI
Neubrutal Agent
Online · reads your repo, runs tools, replies in seconds
AI
Start a conversation
Ask about the theme, the components, or how to wire up HTMX. Replies are powered by a tiny in-memory mock so the demo works offline — swap the endpoint for your LLM of choice.
Capabilities
What this agent can do
The endpoint at /api/chat/[i].ts is a prerendered Astro API route. The client hashes your input to pick a reply — swap the REPLIESarray for an LLM call to ship.
- Suggested promptsFour click-to-fill chips replace the empty state.
- Streaming-ready markupEach reply is an HTML fragment returned from a route.
- Typing indicatorThree-dot bounce renders during the round-trip.
- Shift+Enter for newlineEnter submits, Shift+Enter inserts a line break.
- Reset conversationClear the thread without reloading the page.
Components
Tabs & Accordion
Every component accepts typed props — this panel is just one of them, swapped in on click.
No client framework required: a few lines of vanilla JS handle the switching and ARIA state.
Panels are hidden with the native hidden attribute, so there's nothing to hydrate and nothing to flash.
What are the basic features?
A full component library — buttons, cards, forms, tables, modals, and more — plus blocks and layouts, all built with Tailwind CSS v4 and typed Astro props.
How do I get started?
Copy any component into your project, or clone the whole theme and start editing the page in src/pages/index.astro.
What support options are available?
The theme ships as plain, readable Astro files — check the "Anatomy of a component" section further down this page to see exactly how one is built.
Does it work with content collections?
Yes — components are plain Astro files with typed props, so they compose with content collections, server islands, or any framework component the same way any other Astro component would.
Can I change the color palette?
Every color is a single OKLCH token in global.css — swap the values there and the whole theme follows.
Is any of this locked behind JavaScript?
No — this accordion included. It's a native <details> element; the only components with a script tag are the ones that genuinely need one, like the Carousel or Modal.
variant="pill"
Same controller, same keyboard support — just a different trigger and panel treatment.
Pass a variant prop instead of copying the component.
One Tabs.astro, four looks: underline, contained, pill, vertical.
variant="vertical"
Arrow Up/Down moves focus between triggers when the tablist is vertical.
Home and End jump to the first and last tab.
Panels swap with the native hidden attribute — no hydration involved.
Settings panel
Pricing comparison
Pro
$24/mo
For solo builders shipping real products.
- All core featuresComponents, themes, blocks.
- Up to 5 projectsCommercial use allowed.
- Premium blocksPricing, testimonials, FAQ, blog index.
- Email supportReplies within 1 business day.
Team
$96/mo
For small teams working in the same codebase.
- Everything in ProAll features and components.
- Up to 12 seatsPer-seat billing, shared style guide.
- Figma libraryTokens, components, and example screens.
- Shared workspaceOne source of truth across designers and devs.
Enterprise
Custom
For org-wide rollouts with compliance needs.
- Everything in TeamAll features, plus custom contracts.
- Unlimited seatsVolume pricing and SSO.
- Custom theme tokensBring your own brand into the same components.
- Dedicated supportSlack channel and named CSM.
Code preview
terminal
bun add astro neubrutal-theme
bun run astro add tailwind
# drop the components into src/components/hero.astro
---
import Button from "../components/Button/Button.astro";
---
<section class="border-[3px] border-ink bg-yellow p-10 shadow-brutal-lg">
<h1 class="font-display text-5xl font-extrabold uppercase">Ship loud.</h1>
<Button href="/docs" class="mt-6">Read the docs</Button>
</section>Button.astro
interface Props {
variant?: "primary" | "secondary" | "outline" | "ghost"
| "borderless" | "danger" | "success" | "warning";
size?: "sm" | "md" | "lg";
as?: "a" | "button";
href?: string;
type?: "button" | "submit" | "reset";
class?: string;
}Components
Terminal
A robust terminal component with a psuedo-bash prompt, ready to display code or command output in a familiar interface. Renders directly to the DOM — native text selection, copy/paste, find, and accessibility are all included.
Components
Forms
Every input, select, and control shares the same border, shadow, and focus language — composed here into a real registration flow.
More field styles
Real-world forms
Profile settings
Components
Table, Progress & Alerts
| Name | Role | Status |
|---|---|---|
| Ava Stone | Design Lead | Active |
| Marcus Lin | Engineer | Active |
| Priya Anand | Product | Invited |
| Theo Brandt | Engineer | Suspended |
Filterable
4 rows
| Name | Role | Status | Joined |
|---|---|---|---|
| Ava Stone | Design Lead | Active | Mar 2022 |
| Marcus Lin | Engineer | Active | Jun 2023 |
| Priya Anand | Product | Invited | Sep 2025 |
| Theo Brandt | Engineer | Suspended | Jan 2024 |
| Lena Park | Researcher | Active | Aug 2024 |
| Diego Rivas | Engineer | Pending | Sep 2026 |
| Hana Yamada | Marketing | Active | Nov 2024 |
| Owen Walsh | Support | Offboarding | Feb 2025 |
No rows match that filter.
Rich data
| Member | Plan | Last seen | Actions |
|---|---|---|---|
Ava Stone ava@example.com | Pro | 2 minutes ago | |
Marcus Lin marcus@example.com | Team | an hour ago | |
Priya Anand priya@example.com | Personal | yesterday | |
Theo Brandt theo@example.com | Pro | 3 days ago | |
Lena Park lena@example.com | Team | Aug 2024 | |
Diego Rivas diego@example.com | Pro | Sep 2026 | |
Hana Yamada hana@example.com | Personal | Nov 2024 |
Installing Neubrutal CLI
npm install -g neubrutal
Building theme80%
success: Install complete — run npm run dev to preview the theme.
Components
Modal, Drawer & Toast
Overlay components are dialog-based and controlled with plain data attributes — no JS to wire up yourself.
Components
Carousel
Reactivity
Server-driven, with HTMX
Optional reactivity for the few components that need to move without a framework runtime — backed by prerendered endpoints under /api.
Progress on demand
Click the button to advance a server-rendered progress bar. Each click hits a prerendered/api/progress/N endpoint and HTMX swaps in the new fragment.
Loading…
How this works
src/pages/api/progress/[v].ts is a prerendered Astro API route withgetStaticPaths emitting one file per progress step (0 → 8 → 18 → … → 100). Each fragment's button has hx-getpointing at the next step, so HTMX walks the sequence with zero custom JS.
Toasts on a timer
Press start to receive a fresh toast every three seconds. Each one comes from a prerendered endpoint that rotates through a sequence of canned messages.
/api/toast/N
Toasts will land here.
How this works
Each toast fragment includes a hidden button withhx-get="/api/toast/N+1" andhx-trigger="every 3s" — clicking Start appends the first toast, and the hidden trigger inside it keeps appending the next one every 3 seconds. No timer, no client state.
Streamed carousel
The track starts with three slides and asks the server for two more when you clickLoad more. Each batch is HTML rendered by an Astro endpoint.
"Slide one — server-driven."
— preloaded in HTML
"Slide two — also preloaded."
— preloaded in HTML
"Slide three — preloaded too."
— preloaded in HTML
/api/carousel/N
How this works
src/pages/api/carousel/[i].ts usesgetStaticPaths to prerender one file per batch. Each batch fragment ends with a hidden trigger button whosehx-get points at the next batch — click Load 2 moreonce and the carousel keeps loading as you scroll.
Ready to build loud?
Pick a license tier, get the source, and ship a complete neubrutalist product on day one.