Composed
Higher-level cards and patterns built from primitives + layouts. Every sample below is exhaustive — each labeled row shows every variant, severity, size, and state.
PageHeader
Application page header with title, description, meta, actions, tabs. Booleans sticky +.
Workspace settings
Billing, members, and integrations.
Workspace settings
Billing, members, and integrations.
Inset header
inset adds the header's own horizontal gutters — for standalone use against a bare edge. Default is flush (rata kiri), so the title aligns with an already-padded container's content.
<PageHeader title="Workspace settings" description="Billing and members." actions={<Button>Save</Button>} />SectionHeader
Eyebrow + title + description + actions. Alignments and content widths.
Simple, predictable pricing
Pay for the seats you need. Cancel anytime.
Everything you need to ship
A complete toolkit for founders who need production-grade software in weeks.
Content width — narrow
The description column is capped at the width preset; narrow reads tightest, full spans the container.
Content width — medium
The description column is capped at the width preset; narrow reads tightest, full spans the container.
Content width — wide
The description column is capped at the width preset; narrow reads tightest, full spans the container.
Content width — full
The description column is capped at the width preset; narrow reads tightest, full spans the container.
<SectionHeader eyebrow="Pricing" title="Simple pricing" align="center" width="medium" />MetricCard
KPI card with value, unit, delta, icon, and loading state. Delta direction drives the semantic colour.
<MetricCard label="Active users" value="12,483" delta={{ value: 12.4, direction: "up", period: "vs last week" }} icon={<Users />} />StatCard
Large single-stat display. Every severity accent, every size, both alignments.
past 90 days
past 90 days
past 90 days
past 90 days
past 90 days
past 90 days
2,450 transactions
2,450 transactions
2,450 transactions
in the last hour
in the last hour
<StatCard label="Uptime" value="99.98%" description="past 90 days" severity="success" />FeatureCard
Marketing feature tile. Every icon tone, both orientations, interactive + link.
primary tone
Fixed scope, fixed price. A real first paying customer by sprint four.
secondary tone
Fixed scope, fixed price. A real first paying customer by sprint four.
neutral tone
Fixed scope, fixed price. A real first paying customer by sprint four.
success tone
Fixed scope, fixed price. A real first paying customer by sprint four.
info tone
Fixed scope, fixed price. A real first paying customer by sprint four.
warning tone
Fixed scope, fixed price. A real first paying customer by sprint four.
danger tone
Fixed scope, fixed price. A real first paying customer by sprint four.
Vertical
Icon stacked above the copy.
Horizontal
Icon beside the copy.
<FeatureCard icon={<Rocket />} iconTone="primary" title="Six-week MVP" description="Fixed scope, fixed price." />ServiceCard
Agency service tile with bullet deliverables. Default vs featured.
Internal tools
Replace your spreadsheets
Typed, opinionated internal tools for ops, finance, and compliance.
- Custom dashboards
- Admin consoles
- Data pipelines
MVP Launch
Zero to production in 6 weeks
We design, build, and deploy your first customer-ready product.
- Full product design
- Frontend + backend
- Deployed on modern infra
<ServiceCard icon={<Rocket />} title="MVP Launch" bullets={[...]} cta={<Button>Book a call</Button>} featured />TestimonialCard
Customer quote card. Both variants and every rating — seeded with Sundanese sample people.
Idin Studio shipped our first paying product in four weeks. No agency we've worked with comes close.
Engineers who design. Designers who ship. Honest feedback, honest timelines. Rare in our industry.
Rated 1 of 5 — a representative review from the team.
Rated 2 of 5 — a representative review from the team.
Rated 3 of 5 — a representative review from the team.
Rated 4 of 5 — a representative review from the team.
Rated 5 of 5 — a representative review from the team.
<TestimonialCard quote="…" author={{ name, role, initials }} rating={5} variant="featured" />PricingCard
SaaS pricing tier with included / excluded features. Highlighted + badge, and every size.
Starter
For solo operators
- Included: 1 workspace
- Included: 3 team members
- Included: Community support
- Not included: SSO + SCIM
Team
For growing teams
- Included: Unlimited workspaces
- Included: Unlimited members
- Included: Priority support
- Not included: SSO + SCIM
Enterprise
For regulated industries
Billed annually
- Included: Everything in Team
- Included: SSO + SCIM
- Included: Dedicated CSM
- Included: Custom SLA
Size sm
For growing teams
- Included: Unlimited workspaces
- Included: Priority support
- Not included: SSO + SCIM
Size md
For growing teams
- Included: Unlimited workspaces
- Included: Priority support
- Not included: SSO + SCIM
Size lg
For growing teams
- Included: Unlimited workspaces
- Included: Priority support
- Not included: SSO + SCIM
<PricingCard tier="Team" price={{ amount: 49, currency: "$", period: "/mo" }} highlighted badge="Most popular" features={[...]} cta={<Button>Start</Button>} />EmptyState
Zero-data placeholder with value-forward copy. Every size, and with / without actions.
No projects yet
Create your first project to track tasks.
No projects yet
Create your first project to track tasks.
No projects yet
Create your first project to track tasks.
No matches found
Try a broader search, or create a new project.
<EmptyState icon={<Inbox />} title="No projects yet" description="…" primaryAction={<Button>Create project</Button>} />ErrorState
Error placeholder with retry. Every severity, plus a code and retry action.
danger error
Check your connection and try again.
warning error
Check your connection and try again.
neutral error
Check your connection and try again.
Couldn't load projects
Check your connection and try again. If the problem persists, contact support.
ERR_NETWORK_TIMEOUT<ErrorState severity="danger" title="Couldn't load projects" retry={() => {}} code="ERR_NETWORK_TIMEOUT" />