Pricing
The components and the design rules are free. Pro adds the AI components, the ones that show a model thinking, acting and asking (reasoning, tool steps, approvals, research progress), and blocks: complete product screens such as billing, team members and an approvals inbox. It also adds templates: whole working apps built from the blocks: a chat app, an agent console and an agent workspace for coding.
Free
$0
- 54 components, the chat basics included
- The design rules, as a skill
- The theme builder
- Free blocks: Sign in
- MIT license, commercial use
Pro
$149 one-time
- Everything in Free
- 14 AI components: reasoning, tool steps, approvals and more
- 10 Pro blocks, whole product screens
- 3 templates, working Next.js apps built from the blocks
- New Pro components, blocks and templates as they ship
- Unlimited projects, personal and client
- No subscription
What’s in Pro
Every one has a live demo and its full guide, open to everyone, before you buy.
Templates
- Agent consolePro templateA working console for running AI agents, for the Next.js App Router.
- Agent workspacePro templateA working Next.js app for coding with agents, in three calm panes.
- Chat appPro templateA working AI chat app for the Next.js App Router.
Blocks
- Agent taskProThe live view of an agent doing a multi-step task.
- Approvals inboxProA review queue for anything that needs a sign-off.
- BillingProThe billing settings page of a SaaS product.
- Knowledge baseProThe screen where a team gives its AI agent documents to answer from.
- OnboardingProThe first-run setup for an AI product, in four steps.
- PricingProThe public pricing page of an AI SaaS product.
- Run historyProThe screen where a team inspects past AI agent runs.
- SettingsProThe settings screen of an AI product's workspace.
- Team membersProThe members section of a workspace's settings.
- Voice sessionProA live voice call with an AI agent.
AI components
- Background runProAn agent task that keeps going while the person is elsewhere.
- Batch progressProAn agent working through many items at once.
- Diff statProLines added and removed, “+12 −3”, in the type around it.
- File changesProThe files an agent changed, one 32px row each.
- Merge statusProA pull request in one line.
- PipelineProA multi-stage run (a deploy, an import, a sync) as a row of nodes whose connectors fill as each stage finishes, over the live output of the stage you’re looking at.
- Plan approvalProThe moment an agent proposes a multi-step plan and the person reviews it before anything runs.
- ReasoningProThe thinking block of an AI reply.
- Research progressProThe live view of an agent researching the web, as one quiet line.
- SourcesProNumbered citation markers for AI answers, each with a preview card on hover, focus or tap.
- Tool approvalProThe card an agent shows when a tool call needs your OK.
- Tool stepsProAn agent’s actions as a quiet timeline.
- Turn summaryProThe work behind an agent's answer, folded to one quiet line, “17 tool calls, 3 messages”, that opens to its notes and tool calls; and the footer under the answer, with the files it changed and their diff stats, how long it took, Copy and More.
- Voice inputProMic button whose circle opens into a recording bar with a scrolling waveform, a timer and Stop.
What a block is
A whole screen or section, built from the components and wired the way a real product needs: every state, from empty to permission denied, realistic data, keyboard and screen reader support, light and dark. It takes your data and callbacks as props and fetches nothing, so it drops into your app as it is. Every block has a live demo and a full guide you can read before you buy.
Already have Pro? Add your license key. Need a block that isn’t here? Tell us.