Hero

A landing hero: an announcement, a headline that blurs in, two actions and a line of proof, over a Kinetic Grid drawn in the system's own colours.

Invoices that chase themselves.

Invoices, reminders and payments in one place, so your team spends Friday on the business instead of on overdue accounts.

Free for your first three customers. No card needed.

1. Install a design system if the project does not have one yet: Cueit, Skita or Folio.
2. Add the block. It installs to components/satori-ui/blocks/ with the shadcn/ui primitives it uses.
npx shadcn@latest add @satoriui/hero-01
3. Render it inside the system's scope. With the scope class on <html> there is nothing more to do. To try another system, change the class.
app/page.tsx
```
1
2
3
4
5
import { Hero01 } from "@/components/satori-ui/blocks/hero-01";
export default function Page() {
  return <Hero01 />;
}
```

It is built from shadcn/ui primitives, Badge and Button, which every design system re-skins.

For what shadcn has no name for, it uses 5 of the shared contract utilities. Every system defines them identically and sets the variables they read.