Footer

A site footer: brand and tagline, a newsletter sign-up, three columns of links and a row of legal links.

Installation

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

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

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