Examples

Examples

Full interface patterns built with the framework - ready to copy and adapt.

Forms

Sign-up form

Create your account

Start your free 14-day trial. No credit card required.

Looks great!
Must be at least 8 characters.
Optional - helps us tailor your experience.

Settings panel

Account preferences

Markdown supported.

Dark mode

Use system preference by default

Two-factor auth

Require TOTP on every sign-in

Email notifications

Digest sent every Friday morning

Cards

Stat cards

$48,295
Total revenue
+12.4% vs last month
3,841
Active users
+5.1% vs last week
284
New sign-ups
-2.3% vs last month
1.8%
Churn rate
Improved -0.4 pp

Profile cards

Ada

Ada Lovelace

Lead Product Designer - London

Figma Systems Motion
Alan

Alan Turing

Staff Engineer - Cambridge

Rust TypeScript AI
Grace

Grace Hopper

VP Engineering - New York

Go K8s SRE

Pricing cards

Starter

For individuals & hobbyists

$0 /mo
  • + 3 projects
  • + 1 GB storage
  • + Community support
  • x Custom domains
  • x Team collaboration

Pro Most popular

For growing teams

$19 /mo
  • + Unlimited projects
  • + 50 GB storage
  • + Priority support
  • + Custom domains
  • + Team collaboration (up to 10)

Enterprise

For large organisations

Custom
  • + Everything in Pro
  • + 1 TB storage
  • + SLA & dedicated support
  • + SSO / SAML
  • + Audit logs

Tables

Recent orders

Order Customer Product Date Amount Status Actions
#4821

Ada Lovelace

ada@lovelace.io

 Pro Plan x1 Jun 12, 2025 $19.00 Paid
#4820

Alan Turing

alan@turing.dev

 Enterprise Seat x5 Jun 11, 2025 $299.00 Pending
#4819

Grace Hopper

grace@hopper.io

 Starter Plan x1 Jun 10, 2025 $0.00 Free
#4818

Linus Torvalds

linus@kernel.org

 Pro Plan x12 (annual) Jun 9, 2025 $204.00 Refunded

Team members

Member Role Department Joined Status Actions
Ada Lovelace
 Admin Engineering Mar 2023 Active
Alan Turing
 Editor Research Jul 2023 Active
Grace Hopper
 Viewer Design Jan 2024 Pending invite

Accordion

FAQ (single-open)

UI Framework is a lightweight, single-file component library built with plain CSS custom properties and vanilla JS plugins. It's designed for developers who want polished UI without a build step, framework dependency, or a multi-megabyte bundle.

Just add to your and include any plugin scripts you need (e.g. ui-modal.js) with a defer attribute before

Reference

Base

Class / AttributeDescription

Modifiers

Class / AttributeDescription

Options

Class / AttributeDescription
. No npm, no bundler required.

Yes - all design decisions are CSS custom properties defined in :root. Override --color-primary, --ui-border-radius-m, --ui-font-family-base, and any other token in your own stylesheet to rebrand instantly.

Yes. All interactive components are ARIA-annotated and fully keyboard-navigable. Tabs use arrow-key navigation; modals trap focus and restore it on close; dropdowns and tooltips respect Escape.

Dropdown

Context menu & user profile menu

Application shell

SaaS dashboard layout

Acme HQ
Ada

Good morning, Ada

$48K
Revenue
+12%
3,841
Users
+5%
284
Sign-ups
-2%
1.8%
Churn
-0.4pp

Recent activity

Alan Turing merged PR #98 - feat: dark-mode tokens 12 min ago
Grace Hopper deployed v2.4.1 to production 1 hr ago
Linus Torvalds opened issue #204 - Segfault in ext4 driver 3 hr ago

Notifications

Notification center panel

Notifications

3 new

Deployment successful

v2.4.1 is live on production. All 42 health checks passing.

2 min

New team member invited

Tim Berners-Lee was invited as Editor by Ada Lovelace.

18 min

Storage at 80% capacity

Your workspace is using 40 GB of 50 GB. Upgrade plan

1 hr
Alan

Alan Turing mentioned you

"Great call today @ada - the UI token approach is exactly right."

3 hr

Payment failed

Visa .... 4242 was declined. Update billing

Yesterday

Kanban board

Sprint Q2-2026 - task board with progress bars & assignees

Backlog 4
Refactor auth module

Replace JWT impl with session cookies + CSRF tokens

High Backend
Audit log export (CSV)

Allow admins to export all events as CSV / JSON

Medium API
Dark-mode screenshot tests
Testing
In Progress 3
Redesign onboarding wizard

Multi-step form with progress indicator and skip option

65% complete
High UX
Stripe webhook handler

Handle checkout.session.completed & invoice.paid events

