Buttons
Clear hierarchy and tactile feedback.
Alignment preview
Full interactive showcase · Version 1.2 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.
36 families
500 icons
Solid + Liquid
Ready for ambitious apps
Foundation
Essential pieces. Consistent behavior.
Every component shares the same design tokens, focus language, density, and motion grammar.
01
Fields
Native inputs and a fully custom select menu.
Role
Teams · multi-select
Choice controls
Accessible browser-native selection.
Switches
Immediate binary settings.
Segmented control
Compact mutually exclusive choices.
Cards
Surfaces with restrained depth.
Badges
Small, semantic status signals.
In reviewPublishedAttentionBlockedLabel onlyOnline
Tabs
Keyboard navigation and animated context changes.
Everything is on track. The first prototype is ready for review.
Eight updates were published today by three collaborators.
Patrice, Maya, and Alex have access to this project.
Up and Down arrows move between vertical tabs.
The list collapses to horizontal on small screens.
Accordion
Details when they are needed.
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.
Dialog
Native modal semantics, refined motion.
Drawer
Focused tasks without losing context.
Popover menu
The native top layer, with no positioning library.
Tooltips
Helpful labels for compact actions.
Toasts
Polite, dismissible feedback.
Progress & skeleton
Clear waiting states with reduced-motion support.
Generating interface…Loading
78%
Application patterns
Built for better products.
Tables, navigation, validation, search, and app chrome — the pieces admin panels, dashboards, and CRUD flows need.
Table
Semantic data tables with sortable headers, row selection, and a bulk-action bar.
| Status | |||
|---|---|---|---|
| Maya Chen | Designer | Active | |
| Alex Rivera | Engineer | Away | |
| Sam Okonkwo | Product | Active | |
| Total members | 3 | ||
Pagination
Server-friendly page links with current-page semantics.
Alerts
Persistent inline messages for billing, policy, and form feedback.
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.
Form errors
Field-level errors, summaries, and grouped choices.
Fix 2 issues before saving
Breadcrumbs
Wayfinding for nested settings and object detail pages.
Combobox
Filterable listbox for searchable selection.
Maya Chen
Alex Rivera
Sam Okonkwo
No matches
Empty state
Clear next steps when a list or table has no data.
No projects yet
Create your first project to invite collaborators and publish updates.
Avatars
Initials and image avatars for people and assignees.
AR
MCARSO+5
List
Structured rows for activity feeds and settings.
- Agent summarized 14 responsesCustomer research · Project Atlas
- Maya published onboardingDesign · A simpler web
- Report published
- Budget updated
- Plan
- Studio
- Renewal
- August 24
- Export readyCustomer report is ready.
File upload
Accessible file picker with live filename feedback.
Date & time
Custom pickers with rounded popovers, circular day selection, and date ranges.
Due date
Publish window
Reminder
Reminder
Confirm dialog
Destructive confirmations with native modal semantics.
Page header
Title, description, and primary actions for each view.
Billing
Manage your plan, payment method, and invoices.
App shell
Sidebar navigation with collapse on desktop and a drawer on small screens.
Main content lives here — tables, forms, and agent surfaces compose naturally inside the shell.
Chips
Removable filters and compact token labels.
Design
Published
Search
Search input with clear control and native semantics.
Tags
Add and remove token values with Enter or comma.
Topics
Stepper
A short wizard with current, complete, and pending steps.
Create the owner account for this workspace.
Name the workspace and choose a default region.
Invite teammates after the workspace exists.
Header / Footer
Horizontal navigation and a semantic footer for the page frame.
Command palette
Query-driven actions with a global ⌘ K shortcut.
Chart
Token-drawn SVG marks for dashboards — sparkline, bar, line, area, and donut.
Carousel & lightbox
Momentum snap-scrolling slides, an iOS-style page control, and a gallery grid that opens a fullscreen zoomable viewer.
-
Aurora lamp — studio shot -
Detail — woven shade -
In the wild — reading corner -
Packaging — unboxing -
At dusk — warm dimming
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.
Rich text
Contenteditable field with formatting toolbar and safe HTML sync for forms.
Board
Kanban columns with pointer, touch, and keyboard drag-and-drop. Drops emit smart:board and smart:move.
To do
2Review ticket
Update FAQ
Done
1Ship release
Conversation
Messaging list and composer for support chat surfaces.
Support chat
Agent onlineHi, I need help resetting my password.
Sure — I can send a reset link now.
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.
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.
Motion
Opt-in entrance, exit, and attention cues—token-driven and reduced-motion safe.
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">
Typography
Scale, tone, weight, and wrapping as single classes.
Display heading
h2Section heading
h3Card heading
h4Supporting heading
h5Eyebrow heading
h6Launch week
.smart-text-xl · .smart-font-boldA calmer kind of progress
.smart-text-lg · .smart-font-semiboldBody copy with secondary, success, warning, and danger tones.
.smart-text-baseconst surface = light-dark("#f5f5f7", "#0b0b0d");
.smart-monorelease-notes-smartwebUI-1.0.3-contract-hardening-and-maintenance.pdf
.smart-truncateSpacing & gaps
Padding, margin, and gap on the token scale — logical axes, compact density included.
.smart-p-1.smart-p-3.smart-p-5.smart-gap-1.smart-gap-3.smart-gap-5Logical sides: .smart-mt-4 .smart-ms-3 .smart-px-8
Widths & spans
Exact fraction utilities and fixed grids that collapse on small screens.
.smart-span-2
1fr
1fr
.smart-span-2
Corners & elevation
Radius, border, and shadow steps from the token scale.
sm
md
lg
full
bordered
elevated-1
elevated-2
Control sizing
One local override aligns buttons, inputs, and selects at any size.
Media ratios
Aspect-ratio boxes — children cover by default; object-fit utilities escape the crop.
.smart-object-contain keeps the logo wholeScroll panes
Contained scrolling with thin scrollbars; pair with pane-fill, pane-tall, or pane-screen for app layouts.
- Agent summarized 14 responsesCustomer research · Atlas
- Maya published onboardingDesign · A simpler web
- Alex merged the surface patchEngineering · Atlas
- Sam updated the roadmapProduct · Atlas
- Agent drafted release notesWriting · 1.0.3
- Maya commented on billingDesign · A simpler web
- Alex shipped the table sortEngineering · Atlas
- Sam opened the pricing reviewProduct · Atlas
Responsive visibility
Show and hide by breakpoint — resize the window.
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.
The same markup becomes a clean paper document.
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
Live events24Receiving now
Active agents3All healthy
Response time42ms 8ms
MMaya published the onboarding flow
AIAgent summarized 14 customer responses
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 showcase. SupportEngine 3 is the first example now live, and we’d love to see what you create next. Olevator and MacExpert websites are also powered by smartwebUI with a custom theme.
