Skip to content

Components · 7 blocks

Blocks

Whole pages built from Patina's parts. Install one into your app, then make its copy and data yours.

Hero

hero-01

A landing hero: a serif headline, the install command and two actions beside a large print that rerolls from its seed.

npx shadcn add @patina/hero-01

Sign in

sign-in-01

A sign-in card on deckled paper: email and password with validation, keep me signed in, and an emailed link instead of a password.

npx shadcn add @patina/sign-in-01

Dashboard

dashboard-01

A week at a glance: headline numbers, two hand-drawn bar charts in hatch, a ledger of records and a survey in progress.

npx shadcn add @patina/dashboard-01

Settings

settings-01

A settings page in a narrow column: profile fields, the appearance rows, notifications as switches and a danger zone that asks before deleting.

npx shadcn add @patina/settings-01

Pricing

pricing-01

Three plans with a monthly or yearly price, the recommended one stamped, drawn ticks for what each includes and a short FAQ.

npx shadcn add @patina/pricing-01

Article

article-01

A long-form field note: reading progress, a numbered kicker, prose with a drop cap, a pull quote, margin sidenotes, a printed figure and a postmark.

npx shadcn add @patina/article-01

Empty states

empty-01

A list page with nothing to show: a first-run notebook, a search with no results and an offline state, each with a print and one action.

npx shadcn add @patina/empty-01
OpenEmpty states in a new tab