Compositions
Blocks
Whole sections put together from the registry — sign-in cards, dashboard headers, pricing, toolbars. Copy the code, add the components it uses with npx @kinetixui/cli add …, and adjust. All 20 carry real source for React, Angular, SwiftUI, Jetpack Compose and Flutter — each one written in its own platform's idiom and compiled there, not translated from the React version.
Sign in
Card + inputs + a primary and a provider button.
Available for: React · Angular · SwiftUI · Jetpack Compose · Flutter
Stat cards
A row of Metric cards for a dashboard header.
Available for: React · Angular · SwiftUI · Jetpack Compose · Flutter
Revenue
$45,231
12.5%Active users
2,420
8.1%Churn
1.2%
0.3%Pricing tier
Card with a feature list and a CTA.
Available for: React · Angular · SwiftUI · Jetpack Compose · Flutter
$29/mo
Table + toolbar
Search, a filter Select, an action, and a Table.
Available for: React · Angular · SwiftUI · Jetpack Compose · Flutter
| Invoice | Status | Amount |
|---|---|---|
| INV-001 | Paid | $250.00 |
| INV-002 | Pending | $150.00 |
| INV-003 | Paid | $350.00 |
Settings list
List rows with a Switch per item.
Available for: React · Angular · SwiftUI · Jetpack Compose · Flutter
Team members
Avatar, name/role, and a per-row action.
Available for: React · Angular · SwiftUI · Jetpack Compose · Flutter
Empty state
Centered icon, heading, description, and a CTA.
Available for: React · Angular · SwiftUI · Jetpack Compose · Flutter
No messages yet
When someone messages you, it'll show up here.
Alert stack
Default, destructive, and success variants.
Available for: React · Angular · SwiftUI · Jetpack Compose · Flutter
Testimonial
Quote with an attributed author.
Available for: React · Angular · SwiftUI · Jetpack Compose · Flutter
“Good design is as little design as possible.”
Dieter Rams
Industrial Designer
Create account
Sign-up card with a password strength meter that names what is missing.
Available for: React · Angular · SwiftUI · Jetpack Compose · Flutter
Still needs 12 characters, an upper and a lower case letter, a number, a symbol.
Profile form
Avatar, name, bio and a radio group for who can see it.
Available for: React · Angular · SwiftUI · Jetpack Compose · Flutter
JPG or PNG, up to 2 MB.
Shown under your name. Plain text.
Account security
Two-factor, recovery codes and the sessions you can end.
Available for: React · Angular · SwiftUI · Jetpack Compose · Flutter
Active sessions
- MacBook ProChrome · Berlin · nowThis device
- iPhone 15Safari · Berlin · 2 hours ago
Onboarding checklist
Setup steps with progress counted in steps, not percent.
Available for: React · Angular · SwiftUI · Jetpack Compose · Flutter
Editor toolbar
Mode, formatting marks and their keyboard shortcuts.
Available for: React · Angular · SwiftUI · Jetpack Compose · Flutter
Bold⌘BItalic⌘ICode⌘E
Filter panel
Removable tags, a price slider and the filters behind them.
Available for: React · Angular · SwiftUI · Jetpack Compose · Flutter
- In stock
Dashboard tabs
Tabbed metrics with the chart box reserved before it loads.
Available for: React · Angular · SwiftUI · Jetpack Compose · Flutter
Sessions
48,271
+12.4%Sign-ups
1,204
+3.1%Churn
1.8%
−0.4%Loading state
Skeletons shaped like the content, and a region that says so.
Available for: React · Angular · SwiftUI · Jetpack Compose · Flutter
Order summary
Line items with steppers, a promo code and the totals.
Available for: React · Angular · SwiftUI · Jetpack Compose · Flutter
- Kinetix T-shirt$28.00 each
- Sticker pack$6.00 each
- Subtotal
- $62.00
- Shipping
- Free
- Total
- $62.00
Comment box
Avatar, Textarea, and a submit action.
Available for: React · Angular · SwiftUI · Jetpack Compose · Flutter