Full interactive showcase · Version 1.5.0 FREE

Library showcase.

Explore every smartwebUI component, application pattern, icon, and utility in a working interface. Change the accent, material, radius, and density here, the entire showcase responds instantly.

Components Patterns Icons Utilities

50 families 516 icons Solid + Liquid + Minimal Ready for ambitious apps

Style the showcase

Every control updates the page live.

Live

Accent

Material

Solid Liquid Minimal

Same markup — global material tokens for Solid, Liquid, or Minimal.

Transparency 56%

Radius 10px

Compact --smart-density

Foundation

Essential pieces. Consistent behavior.

Every component shares the same design tokens, focus language, density, and motion grammar.

Alignment preview

WorkspaceThis appears in your shared URL. Organization IDDisabled fields retain their value but cannot be edited. Find a teammate BudgetLocalized display; the form value stays canonical. PhoneE.164-style submission; validate with your phone service. Invoice referencePartial mask with caret-safe editing. Password New passwordStrength is scored as you type. Verification code

Auto-advance, paste distribution, smart:otp events. Seats

Steppers disable at min and max. Share link Project summary

Role

Teams · multi-select

Numeric range

1500 – 6500

Rating

Accent · color#5b5cf0

Weekly summaryA concise report every Monday. Team workspace Personal workspace Unavailable option

Live collaboration

Public preview

Managed by organization

Overview Activity Insights

In reviewPublishedAttentionBlockedLabel onlyOnline

Everything is on track. The first prototype is ready for review.

Up and Down arrows move between vertical tabs.

Does it need JavaScript?

Only interactive enhancements do. The styling and native controls work without it.

Can PHP render it?

Yes. smartwebUI consumes ordinary HTML from any server stack.

Is there a build step?

No compiler, bundler, or package manager is required.

Generating interface…

42%

78%

Application patterns

Built for better products.

Tables, navigation, validation, search, and app chrome — the pieces admin panels, dashboards, and CRUD flows need.

Team members
Select all rows			Status
Select Maya Chen	Maya Chen	Designer	Active
Select Alex Rivera	Alex Rivera	Engineer	Away
Select Sam Okonkwo	Sam Okonkwo	Product	Active
	Total members		3

Trial ending soon

Your workspace trial ends in 3 days. Add billing to keep publishing.

Maintenance window

Exports may be delayed tonight between 11 PM and 1 AM.

Changes saved

Your workspace settings are now live.

Payment failed

Update your billing method before publishing again.

EmailEnter a valid email address.

Plan

TeamPersonal

Assignee

No projects yet

Create your first project to invite collaborators and publish updates.

MCARSO+5

Agent summarized 14 responsesCustomer research · Project Atlas9:38 AM
Maya published onboardingDesign · A simpler webYesterday

Design reviewDrag the handle or use the keyboard
Quality assuranceOrder is reflected in hidden form inputs

Report published2 min ago
Budget updatedYesterday

Plan: Studio
Renewal: August 24

Export readyCustomer report is ready.Now

Import CSVChoose fileNo file chosen Attachment with drop zoneChoose file

launch-brief.pdfPDF · 1.8 MB

Due date

Publish window

Reminder

Main content lives here — tables, forms, and agent surfaces compose naturally inside the shell.

Design Published

Topics

Design Published

Create the owner account for this workspace.

Monthly recurring revenue $48.2k 12.4% this month

Monthly revenue

Active customers

Won versus pipeline

Plan mix

Signups by channel

AI workload by compute class

Agent requests and latency

Model latency vs task success

GPU memory pressure

Viewing 1 of 5 — swipe, use the arrows, or press the dot buttons. Open the viewer with the expand button; zoom with a double tap, pinch, ⌘ scroll, or the zoom button.

Thanks for reaching out — we can help with that.

Review ticket

Due today

Update FAQ

Low priority

Ship release

Completed

Hi, I need help resetting my password.

Guest · 2:14 PM

Sure — I can send a reset link now.

You · 2:15 PM

MapKit-ready preview

Product studios

Locations stay readable and actionable without relying on the interactive map.

CupertinoCalifornia
San FranciscoCalifornia
AustinTexas

Customer accounts with editable plan and owner columns
Select all	Account	Plan	Owner	MRR

Select Northstar	Northstar	Enterprise	Maya Chen	$8,400
Select Atlas	Atlas	Enterprise	Sam Rivera	$6,200

Select Acme Studio	Acme Studio	Pro	Alex Morgan	$1,900
Select Orbit	Orbit	Pro	Pat Lee	$1,450

Double-click an editable cell or focus it and press Enter/F2. Drag header handles, use Alt + Left/Right, resize by pointer or keyboard, and click the pin control to cycle pinning.

Product film

smartwebUI StudioDesign professional interfaces, fasterA product workflow from foundations to production

Episode 12 · 24 minDesign systems for real productsField Notes with Maya Chen

Now playing

Design systems for real productssmartwebUI Sessions

