Mcoli UI - Introduction

Elevate your projects with high-performance UI components infused with MicroClub DNA.

Welcome to mcoli-ui, a high-performance React component library designed for developers who demand both speed and signature design.

mcoli-ui delivers a curated collection of elite UI components infused with MicroClub DNA—a unique visual identity that combines professional-grade aesthetics with a bold, modern edge.

Own Your Code, Master Your UI

Forget rigid, black-box component libraries. mcoli-ui is a modern UI toolkit built on the shadcn registry workflow. We deliver the full source code of our components directly into your project, giving you the best of both worlds: a world-class design system and total creative control.

Signature Aesthetics: Every component is pre-styled with MicroClub's distinct DNA using Tailwind CSS v4.
Unmatched Accessibility: Built on @base-ui/react primitives to guarantee a flawless user experience for everyone.
Peak Performance: No runtime overhead. No unused dependencies. Just clean, optimized code that lives in your repository.
Total Freedom: Since the components are part of your project, you can customize them to fit your specific vision.

Ready to Launch?

mcoli-ui integrates seamlessly with any modern React project that follows the shadcn workflow.

1. The Foundation

Ensure your project is initialized with shadcn/ui. This sets up the structural foundation for our library to integrate perfectly.

New Projects: Start strong with shadcn/create.
Existing Projects: Add the base via the official installation guide.

2. Ignite the Library

Initialize mcoli-ui to set up our exclusive theme system and registry configuration.

npx mcoli-ui@latest init

During initialization, you can pick from our 5 signature themes: Primary, Secondary, Game Dev, Robotics, and IT.

3. Deploy Your First Component

Inject a premium component into your components/ui directory instantly:

npx mcoli-ui@latest add mc-button

Why mcoli-ui?

Unique Visual Identity: Bring the bold, department-inspired DNA of MicroClub to any project.
Next-Gen Tech: Fully optimized for Next.js 16, Tailwind CSS v4, and TypeScript 6.
Battle-Tested: Every component is visually verified via Storybook and Chromatic for maximum reliability.

Contributing

Interested in building a new component? Check out our contributing guide to get started.

Introduction