Getting started

Requirements

• Tailwind CSS v4. The components are styled with Tailwind classes.
• shadcn/ui, set up with CSS variables (npx shadcn@latest init), so the theme tokens the components read exist.
• React 19. Several components take ref as a normal prop.
• tw-animate-css for the entrance animations (shadcn init installs it). Without it they are skipped, and motion is off for users who ask for reduced motion.

Because they use your tokens, the components follow your theme and dark mode. See Theming.

1. Register the namespace

Items depend on each other through the @mpui-kit namespace, so register it once.

npx shadcn@latest registry add @mpui-kit=https://mpui-kit.vercel.app/r/{name}.json

2. Add a country and the provider

Components never assume a country. They read it from a prop or from MpuiKitProvider. Shared pieces, such as the country types, are installed automatically.

npx shadcn@latest add @mpui-kit/country-cm @mpui-kit/mpui-kit-provider

Files land in lib/mpui-kit/ and components/mpui-kit/, or under src/ if your project uses it.

3. Wrap your app

import { MpuiKitProvider } from "@/components/mpui-kit/mpui-kit-provider"
import { cm } from "@/lib/mpui-kit/countries/cm"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <body>
        <MpuiKitProvider country={cm} locale="fr">
          {children}
        </MpuiKitProvider>
      </body>
    </html>
  )
}

4. Add components

The Phase 1 components are being built one at a time. Each gets its own docs page with a live preview, props table and install command as it lands.