Keyboard: Space/K play, Left/Right seek, M mute, C captions, F fullscreen, and P Picture in Picture. The supplied product film is delivered here as a browser-ready derivative; the original MOV remains untouched.

README.md

Use arrow keys on the separator; Shift changes by 10%.

Status: Active Region: North America

500+ symbols · no npm

One quiet icon language, at any size.

A curated Lucide-based SVG sprite inherits color, stroke, and direction from smartwebUI. Search the catalog, choose a size, and copy the stable icon name.

Find an icon Size 28px Weight 2

Loading icon catalog…

Selected icon

sparkles

Loading specification…

Size: 28px
Stroke: 2
View box: 24 × 24

<svg class="smart-icon" style="--smart-icon-size: 28px; --smart-icon-stroke: 2" aria-hidden="true">
  <use href="smartwebui-icons.svg#smart-icon-sparkles"></use>
</svg>

Utilities

Small classes that compose anything.

Single-purpose utilities live in the last cascade layer — they layer over any component, stay on the token scale, and keep responding to theme, density, and material changes. See the full utility reference.

Fade up applied. Add .smart-animate plus an effect class to any element.

<img class="smart-animate smart-enter-fade-up" src="logo.png" alt="Brand">

Display heading

h2

Section heading

h3

Card heading

h4

Supporting heading

h5

Eyebrow heading

h6

Launch week.smart-text-xl · .smart-font-bold

A calmer kind of progress.smart-text-lg · .smart-font-semibold

Body copy with secondary, success, warning, and danger tones..smart-text-base

const surface = light-dark("#f5f5f7", "#0b0b0d");.smart-mono

release-notes-smartwebUI-1.0.3-contract-hardening-and-maintenance.pdf.smart-truncate

.smart-p-1

.smart-p-3

.smart-p-5

.smart-gap-1

.smart-gap-3

.smart-gap-5

Logical sides: .smart-mt-4 .smart-ms-3 .smart-px-8

.smart-w-25

.smart-w-33

.smart-w-50

.smart-w-66

.smart-w-75

.smart-span-2

1fr

.smart-span-2

full

bordered

elevated-1

elevated-2

16:9 · .smart-object-contain keeps the logo whole

4:3 · cover by default fills the box

Agent summarized 14 responsesCustomer research · Atlas9:38 AM
Maya published onboardingDesign · A simpler web9:42 AM
Alex merged the surface patchEngineering · Atlas9:15 AM
Sam updated the roadmapProduct · Atlas8:58 AM
Agent drafted release notesWriting · 1.0.38:31 AM
Maya commented on billingDesign · A simpler web8:04 AM
Alex shipped the table sortEngineering · Atlas7:47 AM
Sam opened the pricing reviewProduct · Atlas7:20 AM

Desktop only · .smart-hidden-mobile Mobile only · .smart-visible-mobile

The first badge hides under 50rem; the second appears only there. .smart-invisible hides without removing layout.

Invoice AT-1026Aug 19, 2026

Workspace plan$24.00

Agent add-on$12.00

Total due$36.00

Live by default

Update the interface, not the page.

Server events and AI agents can replace stable regions while smartwebUI handles the visual transition and feedback. For agent-composed UI, use the agent demo.

Operations overview

A simulated real-time workspace

Stream connected

Live events24Receiving now

Active agents3All healthy

Response time42ms 8ms

MMaya published the onboarding flow9:42 AM

AIAgent summarized 14 customer responses9:38 AM

No compilation

Your design system is a handful of variables.

Override one token in ordinary CSS and every relevant component responds immediately.

/* Loaded after smartwebui.css */
:root {
  --smart-accent: #087f72;
  --smart-radius-control: 999px;
  --smart-radius-surface: 24px;
  --smart-font-sans: "Avenir Next", sans-serif;
  --smart-motion-duration: 180ms;
  --smart-control-height: 2.75rem;
}

Built with smartwebUI

Tell us what you build.

We’re collecting real smartwebUI projects for a future extended showcase. SupportEngine 3 is the first major project using smartwebUI as a core, and we’d love to see what you create next. Olevator and mCloud websites are also examples of good implementations.

SupportEngine 3 Olevator mCloud Compute

COMING SOON -> AppSyntax Web Apps Builder. Stay tuned.

Share your project

Choose your starting point

The design system is free. Go further when you need to.

Build with the complete smartwebUI foundation at no cost, then add production-ready blocks, the Figma library, or direct product support.

FREEfor personal and commercial projects

50 production component families
Solid, Liquid, and Minimal materials
Light, dark, density, and theme tokens
JavaScript and TypeScript support

Download

49 dollarsone-time purchase

45 copy-ready interface patterns
Framework-neutral semantic HTML
Responsive Solid, Liquid, and Minimal designs
Ready to adapt to your product

Get the Blocks library

69 dollarsone-time purchase

Component sets covering all 50 web families
Light and dark local variables
Auto layout and controlled variants
Starter-plan-compatible .fig file

Get the Figma library

Let’s talkscoped around your product

Product and interface design
Design-system extensions
Implementation guidance
Focused delivery support

Contact