Introduction

Welcome to the MicroClub UI component registry! This is a collection of reusable UI components built on top of Radix UI primitives and styled with Tailwind CSS, designed to accelerate your development workflow.

This is not a component library. It is how you build your component library.

This is built on top of shadcn/ui and includes many useful components. The same as shadcn/ui, all components are free to use for personal and commercial. Just copy and paste to your project and customize to your needs. The code is yours.

Getting Started

To start using this registry, you can use our CLI tool to initialize your project with the components you need.

Prerequisites

Before using MicroClub UI components, ensure you have a project with shadcn/ui installed. If you haven't set it up yet, follow the shadcn/ui installation guide.

Initialization

Run the init command to set up your project:

npx mc-ui@latest init

pnpm dlx mc-ui@latest init

yarn dlx mc-ui@latest init

bunx mc-ui@latest init

Alternatively, you can install the CLI globally:

npm install -g mc-ui@latest
mc-ui init

pnpm add -g mc-ui@latest
mc-ui init

yarn global add mc-ui@latest
mc-ui init

bun add -g mc-ui@latest
mc-ui init

Adding Components

Once initialized, you can add individual components to your project using the CLI:

npx mc-ui@latest add [component-name]

pnpm dlx mc-ui@latest add [component-name]

yarn dlx mc-ui@latest add [component-name]

bunx mc-ui@latest add [component-name]

Why MicroClub UI?

• Copy & Paste: Own your code. Components are copied directly into your project.
• Customizable: Built with Tailwind CSS, allowing full control over styling.
• Accessible: Built on Radix UI primitives with accessibility best practices.
• Type-Safe: Written in TypeScript for better developer experience.
• Framework Agnostic: Works with any React framework.

References

• shadcn/ui - For style and registry distribution.
• Tailwind CSS - For easily styling with utility first CSS
• Radix UI - For composition utilities.