Call to action

The closing call to action on the emphasised surface, with a heading that blurs in as it scrolls into view.

Get paid for the work you already did

Set up in an afternoon. Free for your first three customers.

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/cta-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 { Cta01 } from "@/components/satori-ui/blocks/cta-01";
export default function Page() {
  return <Cta01 />;
}
```

It is built from one shadcn/ui primitive, Button, which every design system re-skins.

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