Blocks

Starting pages with the layout already done

A block is a whole page for a new app: the navigation, the header and the spacing set, built from the components and tokens alone, and laid out for a phone as well as a desktop. One command copies its files into your app. From then on they are yours to change, so a block never updates under you, and a file you already have is never overwritten.

Add a block

Blocks are for a Next.js app router project. Set the app up for the library first, if you have not, so links route through Next and the colour mode holds:

bash
npm install rift-ds
npx rift-ds init app

Then add a block by name. Run npx rift-ds init block on its own to list them. The app shell and the dashboard share one shell file, which the first of them writes; see Get started for the tokens and theming the blocks read.

App shell

The floating sidebar, a top bar with search, the AI entry and the colour mode, a page header, and an empty page with the spacing set.

Open it full screen. Add it with:

bash
npx rift-ds init block app-shell

What it writes, the page landing at /starter:

text
components/blocks/AppShell.tsx
components/blocks/AppShell.module.css
app/starter/page.tsx
app/starter/page.module.css

Dashboard

The app shell with a row of stats, two panels and a project table, stacking down to one column on a phone.

Open it full screen. Add it with:

bash
npx rift-ds init block dashboard

What it writes, the page landing at /dashboard:

text
components/blocks/AppShell.tsx
components/blocks/AppShell.module.css
app/dashboard/page.tsx
app/dashboard/page.module.css

Sign in

A centred sign-in card with email and password, remember me and a single sign-on route.

Open it full screen. Add it with:

bash
npx rift-ds init block sign-in

What it writes, the page landing at /sign-in:

text
app/sign-in/page.tsx
app/sign-in/page.module.css