DUKU LabsDesign engineering with AI

DUKU Labs gives developers and coding agents access to beautifully engineered React components, expressive motion and complete product workflows. Connect through MCP, describe what you are building and let Claude Code or Codex discover, customise and implement the right interface directly in your codebase.

Real products · every state · yours to customise

OPTION CHAIN

Animated pixel-art tour of DUKU Labs components: an option chain, a KYC journey, live patient vitals, a crypto swap route and an agent run.

The whole product, drawn in pixels — option chains, KYC, vitals, swaps, agents

And here it is for real.

The same system, running: an agent connected over MCP discovers, installs and renders a working component.

Coding agent · connected to duku-labs MCP
ButtonInputTextareaFieldCheckboxSwitchSelectRadio GroupBadgeAvatarSpinnerSkeletonField MessageAlert

Your coding agent can see the system, not just the screenshot.

The DUKU Labs MCP server gives compatible agents structured access to the whole design system — as resources, tools and reusable prompts. MCP provides the context and the tools; your agent still works inside your project, with your permission.

Component metadata

Name, category, tier and use cases for all 69 components

Component source

The actual TypeScript, not a screenshot of it

Props & variants

Typed API contracts with defaults and descriptions

Dependencies

npm packages and registry dependencies, resolved

Design tokens

Foundation, semantic, domain and motion layers

Interaction states

What happens on click, focus, error and success

Motion specification

Durations, easings and the standard spring

Accessibility requirements

Keyboard, focus and screen-reader behavior

Install commands

shadcn CLI commands scoped to your package manager

Reusable prompts

Pre-structured workflows like build_auth_flow

The difficult parts are already designed.

Most libraries provide primitives. DUKU Labs builds the layer above them: complexity already designed, states already considered, motion already engineered. Every category marked available ships real components today — nothing is listed before it exists.

Identity & complianceAvailable

Adaptive KYC journey: PAN verification, document quality checks, liveness, manual review.

Markets & investingAvailable

Option chain with live Greeks, strategy builder, order ticket, depth ladder, portfolio risk.

Crypto & paymentsAvailable

USDT→ETH swap with routes, slippage, approval flow and on-chain confirmation.

AI & agent interfacesAvailable

Agent canvas, approval gates, tool-call inspector, grounded answers with citations, streaming chat.

HealthcareAvailable

Biomarker trends, medication adherence timelines, clinical risk gauges, live vitals.

Fintech & dataAvailable

Market depth ladders, SIP simulation, payment timelines, amount inputs, odometer values.

Motion systemsAvailable

Kinetic headings, magnetic CTAs, marquees, scroll reveals — engineered, not decorated.

Onboarding & activationAvailable

Signup, login, pricing and capture blocks with complete submit choreography.

Data-heavy enterpriseAvailable

Reconciliation, tamper-evident audit logs, investigation timelines, entity graphs.

Try it here, not in a screenshot.

Every demo below is the real component — type in it, break it, replay it.

KYC FlowSignature workflows
Outcome:
  1. 1Details
  2. 2PAN
  3. 3Documents
  4. 4Liveness
  5. 5Review
Option ChainSignature workflows
Spot24,812.40
CallsStrikePuts
OIChg OIVolIVLTPChg%Chg%LTPIVVolChg OIOI

Lot size 75 · click a strike for depth and orders · simulated data

Crypto SwapSignature workflows
You pay

≈ $1,000

You receive
0.29289

≈ $999.5

Price impact
0.05%
Min received (0.5% slippage)
0.29142 ETH
Slippage
Route
USDTUSDCWETHETH

One-time token approval, then the swap transaction.

Agent CanvasSignature workflows

Goal

Refund order #8412 and notify the customer

Plan ready
  1. Locate the order and payment

  2. Issue the refund

  3. Notify the customer

Portfolio RiskSignature workflows

Portfolio value

₹15,41,000

7 holdings

Day P&L

+₹2,738

0.18%

Beta

0.97

vs NIFTY 50

VaR 95% · 1d

₹24,715

1.6% of value

