Default Card
A subtle border and light background define the card boundaries.
↑↓ Navigate
↵ Select
esc Close
Components
Semantic, accessible UI components built on the Fluid foundation. Each component respects user preferences and adapts to its container.
Buttons
Buttons invite interaction with clear affordance and gentle feedback.
Variants
Sizes
States & Modifiers
Button Group
Cards
Cards group related content with subtle elevation and container-query responsiveness.
Variants
Elevated Card
Floating appearance with shadow for emphasis.
Outlined Card
Border emphasis without background fill.
Interactive Cards
Clickable Card
The entire card is a link. Hover and focus states guide interaction.
Interactive Elevated
Click anywhere on this card to trigger an action.
Card with Media
Serene Landscapes
Finding peace in nature's quiet corners.
Horizontal Layout
Cards adapt to wider containers with horizontal media placement.
Stat Cards
2,847
Active Users
99.9%
Uptime
4.8
User Rating
Testimonial Cards
This framework changed how we think about theming. Runtime preset switching with zero rebuilds is exactly what we needed for our multi-tenant SaaS.
Lead Engineer, CloudSync
The semantic HTML approach means our designers can prototype directly in the browser. No more fighting with class names.
Design Director, StudioLab
Pricing Cards
Starter
$9/mo
- ✓ 5 projects
- ✓ 10GB storage
- ✓ Email support
Pro
$29/mo
- ✓ Unlimited projects
- ✓ 100GB storage
- ✓ Priority support
- ✓ Custom themes
Enterprise
$99/mo
- ✓ Everything in Pro
- ✓ SSO & SAML
- ✓ Dedicated support
- ✓ SLA guarantee
Form Components
Forms that feel welcoming, with clear feedback and graceful validation.
Input Group
https://
Checkboxes
Radio Buttons
Toggle Switches
Form Layout
Status & Progress
A comprehensive system for displaying scores, progress, and status. Uses data-status as the single source of truth for all visual styling.
Score Legend / Thresholds
≥80%
Good
60-79%
Moderate
<60%
Needs Attention
Progress Bars by Status
Compliance Score
23
/
26
· 88%
Documentation Coverage
17
/
27
· 63%
Security Checks
4
/
10
· 40%
Pending Review
—
Progress Bar Sizes
Small
75%
Default
75%
Large
75%
Extra Large
75%
Progress with Threshold Markers
Overall Score
92%
Progress Score
72%
Risk Assessment
45%
Status Badges
Good
Moderate
Severe
Neutral
88%
63%
40%
Passing
Review
Failing
Active
Pending
Error
Badge Sizes
Small
Default
Large
Fraction Display
23
/
26
17
/
27
4
/
10
Status Cards
Compliance
Passing
88%
23 of 26 requirements met
Documentation
Review
63%
17 of 27 items documented
Security
Failing
40%
4 of 10 checks passing
Inline Status in Context
API Response Time
142ms
Memory Usage
78%
Error Rate
12.4%
Simple Progress (Percentage Only)
Upload Complete
100%
Processing...
67%
Low Storage
23%
Minimal Progress (Track Only)
Accordion
Collapsible content sections built on native <details>/<summary>. Zero JavaScript required.
Default Accordion
What is the Fluid Framework?
A physics-based CSS framework that applies fluid dynamics principles to web design. Unlike arbitrary animation timings, we use Reynolds numbers to create natural, cohesive motion systems.
Do I need a build step?
No. The Fluid Framework works directly in browsers with zero build configuration. Just link the CSS and start building with semantic HTML.
How does the motion system work?
Each motion preset (Still, Serene, Stream, Flowing, Cascade, Rapids, Tsunami) defines a complete set of timing, easing, and layout tokens. Changing one attribute transforms the entire interface feel.
Separated Variant
Elevated card-style items
Each accordion item appears as a separate elevated card with its own shadow and border radius.
Spaced apart for visual clarity
The gap between items makes it clear that each section is independent.
Adapts to motion themes
Border radius, shadows, and transitions automatically adjust based on the active motion preset.
Bordered Variant (Compact)
Compact bordered style
Smaller padding for tighter UI layouts.
Card-like borders
Each item has a full border like a contained card.
Alerts & Toasts
Inline alerts for contextual feedback and toast notifications for transient messages.
Alert Statuses
Information
A new version of the framework is available. Check the release notes for details.
Success
Your theme settings have been saved successfully.
Warning
OKLCH colors require modern browser support. Consider adding fallbacks for older browsers.
Error
Failed to load the custom theme file. Please check the file path and try again.
Filled Variant
Changes deployed to production.
Build failed. Check the console for errors.
Outline Variant
This component uses CSS cascade layers for clean specificity management.
Container queries are not supported in browsers older than 2023.
Toast Preview (Static)
Saved
Your changes are live.
Connection Lost
Retrying in 5 seconds...
Tables
Responsive tables with horizontal scroll, sortable headers, and mobile stacking.
Default Table with Hover
| Component | Status | Version | Size |
|---|---|---|---|
| Button | Stable | 0.2.0 | 2.4 KB |
| Card | Stable | 0.2.0 | 3.1 KB |
| Modal | Stable | 0.3.0 | 2.8 KB |
| Accordion | Stable | 0.3.0 | 1.9 KB |
| Tooltip | Stable | 0.3.0 | 1.2 KB |
Striped Table
| Motion Preset | Character | Scale | Base Duration |
|---|---|---|---|
| Still | No animation | 0 | 0ms |
| Serene | Ken Burns, meditative | 0.3 | 1000ms |
| Flowing | Balanced, organic | 1.0 | 467ms |
| Cascade | Bouncy, playful | 1.2 | 350ms |
| Rapids | Energetic, spring | 1.5 | 450ms |
| Tsunami | Dramatic, bold | 2.0 | 600ms |
Compact Bordered Table
| Token | Light | Dark |
|---|---|---|
--color-text |
gray-15 | gray-90 |
--color-background |
white | gray-10 |
--color-surface |
gray-98 | gray-15 |
--color-border |
gray-85 | gray-25 |
Tooltips
CSS-only tooltips via data-tooltip attribute. No JavaScript needed.
Tooltip Positions
Tooltips on Various Elements
Hover this text
Link with tooltip
Modal / Dialog
Built on the native <dialog> element. Accessible, supports drawers, and adapts to motion themes.
Modal Triggers
Avatars
User profile images with sizes, status indicators, initials fallback, and group stacking.
Sizes
Status Indicators
Shapes
Avatar Group
+5
Loading & Skeletons
Spinners for active loading and skeleton screens for content placeholders.
Spinner Sizes
Dots Spinner
Loading data...
Skeleton Elements
Skeleton Card
Badges
Small labels for status, categories, counts, and metadata. Works standalone or inside other components.
Default & Variants
Default
Filled
Outline
Muted
Status Colors
Active
Pending
Failed
Info
Active
Pending
Failed
Info
Sizes
Small
Default
Large
With Dot & Count
Online
Away
Offline
3
12
99+
Dropdowns
Standalone dropdown menus for actions, selections, and context menus.
Basic Dropdown
With Shortcuts & Descriptions