Skip to content
Motif UI
Go Pro

Templates · gallery

Whole pages, ready to rebrand

Full template builds composed from the library. Filter by mood and stack, preview any template inline, then open it to copy, re-theme and assemble — every template ships with its provenance, its audits and an honest time-to-build.

SaaS Launch Page

saas · template · landing · pricing

24 KBReact

Complete 8-section launch page: nav, aurora hero, bento features, live demo strip, pricing toggle, FAQ, CTA and footer. React + Tailwind, one install.

Open full page →~5 copy-copies to build

Agency Showcase

agency · portfolio · template

21.3 KBReact / HTML/CSS

Editorial-styled agency site: splash grid, case-study cards with tilt, team bento and a marquee of client marks. Original typographic system included.

Open full page →~5 copy-copies to build
A library that reads like a book

Every asset page ships code, tokens and a design note in one place, so onboarding is one scroll instead of five tabs.

npm i motif-ui

One command, no peer-dependency maze. The package is 4 kB gzipped and carries zero runtime.

Tokens before themes

Colour, type and spacing are data first; dark mode is a token swap, not a stylesheet rewrite.

362 assets and counting

Inputs, sections and signature motion pieces — each with an original demo, copy snippet and a11y score.

A motion language, not a toolbox

Under 200ms for feedback, 500ms+ for story beats, and reduced-motion kills the theatre — by design.

click to preview inline

Docs Site Template

docs · template · sidebar · toc

1.3 KBReact / HTML/CSS

Sidebar TOC + scrollspy content + prev/next footer assembled in one compact frame — the docs layout pattern, live with real section tracking.

Open full page →~3 copy-copies to build
dark SaaS template
The component library your roadmap kept promising

Original assets, honest a11y and a motion language — assembled from the same sections on this page.

northwindarclighthazel&coplaindaysolidpine
◈

tokens

one source of truth

◈

motion

budgeted animation

◈

a11y

tested, not bolted

Studio

$0/mo

Team

$24/mo

Agency

$64/mo

Original?Every asset is authored in-house.
Licence?MIT, including client work.
Fast?Zero runtime on your page.

Stop promising the library. Ship it.

assembled from shipped sections · hero → logos → features → pricing → faq → cta

click to preview inline

Landing Template (Dark SaaS)

landing · template · saas · hero

1.7 KBReact / HTML/CSS

Hero → logo strip → features → pricing → FAQ → CTA assembled from shipped sections, with anchor nav and a working mobile menu — a whole page in one frame.

Open full page →~3 copy-copies to build

referral code: friends who join with it move one spot up the list — honesty, the countdown is real.

click to preview inline

Waitlist Template

waitlist · countdown · template · invite

1.2 KBReact / HTML/CSS

A countdown that ticks to the real next launch date, an invite code with one-click copy, and referral wording that never over-promises.

Open full page →~3 copy-copies to build

one index for both streams — a changelog that reads like a journal, or the reverse.

click to preview inline

Changelog / Journal Template

changelog · journal · template · essays

1 KBReact / HTML/CSS

One index for essays and releases side by side — kind badges (essay/release), reading-time chips and expandable entries for notes pages.

Open full page →~3 copy-copies to build
click to preview inline

Template Gallery Page

gallery · template · filter · catalog

1.2 KBReact

A gallery that filters the REAL catalog — every asset searchable by title, tag and kind, each tile offering a one-click slug copy.

Open full page →~3 copy-copies to build

Ink — #241f17

Aa Baskerville is the voice

Inter · tracking wide · never all-caps in serif

the spread is a demo — tokens, not a legal spec

click to preview inline

Brand Guideline Spread

brand · guidelines · tokens · premium

1.6 KBReact / HTML/CSS

A brand-book page: swatch grid with live selection, type voice, and the tone reminder. The swatches are real buttons — the spec is a demo, not a legal doc.

Open full page →~3 copy-copies to build
type / serifBaskerville
spacing / rail4 · 8 · 16
radius / quiet2 px
ink / primary#241f17

the tone toggle remaps the tokens — which is the whole point

click to preview inline

Design System Showcase

design system · tokens · toggle · premium

1.5 KBReact / HTML/CSS

A token spread with a live tone toggle that remaps the whole card — the demonstration is the lesson. Light and dark read as the same system, not two designs.

Open full page →~3 copy-copies to build

Magazine Cover Hero

magazine · editorial · hero · premium

1.4 KBHTML/CSS / React

A magazine-cover hero: masthead, cover line in serif, art slot and an issue note. The masthead is the pattern; the cover art is an honest stand-in.

Open full page →~3 copy-copies to build

Agency Site Template

template · agency · full page

1.9 KBReact

A full agency page skeleton: nav, one-sentence hero, selected-works band and footer. The skeleton is real markup, not a screenshot of a page.

Open full page →~3 copy-copies to build

The winter collection

Twelve pieces, priced plainly — sizes and stock are real, urgency is not.

storefront · the view toggle is the demo's honest control

click to preview inline

E-commerce Storefront Template

template · ecommerce · storefront

1.8 KBReact

A storefront skeleton with a real view toggle (grid/list) and honest copy — sizes and stock are real, urgency is not.

Open full page →~3 copy-copies to build

event landing · invitations are the gate; the gate is honest.

click to preview inline

Event Landing Template

template · event · landing

1.7 KBReact / HTML/CSS

An event landing skeleton: one-day promise, final programme, and an invitation gate that holds its result locally.

Open full page →~3 copy-copies to build

Sculpture — selected work

Three pieces per discipline, each with its year and material. No award lists not won.

portfolio · discipline tabs are the honest filter.

click to preview inline

Portfolio Showcase Template

template · portfolio · showcase

1.8 KBReact

A portfolio skeleton with discipline tabs and three pieces per discipline. No award lists not won.

Open full page →~3 copy-copies to build

launch · no countdown; the not-yet date is the honest pattern.

click to preview inline

Product Launch Template

template · launch · product

1.6 KBReact

A product launch skeleton: one promise, no countdown, and a notify affordance that says the date is not announced yet — because the date is a promise.

Open full page →~3 copy-copies to build

membership site · tiers are promises; the cap is stated.

click to preview inline

Membership Site Template

template · membership · tiers

1.8 KBReact

A membership skeleton with three tiers, one promise each, and the cap stated — tiers are promises; the cap is the trust.

Open full page →~3 copy-copies to build

Editorial Magazine Template

template · magazine · editorial

1.7 KBReact / HTML/CSS

An editorial magazine skeleton: masthead, cover line, art slots and the serif register. The spread is the pattern; the cover art is an honest stand-in.

Open full page →~3 copy-copies to build

Quarter · steady

Three panels, one source of truth, and sample data that says it is sample data.

enterprise portal · panels are real tabs; the numbers are labelled.

click to preview inline

Enterprise Portal Template

template · enterprise · portal

1.8 KBReact

An enterprise portal skeleton: panel tabs, one source of truth, and sample data that says it is sample data.

Open full page →~3 copy-copies to build

4 of 4 sample postings — the roles are illustrative, the filter is real.

click to preview inline

Job Board Template

template · jobs · careers · listings

2 KBReact

A listings skeleton: a filter that actually filters, a real list, and no invented urgency. The postings are sample data and say so — the pattern is the deliverable.

Open full page →~3 copy-copies to build

Made with Motif case studies

Challenge → assets → result, for three real sample builds.

Browse every section

Compose your own template from the full component catalog.

Tune before you commit

The Lab's timing, stagger and palette tools ship with every build.