---
status: active
owner: studio-team
last_reviewed: 2026-10-11
supersedes: studio-design/TECH_STACK.md
---

# Studio Design Kit — Tech Stack

<!-- wiki:featured -->

**Component inventory SSOT:** [`docs/tech-stack/inventory.yaml`](../tech-stack/inventory.yaml) → `/wiki/` (Layers · Technology).  
This file is **design-kit narrative only** — do not duplicate inventory tables here. Kit version is enriched at wiki generate from `packages/studio-design-kit/package.json`.

## Package
Name: @studio/ui
Location: packages/studio-design-kit/
Version: **read from** `packages/studio-design-kit/package.json` (SSOT)
React: read from kit peerDependencies / root package.json

## Foundation
- Tailwind CSS v4 CSS-first @theme block
- shadcn semantic tokens as source of truth
- Per-product token overrides (studio careeros
  retired deal-finder legal-copilot)
- Dark mode via .dark class

## Component Layers
Layer 1 — shadcn/ui primitives (47 components)
  All installed via npx shadcn@latest add
  Full list in packages/studio-design-kit/src/index.ts

Layer 2 — Magic UI animations (10 components)
  shimmer-button animated-beam border-beam
  number-ticker animated-gradient-text blur-fade
  meteors dot-pattern grid-pattern text-reveal

Layer 3 — agent-elements AI streaming (40+ files)
  AgentChat StreamingMarkdown ThinkingTool
  InputBar BashTool and full tool suite

Layer 4 — Studio layout shells (5 components)
  StudioAppShell StudioPageHeader StudioNavTabs
  StudioFilterSidebar StudioKpiGrid

Layer 5 — Studio ANDI components (6 components)
  EvidenceTierBadge ConfidenceInterval
  JevFactorBreakdown ANDIDecisionCard
  PropertyCard RiskMeter

## Form Foundation
- React Hook Form + Zod always together
- useStudioForm hook
- StudioForm StudioFormField components

## State and Data
- Zustand (state per product)
- TanStack Query (data fetching per product)
- TanStack Table (data grids per product)
- TanStack Virtual (virtualisation)

## UX Primitives
- Sonner (toasts)
- Vaul (drawers)
- cmdk (command palette)
- Motion (animations)
- next-themes (dark mode)
- date-fns (date utilities)

## Additional Libraries
- Vercel AI SDK (streaming)
- Lottie React (animations)
- Streamdown (streaming markdown)
- Tabler Icons (extended icons)
- Lucide Icons (primary icons)

## Dev Tooling
- TypeScript strict mode
- Biome 2.5.15 (lint and format)
- Vitest (testing)
- tsc --noEmit (type checking)

## Agent Rules
- AGENTS.md: single source of truth
- All tools: Cursor OpenCode Zoo Code
- Studio UI MCP (all tools): `scripts/studio-ui-mcp.sh`
  + `platform/mcp/studio-ui-server/mcp-config-universal.json`
- 21st.dev MCP (optional): `.cursor/mcp.json` / `opencode.json`

## v2.4.4 Status
Location: platform/ui/
Status: FROZEN — do not modify or import
Migration: products migrate to @studio/ui
individually when under active development