Tokens
Design system
Six tokens every component inherits. Change one value in one.config.ts and the whole carousel recolors with it.
Component library
Beautiful blocks,
wired to your brand
Every component below is built on the same six design tokens as the rest of the template — change one value in one.config.ts and they all re-skin. Accessible, responsive, dark-mode ready, zero config.
Block Button.astro
Five variants — primary, secondary, tertiary, ghost, destructive — across three sizes. Icon slots, loading and disabled states, and an href prop that renders a real anchor instead of a button.
Design system
Buttons
One primitive, five variants, three sizes. Hairline borders, token-driven colour, and crisp keyboard focus — every state accounted for.
SmallMediumLarge
Primary
Secondary
Tertiary
Ghost
Destructive
Full width
Block Card.astro
One composable primitive, five layouts: feature (icon + link), stat (oversized number + trend), profile (avatar + socials), pricing (tier + feature list + CTA), and a bare default — switched with a single variant prop.
One card, five layouts
A card for every surface
Feature, stat, profile, and pricing — all from a single composable component. Hairline borders, the icon-chip treatment, colour as a sparing accent. Switch a theme in the nav and watch every card respond.
Design tokens
Six tokens every component inherits — primary, secondary, tertiary, background, foreground, font. Change one value, the whole system responds.
Motion library
Reveal, Parallax, ScrollScene, and Stagger — built on Motion with shared ease + duration tokens. Reduced-motion safe by default.
AI chat
Drop a chat widget onto any page with plugin-chat. Agent personality defined in markdown. Zero backend code, zero bundle cost.
1,234
your metric here+00%
0.0d
your metric here−0.0d
00%
your metric here+0%
00 KB
your metric here
Team memberRole, Company
A one-line bio goes here — what they do, and one thing they are known for.
Team memberRole, Company
Keep it to a sentence. The card truncates, and the second line is the one that gets cut.
Team memberRole, Company
Replace these with real people before you ship — and never invent a statistic.
Starter
For solo builders shipping their first site.
$0forever
- Free forever template
- Full design system
- Motion library
- Community support
Pro
For agencies running client work at scale.
$29/mo
- Everything in Starter
- AI chat + tracking plugins
- Hosted admin console
- Priority support
- Unlimited workspaces
Enterprise
For teams with custom infrastructure needs.
Custom
- Everything in Pro
- Dedicated support
- SLA + uptime guarantees
- Custom plugins
- On-prem deployment
Block Carousel.astro
A native CSS scroll-snap carousel — no JS animation loop. Feed it items or slot children directly; perView and peek control how much of the next slide shows. Arrows, dots, and arrow-key navigation wired in.
Component
Carousel
A content carousel on native CSS scroll-snap — smooth, touch-native, and reduced-motion safe. Drag, click the arrows, tap a dot, or use the arrow keys.
Testimonials
Feature cards
Block Tabs.astro
Accessible tabs with a gliding active-tab indicator — pure Astro plus one scoped script, zero React. Panels are named slots (panel-<id>); full keyboard support (arrow keys, Home/End) baked in.
Component
Tabs that glide
A sliding indicator tracks the active tab. Full keyboard support, ARIA roles, and a crossfade that yields to reduced-motion. Zero React.
One mental model
Every surface in the template derives from six editable tokens. Pick a color, and the whole system — cards, inputs, focus rings, these tabs — recalibrates in one motion. No theme files to chase.
- Six tokens, three depth levels
- Auto dark-mode flip, WCAG AA
- Hairline borders, generous space
Composable by default
Components are plain Astro with a scoped script where interaction demands it — no runtime to boot, no provider to wrap. Reach for a React island only when state genuinely lives on the client.
import Tabs from '@/components/blocks/Tabs.astro'Fast on arrival
The page is HTML first. Islands defer until they enter the viewport, and unused primitives tree-shake to nothing. First paint stays lean, so the template scores well before you write a line.
0React for tabs
100Lighthouse target
AAContrast floor
Accessible, not optional
The tablist ships the full ARIA contract: roving tabindex, arrow-key navigation, Home / End jumps, and a focus ring that only appears for keyboards. The crossfade honors prefers-reduced-motion.
- role=tablist / tab / tabpanel
- aria-selected · aria-controls
- Keyboard-first, screen-reader sound
Block Quote.astro
Pull-quotes in three variants — featured (large, centered), inline (accent bar), and compact (grid card) — each with an optional 1–5 star rating and an avatar-initials fallback.
In their words
Pull-quotes, three ways
A featured pull-quote goes here. Give it two sentences: the problem they had, and the outcome they got.
An inline quote is shorter — one sentence, the single thing they would tell a colleague.
A short customer quote goes here. One or two sentences on the outcome, in their own words.
A concrete result lands harder than an adjective — and it is the part a reader can actually check.
Only publish a quote you have consent to publish, attributed to someone who really said it.
Block ContactForm.astro
A complete contact form built from one reusable field shape — label, hairline border, helper text, per-field error and valid states — with inline validation on blur and a simulated (offline) submit.
Get in touch
Let's talk
One reusable field shape — hairline borders, token-driven colour, crisp focus rings, and forgiving inline validation. Every state is accounted for, and the whole thing flips with dark mode.
Or just stay in the loop
Product notes and the occasional release. No spam.
Block Breadcrumbs.astro
An accessible breadcrumb trail — chevron or slash separators, an optional home icon, and a maxItems prop that collapses deep trails into an accessible '…' menu.
Navigation
A breadcrumb trail, three ways
Block Footer.astro
The site's full marketing footer — brand column, socials, four link columns, newsletter signup, and a legal bottom bar — shown here with zero props. The real one closes this page below.