Editorial steps, booking desk, AI agent loop, and modern passkey sign-in.
How it works
From empty repo to shipped UI.
Install, theme, compose, ship — with a glimpse of each step.
CLI · React · Tailwind
Install what you need
CLI drop-in — one command, files in your project.
terminal# add a block
npx @sonojs/ui@latest add button
+ components/ui/button.tsx
Presets · Tokens
Lock the look once
Presets and tokens keep light and dark coherent.
Tokens
primary
card
muted
fg
Components · Blocks
Compose the product
Stack primitives or start from a block — then shape it.
DashboardLiveQA · Launch
Ship with confidence
Check breakpoints and focus, wire data, push.
- Mobile + desktop checked
- Keyboard path verified
- Data wired to API
Ready to start? The foundation is waiting.
How it works
Book like people actually book.
One quiet desk — tap through service, day, time, confirm.
North Clinic · Booking
Service
Choose a visit type
How it works
An agent that ships with you in the loop.
The 2026 loop everyone knows — attach context, let tools run, review the diff, open the PR. You stay the editor-in-chief.
Agent run · checkout
model · sono-coder · tools on
Checkout still uses password fields — swap to passkey first.
› read_file · app/checkout/page.tsx
› grep · Passkey|WebAuthn
Drafting PasskeyButton + fallback SMS path…
shell·npm run typecheck · exit 0
How it works
Sign-in the way people actually do it now.
Email → device trust → passkey → in. The same four beats you see on banks, airlines, and every serious SaaS in 2026.
Email in
No password yet
Verify device
Trusted phone
Create passkey
Face ID / Touch ID
You’re in
Workspace ready
Step 03
Skip passwords forever
Save a passkey on this device. Banks, Google, and Apple already taught people this gesture.
Create a passkey
Use Face ID, Touch ID, or your device PIN
Synced to your password manager