Astro 7 + React 19

Design beautiful websites with perfect Lighthouse scores.

ONE is an open source starter template — clone it and your first build already scores 100 for accessibility, best practices and SEO, with tokens, motion, and payments wired together, no separate integration pass.

Get started free →See the design system

Live — not a mockup2026-09-14

Perf

A11y

Best

SEO

Desktop, this exact page. 100 on throttled Slow 4G.

Six tokens. Light and dark. Done.

Every component on this page derives from six editable tokens. Pick one below and the whole site responds — both modes, live.

Tokens

The 6 editable tokens

Click any swatch to recolor live. Picks apply to the whole site and persist — the same engine behind the nav's preset swatches. Everything else on this page — borders, focus rings, destructive/success, on-* label colors — derives from these 6 automatically; see the invariants and derived tokens below.

Surface tokens (background · foreground · font) flip with mode — picks apply to thedark mode you're viewing. Brand tokens apply to both.

backgroundL1 surface — cards, sidebar, popovers
#1a1a1a
foregroundL2 surface — card body, inputs, code
#212121
Aa
fontBody text — derives border · muted · faint
#ffffff
primaryMain CTA — also focus ring (both modes)
#1d3a66
secondarySupporting actions (both modes)
#3d4451
tertiaryAccent · success-tinted (both modes)
#324e32

Invariants —destructivesuccessgoldwhiteblack+ derived: on-{primary,secondary,tertiary,destructive,success} · border · muted · page

14 presets

Pick a theme. The whole site repaints.

Every card below is a real, clickable preset — click one and this entire page (not just this section) switches live, the same engine behind the nav swatches.

Build your own theme →

Motion system

Six primitives. One mental model.

Reveal, Stagger, Parallax, ScrollScene, Spring, and the tokens that keep them all feeling like the same product — each one interactive, right here.

RevealwhileInView

Fade + translate on viewport entry. Fires once via viewport: once.

sm · fasty: 12px · 0.32s

md · basey: 24px · 0.48s

lg · slowy: 48px · 0.72s

<Reveal client:visible dist="md" speed="base" delay={0.1}>
  <HeroHeadline />
</Reveal>

StaggerstaggerChildren

One parent — all children stagger via staggerChildren.

1Signal arrives

2Path selected

3Handler executes

4Result marks the path

5Highway hardens

6Loop closes

<Stagger client:visible stagger={0.08}>
  {items.map(i => <Card key={i} />)}
</Stagger>

ParallaxuseScroll

Far 4×

Mid 2×

Near 1×

Move cursor over canvas

Near · 1×

x +0.00
y +0.00

<Parallax client:visible speed={60} direction="up">
  <BackgroundGrid />
</Parallax>

ScrollScenescrubbed

Sticky pin exposes progress 0→1 as a MotionValue to all children.

Signal entersactive

Route resolves

Handler fires

Loop closes

progress0%

<ScrollScene client:visible height="250vh">
  {(p) => <Scene progress={p} />}
</ScrollScene>

Springphysics

Pick a spring config then hit Shoot.

k=380 · d=32

// ease.spring — the ONE system default
{ type: 'spring', stiffness: 380, damping: 32, mass: 0.8 }

Tokensdesign

Four numbers that make everything feel like the same product.

out[0.22, 1, 0.36, 1]

inout[0.65, 0, 0.35, 1]

springk=380 d=32

Duration

fast

320ms

base

480ms

slow

720ms

See the full motion system →

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

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

A short customer quote goes here — one or two sentences on the outcome they got, in their own words.

Customer nameRole · Company

Keep it specific. A concrete result lands harder than an adjective, and it is the part a reader can check.

Customer nameRole · Company

Three or four slides is plenty. The carousel loops, so the fifth quote is the one nobody reads.

Customer nameRole · Company

Feature cards

Tokens

Design system

Six tokens every component inherits. Change one value in one.config.ts and the whole carousel recolors with it.

Motion

Reduced-motion safe

Smooth scroll-snap by default, instant jumps when the visitor asks for less motion. Accessibility is the floor, not a flag.

Chat-ready

Pair any slide with plugin-chat. Agent personality lives in markdown, the widget loads with zero bundle cost.

Payments

Accept in 60s

x402 flows, quote/claim, multi-chain crypto via plugin-backend. Wire a paywall into a slide without a Stripe account.

Auth

Passkey sign-in

Passkey + better-auth ships free. Social providers and magic links are one config line away.

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'

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

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.

Customer nameRole, Company

An inline quote is shorter — one sentence, the single thing they would tell a colleague.

Customer nameRole, Company

A short customer quote goes here. One or two sentences on the outcome, in their own words.

Customer nameRole, Company

A concrete result lands harder than an adjective — and it is the part a reader can actually check.

Customer nameRole, Company

Only publish a quote you have consent to publish, attributed to someone who really said it.

Customer nameRole, Company

Payments, first-class

Two rails. Zero custody.

Every clone ships a working payment stack. Crypto links are live the moment you clone; the card rail is a real Stripe scaffold that goes live with your key.

Crypto — live today

Signed payment links across Sui, Ethereum, Solana, and Bitcoin. Every link is Ed25519-signed server-side and verified before it renders — no custody, no chargebacks. Settlement is the transaction itself.

Card — bring your own key

Real Stripe Elements, fully wired: /api/pay/create-intent mints PaymentIntents and /api/pay/webhook verifies signatures — both fail-closed until you add two env vars. Then this exact form is live on your account.

Wallet — self-hosted

Run one wallet keygen and your keys never leave your machine. The/wallet page reads live on-chain balances over public RPC — no backend required. Payment links settle straight to it.

Card · your Stripe key

And a card form you'd want to fill in.

Real Stripe Elements dressed as a card — tilts to your cursor, guides you field to field, and settles straight to your own Stripe account. It goes live the moment you add two env vars; until then it's an honest preview.

✓ PCI stays with Stripe — we never see a digit
✓ Fail-closed without your keys
✓ Cards, wallets, and Link out of the box

See the full payments page →

Clone it. Ship it. Measure it yourself.

Free forever. No card required. Your first Lighthouse run is one command away.

npx oneie create node my-app

View on GitHub →See the design system

Source-available · Free forever · No card required · Every claim on this page is live

Design beautiful websites with perfect Lighthouse scores.

The 6 editable tokens

Pick a theme. The whole site repaints.

Six primitives. One mental model.

Design tokens

Motion library

AI chat

Starter

Pro

Enterprise

Design system

Reduced-motion safe

Chat-ready

Accept in 60s

Passkey sign-in

One mental model

Composable by default

Fast on arrival

Accessible, not optional

Two rails. Zero custody.

Crypto — live today

Card — bring your own key

Wallet — self-hosted

And a card form you'd want to fill in.

Clone it. Ship it. Measure it yourself.