Installation Guide
Comprehensive, step-by-step instructions to set up, configure, and integrate the MICTO UI Kit into your modern React, Next.js, or Laravel Inertia.js applications.
Prerequisites
Ensure your development environment meets the following baseline requirements before installing components.
React 18 or 19
Fully compatible with Server Components, Concurrent Mode, and Next.js App Router architectures.
Tailwind CSS v4
Utilizes modern CSS first-class variables (`@theme inline`), avoiding legacy config wrappers.
TypeScript v5+
Components ship with clear, helpful TypeScript type definitions out of the box.
shadcn/ui CLI
Seamlessly integrates with the standard shadcn CLI for effortless component installation.
1. Initialize shadcn CLI
If you haven't already initialized shadcn in your project, run the initialization command. This configures your `components.json` and CSS variables.
pnpm dlx shadcn@latest initWhen prompted, select your preferred styling configuration (e.g. CSS variables, Tailwind base colors).
2. Add MICTO UI Kit Components
You can add any component directly from our custom registry URL. Pass the exact JSON endpoint of the component you wish to install.
Example: Installing Data Table
pnpm dlx shadcn@latest add https://micto-ui-kit.misangono.net/r/data-table.jsonExample: Installing Multiple Components Simultaneously
pnpm dlx shadcn@latest add https://micto-ui-kit.misangono.net/r/inertia-pagination.json https://micto-ui-kit.misangono.net/r/confirm-dialog.json3. Global Styles & Theme Configuration
Ensure your global CSS file imports Tailwind and shadcn base styles correctly. In Tailwind v4, your `globals.css` should look like this:
@import "tailwindcss";
@import "shadcn/tailwind.css";
@custom-variant dark (&:is(.dark *));
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
/* ...other tokens */
}Installation Complete
Your project is now fully configured! Explore our extensive component documentation to see API usage, props, and live demos.