v1 · @idinstudio/ui

Ship polished product UI in days, not months.

The design system behind every Idin Studio product — prop-first, accessible, and themeable. 180+ components on Radix and CVA, ready to drop into your next app.

Browse components View tokens
Monthly active
48.320

+12% vs last month

ActivePendingv1.0
Components
180+

Across 17 categories

Accessibility
WCAG AA

Enforced in CI

Brand themes
3 live

Re-skin via tokens

Styling
100%

Token-driven, zero hardcoded values

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.

Why @idinstudio/ui

A system, not a pile of components

Opinionated where it counts, flexible where you need it.

  • Prop-first API

    No className spaghetti — every variant is a typed prop.

  • Accessible by default

    WCAG AA baseline, keyboard and screen-reader tested.

  • Theme per brand

    Swap one token set to re-skin every screen at once.

  • Built on Radix + CVA

    Production primitives — no behaviour reinvented.

Rich components

Quality you can see

Every primitive is real, accessible, and themed. Here are a few rendered live.

Buttons

Badges

ActivePendingFailedBeta
Heads up
Alerts, badges, and buttons all read from the same token set.

Data table

ComponentCategoryStatus
ButtonPrimitivesStable
DataTableDataStable
HeroBannerMarketingv1.0
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, and contribution — the docs that keep it coherent.

  • Tokens

    The single source of truth for color, type, and shape.

    Open

  • Voice & content

    How we write labels, errors, and empty states.

    Open

  • Accessibility

    Our WCAG AA baseline and testing checklist.

    Open

  • Contribute

    Add a component and ship it the right way.

    Open

  • Showcase demos

    Real products built on the same primitives.

    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.

  • Inviboo

    A wedding-invitation product, themed purple and teal.

    Open demo

  • Efisiensi

    A fleet-operations dashboard for intercity bus operators, themed in brand orange.

    Open demo

  • Sample builds

    POS, ticketing, and legal screens on the same primitives.

    Open demos

Start building with the system

Browse the components, copy what you need, and ship consistent UI from day one.

Browse components View on GitHub