Do I need shadcn/ui first?

Yes. The CLI checks for a components.json and stops if it is missing. Run npx shadcn@latest init once, then npx mcoli-ui init.

Can I use it in any project?

Yes. It is MIT licensed and works in any React project. The themes carry Micro Club's identity, but the tokens are plain CSS variables you can retune.

Can I switch themes later?

Run npx mcoli-ui init with another theme name. Since every component reads the same variables, the new palette, radii and fonts apply everywhere at once.

Ship Micro Club's design system in one command.

Q: Why copy components instead of installing a package?

Because you will want to change them. Copied source means no wrapper APIs, no version pinning and no waiting on a release to fix a padding. mcoli-ui is a registry, the same model shadcn/ui made popular.

Tokens, five themes and 37 accessible React components, copied straight into your codebase by the shadcn CLI. No package to upgrade. You own every line.

Get started Browse 37 components

$ npx mcoli-ui@latest init primary

Theme

React 19
Next.js
Tailwind CSS v4
Base UI
shadcn CLI
TypeScript

events.microclub.info

Hackathon 2026

Live

USTHB · 48h · 62 teams competing

Registrations

248+12%

Teams formed

62+8

74%

Check-ins

184 / 248

Latest registrations

YBRKLM

YB
Yasmine B.
Null Pointers
Confirmed
RK
Rayan K.
Bit Flippers
Pending
LM
Lina M.
Stack Smash
Confirmed
AH
Anis H.
Kernel Panic
Waitlist

Registrations open

Closes when 64 teams are in.

How it works

From an empty repo to Micro Club UI in three commands

No wrapper package, no runtime theme provider. The CLI writes plain CSS variables and plain TSX into your project, then gets out of the way.

~/my-app

❯

Files changed

app/globals.css
300+ tokens · light & dark
font-dm-sans · font-plus-jakarta-sans
brand fonts

Components

Real components, not screenshots

Everything on this page is the actual registry source, the same files the CLI copies into your project. Click around; switch the theme up top.

mc-input

Password

Username

This username is taken.

Keep me signed in

Verify your email

mc-input-otp

Enter the 6-digit code we sent.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Toasts

mc-sonner

Fire one off.

Assign a mentor

mc-select

Team size

mc-slider

4 members

Alerts

mc-alert

Registration confirmed

Your team is in. See you at the opening ceremony.

Submission closed

The deadline passed at 23:59. Contact the jury for an extension.

Team

mc-tabs

YBRKLM

+28

YB
Yasmine Benali
@yasmine
Lead
RK
Rayan Kaci
@rayan
Member
LM
Lina Mansouri
@lina
Member

Browse all 37 components

Themes & foundations

Five themes. One design system.

Pick a theme to re-skin this page. Every token below, from color and type to elevation and blur, follows it in light and dark.

init primary

Join the workshop

Intro to design systems · Saturday

Free

Remind me the day before

Seats filled72%

Seat reserved

We sent the details to your inbox.

Bring a laptop

We will build a themed UI together, from scratch.

48 attending

This week

YBRKLMAH

Why mcoli-ui

Built like a library. Owned like your own code.

The polish of a design system team, without the lock-in of a dependency.

mc-button.tsx Your repo

components/ui

mc-avatar.tsx
mc-badge.tsx
mc-button.tsx
mc-card.tsx
mc-input.tsx

10const buttonVariants = cva(

11- 'inline-flex items-center rounded-lg',

11+ 'inline-flex items-center rounded-full',

12 { variants: {

13 variant: {

14 primary: 'bg-primary text-primary-…',

15 secondary: 'bg-secondary …',

16 tertiary: 'bg-primary-foreground …',

17 },

18 size: {

19 sm: 'px-3.5 py-2 text-sm',

20 lg: 'px-[1.125rem] py-2.5 text-base',

21 // add your own, it is your file

Preview

You own every line

Components land in components/ui as plain TSX. Change a class, add a variant, ship it. No wrapper API and no upgrade to wait for.

Accessible by default

Built on Base UI primitives, so keyboard support, focus management and ARIA come wired in.

<McButton variant="

Typed to the last variant

Variants are built with class-variance-authority and strict props, so your editor completes every option.

Open source

Built by Micro Club, in the open

Designed and maintained by Micro Club's dev team at USTHB. Every component is documented and has Storybook stories before it ships.

10 contributors

FAQ

The fine print

Because you will want to change them. Copied source means no wrapper APIs, no version pinning and no waiting on a release to fix a padding. mcoli-ui is a registry, the same model shadcn/ui made popular.

Build your next project with Mcoli UI

Five themes, light and dark, and 37 accessible components. Free and open source, ready the moment you are.

Get started View on GitHub