moumenlab

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.

· ·

License
[blocked]

moumenlab

Features

  • 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 ; 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 /react; interruptible, layout-aware, reduced-motion aware

Install a component

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

Or use the shadcn CLI directly:

bash
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.

Requirements

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

Turbo Monorepo

  • 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 demospackages/moumenlab    The `npx moumenlab` CLI

Tech Stack

  • + pnpm Workspaces
  • 15
  • 19
  • v4
  • registry format
  • (site typography)

Getting Started

Install dependencies:

bash
pnpm install

Run the development server:

bash
pnpm dev

Open in your browser (web app port).

Useful scripts:

bash
pnpm build          # build everythingpnpm check          # zero-custom-CSS + registry invariantspnpm typecheck      # TypeScript across the monorepo

Usage

Browse components at , open any for the live playground, then install into your app:

bash
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.

Add a component

bash
cd apps/webpnpm 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 ) and optionally drop a clip in public/lab.

Contributing

Contributions are welcome! Please read our and before submitting pull requests.

License

© Moumen Soliman