30% complete
Medium Backend
Mobile responsive nav
Low
Done 5
Token documentation page
CI/CD pipeline setup
WCAG 2.1 audit report
Slack integration webhook
E2E login / checkout tests

Activity feed

Audit log / project timeline

Deployed to production v2.4.1

All 42 checks passed. Zero-downtime rollout.

Grace Hopper . 12 min ago
Pull request merged PR #98

feat: dark-mode tokens & high-contrast palette

Alan Turing . 45 min ago
Build warning 4 warnings

Deprecated API usages in ui-slider.js

CI Bot . 2 hr ago
New member joined Invited

Tim Berners-Lee accepted the invite for Engineering

Ada Lovelace . 4 hr ago
Incident resolved SEV-2

API latency spike in EU-West - root cause patched

Linus Torvalds . Yesterday
Project created

Acme HQ workspace initialised

Mar 1, 2026

E-commerce order summary

Order summary

3 items

Pro Plan

Monthly x 1

$19.00

Priority Support

Add-on x 1

$9.00

Extra Seats (x3)

Team add-on

$15.00
Subtotal$43.00
Discount LAUNCH30 -$12.90
Tax (20%)$6.02
Total due today $36.12

Secured by Stripe . Cancel anytime.

Testimonials

Customer testimonials grid

UI Framework saved us weeks. The token system is genius - we rebranded our whole product in an afternoon by tweaking a handful of CSS variables.

Ada

Ada Lovelace

Lead Designer, Acme HQ

Zero dependencies, zero build step - yet it covers everything I need. Modals, accordions, dropdowns. The ARIA support alone makes it worth it.

Alan

Alan Turing

Staff Engineer, DeepMind

We migrated a legacy Bootstrap 4 app in a single sprint. The grid, utility classes, and component API felt immediately familiar - painless transition.

Grace

Grace Hopper

VP Engineering, USN Labs

Job board

Open positions listing with filters & quick-apply

AC
Senior Front-End Engineer New
Acme Corp . Remote . $120k-$160k Full-time TypeScript React
DM
Staff ML Engineer - Foundational Models
DeepMind . London / Remote . $200k-$280k Full-time Python PyTorch
LF
Principal Kernel Engineer Urgent
Linux Foundation . Remote . $160k-$210k Full-time C Rust
UN
Product Designer - Design Systems
Unicorn Inc . Cambridge / Hybrid . $90k-$120k Contract Figma Design tokens

Empty states

Zero-results & onboarding placeholders

No results found

Try adjusting your search or filters to find what you're looking for.

Workspace is empty

Create your first project and invite your team to get started.

No recent activity

Activity from your team will appear here once they start working.

Auth

Login form

Welcome back

Sign in to your account to continue.

Forgot password?
or continue with

Don't have an account? Sign up free

Messaging

Chat interface - conversation thread with reactions & status

Alan

Alan Turing

Online . Staff Engineer

Hey Ada! Have you seen the new token spec I pushed? I think the --ui-space-* naming convention is really clean.

10:34 AM

Yes! Looks great. The semantic aliases like --ui-space-xs/s/m/l/xl will make it so much easier to onboard new devs.

10:35 AM .

Agreed. I also added a CHANGELOG entry. Want to review the PR before I request merge?

+1 2 🚀 1

10:37 AM

E-commerce

Product detail page

In stock Best seller

Pro Component Kit v3

UI Framework . SKU-4921

$79 $129 -39%
4.3 . 214 reviews

Licence

Quantity

1
30-day returns
Lifetime updates

Comparison

Feature comparison table - plan matrix

Feature Starter Pro Popular Enterprise
Core
Projects 3 Unlimited Unlimited
Storage 1 GB 50 GB 1 TB
Team seats 1 Up to 10 Unlimited
Custom domains
Security & Compliance
Two-factor auth
SSO / SAML
Audit logs
SLA guarantee 99.9% 99.99%
Support
Community forum
Priority support
Dedicated CSM
Price / month $0 $19 Custom

Analytics & Data

Inline in a stat card grid

Revenue

^ 12%

$48,210

Sessions

v 4%

9,841

Signups

^ 27%

1,072

Error rate

v 31%

0.7%

Inline in a table row - trending column

Stock Price Change 7-day trend
NVDA $875.40 ^ 3.2%
AAPL $182.15 v 1.1%
MSFT $415.60 ^ 0.8%
TSLA $198.30 ^ 0.1%

Bar type - inline in a card

Weekly active users

Mon - Sun . last 4 weeks

Wk 1
Wk 2
Wk 3
Wk 4

Server infrastructure monitor - CPU / memory / requests per host

