Skip to content

Now in the official shadcn registry directory.

Start free
ai2v0.7
Pro blocks

The section is the
new component.

A component hands you a box. A section finishes the page. Pro blocks are complete, hand-designed page sections built on the ai2 system: they take colour from tokens, adopt a brand language through presets, and land in your project as a single file.

Browse categoriesSee a live block

One block, 8 brand languages.

What follows is not a screenshot. It is a real block, running on this page. Switch the preset: the layout holds, the language changes. Every control inside it works, and the shader under each card reads the same brand token you just picked.

pro/blocks/bento-grids-01.tsxSample data

Today, in order

Priority, owner and due date on every card, so the next move is never a decision.

Today3 open
  • High

    Reconcile the settlement file before the cut-off

    Apr 1821
  • Medium

    Review chargeback rules for the new corridor

    Apr 2443
  • Low

    Archive last quarter payout statements

    May 0216

Command palette

Reach any action from the keyboard. Type two letters, press the shortcut, keep going.

settlement.tsk

const rows = await ledger.read(id)

let net = 0

for (const r of rows) {

net += r.amount

}

return post(net)

Review with AI

The original and the rewrite side by side. Drag the seam and keep the half you want.

Everyone in the same file

Selections, cursors and the publish state travel live, so nobody works on a stale copy.

payouts.tsk
1import { ledger } from "@ai2/ledger"
2import { settle } from "@ai2/settle"
3import type { Batch } from "./types"
4
5export async function run(b) {
6 const rows = await ledger.read(b.id)
7 const net = rows.reduce(sum, 0)
8
9 if (net > b.reserve) {
10 return hold(b, "reserve")
11 }
12
13 return settle(rows, { window: "T+1" })
14}
15
16// queued for the 18:00 cut-off

Default The ai2 system as designed: neutral surfaces, magenta brand, 10px radius scale.

16blocks written
9categories, 2 live
51components underneath
8brand languages ready

Blocks

Browse by category. Pricing and Bento grids are live and previewable; the rest are on the way.

What makes a block finished.

Working is not the bar. A block ships only if it survives production.

  • Built on tokens

    Not one fixed colour inside a block. What changes the surface is never the block itself, it is the token layer under it.

  • Controls that really work

    Switches, sliders, calculators: every visible control changes something. No decorative buttons.

  • Measured in both themes

    Light and dark, settled by contrast measurement rather than by eye. Each block reads the same either way.

  • Keyboard and screen reader

    Landmarks, heading order, focus rings, reduced motion. Built in from the first commit, not bolted on.

  • One file, and it is yours

    Each block ships as a single file with its own demo data. It lands in your project and stays yours to edit.

  • Mobile first

    Laid out for the narrow screen and grown from there, not a wide design that breaks. No horizontal scroll.

Three moves to launch.

01

Open a category

Pick the section you need: pricing, hero, dashboard. Each one is already finished.

02

Switch the preset

Choose the brand language and the block rebuilds itself around it, before you copy a line of code.

03

Install and ship

One command drops it into your project. No rewrite before it goes live.

Questions, answered.

The honest state of things while we build.

Own every block.

16 finished blocks today, and every block that ships after. One payment, yours to keep, in any project you build.

Compare tiers

Already bought? Open the license portal.