Less is more. A small lab of the components we build every day, rethought for better feel. Copy the source if that’s all you need. Stay for how each one was built, dead ends included, written for frontend and design engineers who want the why. In React, fully Tailwind.

Browse · Report a bug · Feature request

• Everyday components, rethought - Menus, OTP inputs, upload staging, command palettes, and more - each built to do one thing well
• Watch, then install - Short looping clips on lab.moumen.dev; open any for the live demo, blueprint, and source
• shadcn registry - Install with npx moumenlab add or the shadcn CLI; you own the code, no runtime package
• Fully Tailwind - No CSS files to import; shared tokens (lab-theme) merge into your @theme on install
• Motion-first - Animations with motion/react; interruptible, layout-aware, reduced-motion aware

npx moumenlab add hover-expand-icon-strip
npx moumenlab add schedule-builder -c apps/web   # monorepo: target the app workspace
npx moumenlab list

Or use the shadcn CLI directly:

npx shadcn@latest add https://lab.moumen.dev/r/hover-expand-icon-strip.json

Either way the component and its shared theme tokens are copied into your project.

• React 19
• Tailwind CSS v4
• motion (installed automatically by the CLI)
• Node.js 18+

• Managed with Turborepo and pnpm workspaces
• Run tasks via turbo run <script> (e.g. pnpm --filter web dev for the showcase)
• Node.js 20+ is required for the monorepo tooling

apps/web              Showcase site (Next.js App Router + React 19 + Tailwind v4)
  app/                Routes: / (landing), /components, /components/[slug]
  registry/lab/*      Installable component sources (one folder each)
  registry.json       Registry source of truth (metadata + files)
  src/showcases/*     Per-component live demos
packages/moumenlab    The `npx moumenlab` CLI

• Turborepo + pnpm Workspaces
• Next.js 15
• React 19
• TypeScript
• Tailwind CSS v4
• motion
• shadcn/ui registry format
• Geist (site typography)

Install dependencies:

pnpm install

Run the development server:

pnpm dev

Open http://localhost:3001 in your browser (web app port).

Useful scripts:

pnpm build          # build everything
pnpm check          # zero-custom-CSS + registry invariants
pnpm typecheck      # TypeScript across the monorepo

Browse components at lab.moumen.dev/components, open any for the live playground, then install into your app:

npx moumenlab add otp-segmented-input drag-to-reorder-list

Component pages are statically generated from registry.json. Registry payloads at /r/*.json are built on every deploy - the same file the site shows (highlighted) and the CLI installs.

cd apps/web
pnpm new:component "Radial Dial" radial-dial

That scaffolds the installable stub, the showcase, and wires registry.json + showcase entries. Then write the component (Tailwind only - see CONTRIBUTING.md) and optionally drop a clip in public/lab.

Contributions are welcome! Please read our Contributing Guide and Code of Conduct before submitting pull requests.

MIT © Moumen Soliman