lab
A small lab of the components we build every day, rethought for better feel. Each one does one thing well, built in React and fully Tailwind, and available in the shadcn registry - copy the source
What is it?
What it is
A collection of highly polished, motion-first UI components built with React, Tailwind CSS v4, and Framer Motion, designed for the shadcn registry.
Why it exists
To provide a library of 'ethought' everyday components that focus on superior feel and animation, allowing developers to install source code directly into their projects without runtime dependencies.
Who should use it
Front‑end developers building React 19 applications who want ready‑made, Tailwind‑styled UI components that integrate with the shadcn registry and motion animations.
Who should avoid it
Developers not using React, Tailwind CSS, or those on older React versions (pre‑19) or without a monorepo setup.
How it works
A quick walkthrough in plain English
How lab works
Step 1 of 3
You interact with it
Open lab, send a request, or connect it to your stack.
Features
Advantages
- Less is more philosophy focusing on high-quality, focused components
- Live demos and video previews for easy evaluation
- Zero runtime dependency - components are copied into your project
- Seamless Tailwind integration with shared theme tokens
- Built-in motion animations with accessibility considerations
- Modern tech stack: React 19, Tailwind CSS v4, TypeScript, Motion
- Monorepo managed with Turborepo and pnpm for efficient development
- MIT license permissive for commercial use
- Easy installation via custom CLI or shadcn CLI
- Component source available for inspection and modification
Disadvantages
- Requires React 19 and Tailwind CSS v4, which may not match existing projects
- Node.js 20+ needed for monorepo tooling, potentially limiting older environments
- Smaller ecosystem and community compared to larger UI libraries
- Currently limited number of components available
- Reliance on shadcn registry format may require learning curve for newcomers
Installation
FAQ
How do I install a component into my project?
You can install components using the moumenlab CLI with `npx moumenlab add <component-name>` or by using the shadcn CLI directly with `npx shadcn@latest add <url-to-json>`.
What are the technical requirements for using these components?
The components require React 19, Tailwind CSS v4, and Node.js 18+. The CLI will automatically install the `motion` library if it is missing.
Do I need to manage separate CSS files for these components?
No. The components are fully Tailwind-based with no external CSS files. Shared theme tokens (`lab-theme`) are automatically merged into your `@theme` upon installation.
How can I preview a component before installing it?
You can browse the full library and view live demos, blueprints, and source code at [lab.moumen.dev/components](https://lab.moumen.dev/components).
Does using these components add a runtime dependency to my project?
No. Following the shadcn registry pattern, the component source code is copied directly into your project, meaning you own the code and there is no runtime package dependency.
Featured in Videos
YouTube tutorials and walkthroughs for lab
Alternatives
Similar projects ranked by category, topics, and text overlap.
