Azlan AI
Halo! Aku Azlan AI. Sebutkan layar yang mau kamu bangun, lalu aku rakit dari komponen design system — tanpa slop.
v1 · @idinstudio/ui · MCP-ready
Ship polished product UI in days, not months.
A token-driven, accessible, AI-native design system. 190+ components on Radix and CVA, an MCP that assembles correct UI without the slop, and one token set that re-skins everything per brand.
Demo simulasi — bukan AI sungguhan.Buka board AI Agent lengkap
Components
190+Across 17 categories
Accessibility
WCAG AAEnforced in CI
Brand themes
3 liveRe-skin via tokens
Styling
100%Token-driven, zero hardcoded
Dogfooded across every Idin Studio product
InvibooDigital Invitation & Event Collaboration
EfisiensiFleet Monitoring AI
TaskboardOps console
NawafilIslamic mini-app
RukunEstate billing
Built for the modern web
Decisions already made, so your AI can't get them wrong
Not a pile of components. Severity, variant, spacing, and accessibility are encoded in tokens, enforced in CI, and served over MCP — so anything assembled from the system inherits the correctness.
01
An MCP built in — AI without the slop
Every component ships pre-validated: which severity, which variant, which layout per viewport, served to any agent over MCP. The AI composes correct, on-brand UI instead of guessing.
02
One token set, any brand
Swap a single token set to re-skin every screen at once — light or dark, contrast-checked both ways. Nothing about the markup changes.
03
Prop-first API, zero className
Every visual choice is a typed prop. No className spaghetti, no arbitrary values — the ESLint plugin makes it impossible to drift.
04
Accessible, gated in CI
WCAG 2.1 AA contrast, keyboard, and screen-reader contracts — verified on every commit, not left to good intentions.
05
Density that actually reflows
Compact, regular, or spacious — one attribute reflows spacing across the whole system through the token layer.
Theme customization
One set of primitives, any brand
The same card, button, and stat — re-skinned three ways by swapping a token set. Nothing about the markup changes; only the tokens do.
Purple · flat · sharp
Idin Studio
Active users
2.480+8% this week
Live
Purple · teal · soft
Inviboo
Active users
2.480+8% this week
Live
Orange · tight
Efisiensi
Active users
2.480+8% this week
Live
Tip: use the theme switcher in the nav to re-skin the whole page live.
Foundations
Start with the foundations
Tokens, primitives, and layout — the base every component is built on.
Components
Browse every category
Overlays
Dialogs, sheets, and popovers.
Open
Forms
Pickers, fields, and inputs.
Open
Navigation
Tabs, menus, and breadcrumbs.
Open
Data display
Tables, lists, and timelines.
Open
Composed
Cards, headers, and stats.
Open
Feedback
Banners, alerts, and feeds.
Open
Charts
Sparklines, gauges, and trends.
Open
Media
Images, galleries, and embeds.
Open
Marketing
Heroes, CTAs, and footers.
Open
Content
Prose, callouts, and code.
Open
Domain
Cards for real apps.
Open
Flows
Auth, checkout, and billing.
Open
Shells
Dashboard, docs, and auth.
Open
Settings
Rows for config screens.
Open
Ecosystem
Everything around the system
Tokens, voice, accessibility, MCP, and contribution — the docs that keep it coherent.
MCP for AI
The context server that makes agents build slop-free UI.
Open
Tokens
The single source of truth for color, type, and shape.
Open
Accessibility
Our WCAG AA baseline and testing checklist.
Open
Voice & content
How we write labels, errors, and empty states.
Open
Contribute
Add a component and ship it the right way.
Open
GitHub
Source, issues, and releases.
Open
Showcase
Built with @idinstudio/ui
One set of primitives, three brand themes — from a wedding product to a fleet dashboard.
Start building with the system
Browse the components, copy what you need, and ship consistent UI from day one.