11 patterns, built from these primitives

Real, interactive UI built entirely from fandry-* components, not screenshots. Retheme them with tokens to make them your own.

01 View source

Pricing card

A plan card with a badge, feature list, and single CTA.

Popular

Pro

$29 /mo

Unlimited components
Priority support
Custom theming

02 View source

Login form

Inputs, a checkbox, and a link, wired together.

Sign in

Email Password Remember me Forgot password? 03 View source

Settings list

Label, description, and a switch, repeated with dividers.

Notifications

Email alerts Get notified when an order ships. SMS alerts Text messages for urgent updates. Weekly digest A Monday summary of account activity. 04 View source

Empty state

Icon, heading, muted copy, and a way forward.

No invoices yet

Invoices show up here once you place your first order.

05 View source

Notification list

A stack of fandry-alert, each with its own variant.

Notifications

New comment on ticket #4821.

Payment received

Invoice INV-2044 is now paid.

Low stock

Valve Assembly is running low. 06 View source

Team list

Avatar, name, role, and a badge, data-driven with for:each.

Team

AL Ada Lovelace Engineer Admin GH Grace Hopper Engineer Member AT Alan Turing Researcher Member 07 View source

Attachment list

File icon, filename, size, and a remove action.

Attachments

quarterly-report.pdf 2.4 MB warranty-terms.docx 640 KB 08 View source

Onboarding checklist

Completed steps locked, the rest genuinely checkable.

Get started

2 of 4 steps complete

Create your account Verify your email Invite your team Place your first order 09 View source

Search bar

fandry-input's prefix slot plus a static results list.

Quick search 🔍 #10482 — Industrial Pump Order Ada Lovelace Person Filter Kit Product 10 View source

KPI row

Three stat tiles with a trend badge each.

This month

Revenue

$84,200

+12% New customers

38

+4% Churn

1.2%

+0.3% 11 View source

Breadcrumb navigation

Each crumb swaps the card below — fandry-breadcrumb driving real state.

Website Redesign

Design files, briefs, and assets for the Q3 site redesign.

Ready to build?

Every pattern above is just fandry-* primitives, composed. Grab the components and start.

Browse Components View on GitHub