Installation

Add the MioUI design tokens to your project.

pnpm add @phosphor-icons/react motion class-variance-authority tailwind-merge

Copy tokens.css and themes.css into your project and import them in your global stylesheet.

app/globals.css

@import 'tailwindcss';
@import './tokens.css';
@import './themes.css';

Open any component page, switch to the Code tab, and paste the source into components/ui/.

A one-step npx shadcn add install (self-hosted registry) is coming.

Introduction

MioUI is a set of components built on shadcn/ui conventions with a Claude-inspired aesthetic.

Theming

A theme changes the accent color. Everything else stays fixed.