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
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.
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.
Name, category, tier and use cases for all 69 components
The actual TypeScript, not a screenshot of it
Typed API contracts with defaults and descriptions
npm packages and registry dependencies, resolved
Foundation, semantic, domain and motion layers
What happens on click, focus, error and success
Durations, easings and the standard spring
Keyboard, focus and screen-reader behavior
shadcn CLI commands scoped to your package manager
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.
Adaptive KYC journey: PAN verification, document quality checks, liveness, manual review.
Option chain with live Greeks, strategy builder, order ticket, depth ladder, portfolio risk.
USDT→ETH swap with routes, slippage, approval flow and on-chain confirmation.
Agent canvas, approval gates, tool-call inspector, grounded answers with citations, streaming chat.
Biomarker trends, medication adherence timelines, clinical risk gauges, live vitals.
Market depth ladders, SIP simulation, payment timelines, amount inputs, odometer values.
Kinetic headings, magnetic CTAs, marquees, scroll reveals — engineered, not decorated.
Signup, login, pricing and capture blocks with complete submit choreography.
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.
- 1Details
- 2PAN
- 3Documents
- 4Liveness
- 5Review
| Calls | Strike | Puts | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| OI | Chg OI | Vol | IV | LTP | Chg% | ₹ | Chg% | LTP | IV | Vol | Chg OI | OI |
| 20.7L | +78.0K | 12.4L | 13.1% | 318.41 | +2.8% | 24,550 | +6.2% | 38.53 | 13.1% | 15.1L | +2.9L | 29.8L |
| 30.0L | +3.9L | 12.9L | 13.0% | 279.62 | -2.0% | 24,600 | -8.0% | 49.70 | 13.0% | 17.5L | -47.4K | 24.4L |
| 32.0L | +3.8L | 13.6L | 13.0% | 243.19 | +5.6% | 24,650 | -2.0% | 63.24 | 13.0% | 21.5L | +67.3K | 42.2L |
| 43.8L | +1.3L | 16.0L | 13.0% | 209.36 | -6.4% | 24,700 | +4.4% | 79.37 | 13.0% | 17.3L | +4.8L | 46.2L |
| 55.3L | +78.6K | 26.2L | 13.0% | 178.32 | +8.5% | 24,750 | +7.4% | 98.29 | 13.0% | 31.0L | -3.9L | 37.7L |
| 63.9L | +71.6K | 19.3L | 13.0% | 150.19 | +9.2% | 24,800ATM | +7.4% | 120.14 | 13.0% | 20.0L | -1.0L | 45.2L |
| 48.3L | -3.7L | 18.8L | 13.0% | 125.06 | -5.9% | 24,850 | -5.4% | 144.96 | 13.0% | 22.5L | +2.2L | 40.9L |
| 32.6L | -1.8L | 24.1L | 13.0% | 102.91 | -2.1% | 24,900 | -4.5% | 172.77 | 13.0% | 27.6L | +2.2L | 40.3L |
| 29.1L | +4.2L | 19.5L | 13.0% | 83.67 | +3.1% | 24,950 | +3.0% | 203.50 | 13.0% | 19.1L | -85.3K | 29.7L |
| 25.9L | -3.5L | 12.3L | 13.0% | 67.20 | +7.9% | 25,000 | -9.6% | 237.00 | 13.0% | 14.5L | -1.4L | 33.0L |
| 28.8L | -37.9K | 9.7L | 13.1% | 53.33 | +5.2% | 25,050 | +2.5% | 273.09 | 13.1% | 13.8L | +3.7L | 32.2L |
Lot size 75 · click a strike for depth and orders · simulated data
≈ $1,000
≈ $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.
Goal
Refund order #8412 and notify the customer
Locate the order and payment
Issue the refund
Notify the customer
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
Scenario
NIFTY +0.0%LDL cholesterol
Lab range 50–130 mg/dL · your baseline 112
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.
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.
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/mcpcodex mcp add duku-labs --url https://labs.duku.design/mcpWhy 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
NIFTY-style option chain: Greeks toggle, ATM highlighting, OI data bars, restrained tick flashes and in-context depth with buy/sell.
Live Black-Scholes Greeks for one option: premium and Δ Γ Θ V roll via NumberFlow while magnitude gauges spring to each new value.
The adaptive identity-verification journey: details, PAN, document capture with quality checks, liveness, review, and approved or manual-review outcomes.
USDT→ETH swap with slippage, route hops, expanding fee breakdown, approval-then-swap flow and an on-chain confirmation timeline.
Agent execution timeline: the plan becomes a live run with tool calls, a human approval gate, error with retry, and a final artifact reveal.
Risk cockpit: value, day P&L, beta and 1-day VaR tiles, sector exposure bars with concentration alerts, and a scenario slider with a hedge idea.
Lab-value trend explorer: reference-range band, personal baseline, abnormal points in risk-high, medication event markers and unit conversion.
Primitives
The state exemplar. Loading locks width and swaps in a spinner; success morphs to an emerald check-draw, holds 1.6s and reverses.
Wrapper-carried focus ring, invalid/valid feedback and prefix/suffix adornment slots.
Input styling with instant auto-grow capped at maxRows.
Label + control + FieldMessage with aria wiring; shakes the control when an error appears.
Radix checkbox; primary fill scales from center, then the check draws.
Spring-positioned thumb that squishes to 22px while pressed.
Radix select with origin-aware pop-in, item cascade and check-draw indicator.
Radix radio group; the dot pops with a back.out(1.7) overshoot.
Quiet status badge; optional ping ring for live statuses.
Image with shimmer while loading and fallback initials; groups spread on hover.
The Button spinner as a standalone, with a visually-hidden loading label.
Muted placeholder with the house shimmer. Deterministic widths only.
Feedback
The inline validation feedback used by every form: height-auto in/out, crossfade between messages.
Static banner with rise-in entrance and a dismiss that collapses its own height.
Custom stacked toaster: springs in, stacks with depth, expands on hover, swipes to dismiss, and toast.promise morphs through three phases.
Bar and circular progress; value changes tween, indeterminate loops.
Keyboard hint chip and an icon button that morphs copy → check on click.
Overlays & navigation
Radix dialog; overlay fade + panel pop-in, GSAP-driven exit on data-state.
Sheet-styled dialog sliding on the standard spring; bottom sheet drags to dismiss.
Radix menu with origin-aware pop-in, 0.018s item cascade and sliding submenus.
Tabs with a sliding, width-morphing pill indicator and directional content transitions.
Sticky nav that blurs in after 24px scroll, shared-layout underline, hamburger→X mobile menu.
FAQ accordion where answers settle on a spring and the plus morphs to minus.
Fintech & data
Locale-formatted count-up on scroll-in with optional delta badge.
Odometer digit roll for live values; width animates, separators crossfade.
The fintech signature: as-you-type grouping (incl. Indian lakh/crore), caret preservation and auto-scaling type.
Portfolio card whose sparkline draws itself; the area fades and a dot lands on the last point.
4/6 code cells driven by one hidden input (SR + autofill friendly); digits pop in, completion flashes.
Dashboard rows that cascade on scroll-in; loading renders shimmering skeleton rows.
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 goal simulator: four sliders drive a compounding projection whose area chart morphs, corpus rolls via NumberFlow and invested/growth split re-balances live.
One payment's whole lifecycle: initiated → authorised → captured → settled with check-draws, a failure state with decline reason, and a refund branch.
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.
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.
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.
An expense feed that understands itself: categorised merchants, subscription month counting, unusual-charge flags with the multiple, refund → original linking and cascading category filters.
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 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
A month of medication at a glance: course bars grow in, adherence dots cascade (missed doses in amber), refill flags pulse and interactions annotate the rows they concern.
Clinician-review risk summary: the gauge arc sweeps to the score while the number counts up, factor bars grow protective-left/adverse-right, missing data widens stated uncertainty.
Live patient vitals: a continuously drawing synthetic ECG trace, heart rate rolling via NumberFlow, and a whole-card pulsing alarm when a vital leaves range.
Enterprise & data
Two-sided reconciliation workspace: confidence-scored ledger↔statement pairs, differences called out to the rupee, accept/reject per pair, bulk-accept above a threshold, live matched meter.
Tamper-evident audit trail: actor, action chip and resource per event, expandable field-level before→after diffs, device metadata, and a hash-chain integrity badge that turns destructive on mismatch.
A case timeline for investigators: events carry actor, source and confidence, evidence expands in place, and unexplained gaps are rendered as first-class dashed voids.
Entity-relationship graph for investigations: typed nodes pop in, edges draw themselves, risk links render dashed destructive, and selecting a node isolates its neighbourhood.
AI / agent
Text that renders like a streaming LLM response with a blinking caret.
Claude-style status: shimmering label plus three pulsing dots.
User bubbles right-aligned, assistant plain with avatar; ChatList staggers the initial mount.
The composer: auto-grow textarea, enable-morphing submit circle, async pending and error shake.
Collapsible agent-capability card; rows cascade in as the height opens.
A transcript of what the agent actually did: per-call permission badges, duration bars, a human ↔ raw JSON toggle, retryable errors and a denied-by-policy state.
A standalone human gate for agent actions: the expiry bar drains in real time, and every terminal state is designed — approved, rejected, modified-then-approved, and expired.
An answer that shows its work: per-claim citation chips light up the exact source quote, contradictions are surfaced inline instead of averaged away, and uncovered ground is stated.
Motion showpieces
Character-split headline reveal — the signature hero entrance.
CTA that eases toward the cursor inside a proximity radius and springs back elastically.
Seamless logo/testimonial belt; hover eases the loop to a stop instead of freezing it.
Nav/footer link whose label rolls per character with an underline sweep.
Wrapper grid that rises its children in with a grid-aware stagger on scroll.
Blocks
The flagship block: OAuth row, live validation, strength meter, loading→success→panel morph.
SignupCard reduced: email + password with the same submit choreography.
Plan card with billing toggle; the price rolls via NumberFlow and a savings badge pops in on yearly.
Single-line capture whose whole control morphs into a “You're in” pill on success.