Host Status CPU (24 h) CPU now Memory (24 h) Mem now Req/s (24 h)
web-01 Healthy
45%
71%
web-02 Healthy
29%
58%
db-primary Elevated
94%
86%
cache-01 Down
-
-

SaaS KPI dashboard

MRR

$124,800

^ 8.4% MoM vs $115,100
Churn rate

2.1%

v 0.4 pp target <2%
NPS

+62

v 3 pts 458 responses
Avg LTV

$3,240

^ 11.2% CAC: $210

API endpoint health - latency & error rate per route

Endpoint Method P99 latency Latency trend Error rate Uptime
/api/users GET 48 ms
0.1% 99.98%
/api/orders GET 120 ms
0.3% 99.91%
/api/checkout POST 340 ms
1.8% 98.7%
/api/search GET 22 ms
0.0% 100%
/api/webhooks POST 85 ms
0.5% 99.82%

E-commerce product performance

Product Units sold 30-day trend Revenue Return rate Returns

Pro Headset X4

SKU-1021

 1,840
$221,580 1.2%

Mech Keyboard v2

SKU-2044

 920
$138,000 4.8%

Wireless Mouse M7

SKU-3085

 3,210
$192,600 0.9%

Crypto portfolio tracker - 30-day price & allocation

Portfolio overview

Total value: $31,480 ^ 14.2%

Asset Holdings Price Value P&L 30-day
BTC

Bitcoin

BTC

 0.214 BTC $68,400 $14,637 ^ 22%
ETH

Ethereum

ETH

 3.5 ETH $3,820 $13,370 ^ 9%
$

USD Coin

USDC

 2,400 USDC $1.00 $2,400 0.0%
AVAX

Avalanche

AVAX

 28 AVAX $38.20 $1,069 v 12%

Team productivity leaderboard

Engineering - Q1 2026

Engineer Commits 12-week PRs merged Reviews Review trend

Ada Lovelace

Senior SWE

 284
42 68

Alan Turing

Staff SWE

 198
31 112

Grace Hopper

SWE II

 145
22 38

Linus Torvalds

SWE I

 88
10 14

Ad campaign performance

Campaign Channel Impressions Impr. trend CTR CPC Conversions
Summer Sale 2026 Google 482K
4.2% $0.84 2,024
Brand Awareness Q1 Meta 1.2M
1.8% $1.22 860
Retargeting - Checkout LinkedIn 94K
6.1% $2.40 574
Video Pre-roll YouTube 2.4M
0.6% $3.80 144

IoT sensor dashboard

Sensor node A1

Online

Temperature

22.4 degC

Humidity

58%

Battery

84%

Sensor node B3

Weak signal

Temperature

38.1 degC

Humidity

92%

Battery

12%

Sensor node C5

Online

Temperature

19.0 degC

Humidity

41%

Battery

100%

CI/CD pipeline health - build time & success rate per repo

Repository Branch Avg build Build time trend Success Success trend Last run
ui-framework main 1m 12s
98.4%
passed
api-gateway main 4m 38s
91.2%
passed
ml-pipeline develop 18m 04s
74.8%
failed
docs-site main 0m 48s
100%
passed

Support & helpdesk

Tier 1 Support

Tickets

1,240

Avg resolve

4.2 h

Volume (7d)
CSAT
88%

Tier 2 Engineering

Tickets

218

Avg resolve

28 h

Volume (7d)
CSAT
74%

Customer Success

Tickets

54

Avg resolve

1.8 h

Volume (7d)
CSAT
97%

P&L summary - financial line items with 12-month trend

Line item Jan Feb Mar YTD 12-month trend
Revenue $138K $145K $152K $435K
SaaS subscriptions $98K $103K $108K $309K
Professional services $40K $42K $44K $126K
COGS $28K $29K $31K $88K
Gross profit $110K $116K $121K $347K
OpEx $82K $84K $86K $252K
EBITDA $28K $32K $35K $95K

User retention cohorts - week-on-week retention %

Weekly cohort retention

% of cohort still active each week after signup

Cohort Size W1 W4 W8 W12 Retention curve
Jan 2026 842 78% 52% 38% 32%
Dec 2025 710 74% 46% 32% 26%
Nov 2025 680 70% 42% 28% 20%
Oct 2025 920 80% 55% 41% 36%

Realtime activity feed - messages & events per minute inline

Live system events

Live
payment

Order #92841 confirmed - $149.00

2s ago . via Stripe

signup

grace@lovelace.io joined Pro plan

14s ago . referral

error

500 on POST /api/checkout - timeout

1m 02s ago . web-01

deploy

v2.14.0 deployed to production

3m 18s ago . by ada@lovelace.io

export

CSV export complete - 14,200 rows

5m ago . users.csv