Sector exposure

  • Financials44.1%
  • IT25.6%
  • Energy19.5%
  • Pharma6.0%
  • Consumer4.8%

Concentration risk

Financials is 44% of the portfolio — above your 25% limit.

Scenario

NIFTY +0.0%
Estimated portfolio impact (β-scaled)+₹0
Biomarker TrendSignature workflows

LDL cholesterol

Lab range 50130 mg/dL · your baseline 112

6.5% vs last
in rangebaselineStatin started50130Jan 25May 25Sept 25Jan 26
101 mg/dL2 April 2026

Within the laboratory range and at or below your personal baseline.

Every state included.

A component is not finished when the happy path looks good. DUKU Labs components ship with their full interaction state matrix designed, documented and readable by your agent.

EmptyLoadingSuccessErrorWarningDisabledPartial completionKeyboard focusMobile layoutDark modeReduced motion

Free while in beta.

Every component — signature workflows included — is free to integrate right now. In exchange, tell us what you're building: it decides which components we design next.

What do you want the library for?

Free while in beta. No card, no key — your answers shape which components we build next.

Installation

Connect your agent once, or install components directly — either way the source lands in your project and belongs to you.

Connect once, then ask your coding agent to discover and implement components inside your product.

claude mcp add duku-labs --transport http https://labs.duku.design/mcp
codex mcp add duku-labs --url https://labs.duku.design/mcp

Why DUKU Labs

Human taste

Interfaces are art-directed, not generated from generic patterns. Visual restraint on the surface, deliberate motion underneath.

Engineering depth

Responsive states, accessibility, typed APIs and edge cases are designed and documented — a component is not finished when the happy path looks good.

Agent accessibility

Claude Code, Codex and other MCP-compatible agents can search the registry, read the system and install components as source in your codebase.

The catalog

69 components across 10 phases — signature workflows first, primitives underneath.

Signature workflows

Primitives

Feedback

Overlays & navigation

Fintech & data

Stat Counter

Locale-formatted count-up on scroll-in with optional delta badge.

Number Flow

Odometer digit roll for live values; width animates, separators crossfade.

Amount Input

The fintech signature: as-you-type grouping (incl. Indian lakh/crore), caret preservation and auto-scaling type.

Sparkline Card

Portfolio card whose sparkline draws itself; the area fades and a dot lands on the last point.

OTP Input

4/6 code cells driven by one hidden input (SR + autofill friendly); digits pop in, completion flashes.

Transaction List

Dashboard rows that cascade on scroll-in; loading renders shimmering skeleton rows.

Market Depth

Live bid/ask ladder: quantity bars breathe to each update, the spread sits in the middle, buyer/seller balance re-weights and last price flashes directionally.

SIP Simulator

SIP goal simulator: four sliders drive a compounding projection whose area chart morphs, corpus rolls via NumberFlow and invested/growth split re-balances live.

Payment Status

One payment's whole lifecycle: initiated → authorised → captured → settled with check-draws, a failure state with decline reason, and a refund branch.

Order Ticket

Advanced order ticket: buy/sell recolors the whole ticket, order types reveal only the fields they need, margin and charges roll live, over-margin blocks, and placement plays a partial fill.

Strategy Builder

Options strategy builder: pick long call, spread, straddle, strangle or iron condor and the payoff curve morphs to it, with breakevens, max P&L, net Greeks and an expiry-spot scrubber.

Bank Linking

Account-aggregator style linking: bank grid, an explicit consent review of exactly what is shared and for how long, OTP verification, account selection and a connection-health card.

Expense Feed

An expense feed that understands itself: categorised merchants, subscription month counting, unusual-charge flags with the multiple, refund → original linking and cascading category filters.

Fund Compare

Two funds honestly compared: mirrored metric bars grow from the centre, the better side gets the dot per metric, and portfolio overlap says whether holding both diversifies anything.

Loan Eligibility

Loan composer with the reason built in: sliders drive an amortised EMI, the FOIR meter shows exactly why approval is likely/borderline/unlikely, and the fix is suggested.

Healthcare

Enterprise & data

AI / agent

Motion showpieces

Blocks