Installation

Migoy components are installed as editable source through the shadcn CLI. Install the components you need and customize them in your project.

PrerequisitesCopy Anchor Link

Start with a shadcn-initialized React project using Tailwind CSS 4.3 or newer. It should have:

• A components.json file with your component and utility aliases.
• The standard cn utility.
• Global styles with shadcn semantic color variables such as background, foreground, and primary.

Migoy uses Radix for components such as Button and Select, and Base UI for Combobox and Popover. The installer adds each component's declared dependencies. Follow its component page for the correct API; the two primitive libraries have different props and composition patterns. Review existing components before replacing them, especially when their primitive base differs.

Local availabilityCopy Anchor Link

The registry currently runs locally; there is no published public registry or immutable release yet. The commands below use 127.0.0.1, so the Migoy workbench must run on the same machine as the project receiving the components.

In a separate terminal, from the Migoy workbench directory, install its dependencies and start it:

pnpm install
pnpm dev

Keep that terminal running on port 3017. If an installation cannot connect, check that the Button endpoint opens on that machine.

Install your first componentCopy Anchor Link

From the root of your own project, run:

pnpm dlx shadcn@latest add http://127.0.0.1:3017/r/button.json

The installer copies Button into your configured UI directory, adapts imports to your aliases, and installs its Radix Slot and variant dependencies. If Button already exists, review the proposed changes before accepting a replacement.

Button uses your existing semantic colors. The Migoy theme is optional; the component includes default control sizes and radii.

Use the componentCopy Anchor Link

Import Button from the UI directory configured in your project. For the usual @/components/ui alias:

import { Button } from '@/components/ui/button';

export default function Example() {
  return <Button>Save changes</Button>;
}

Start your project's development server and open the page containing this example. You should see a button using your theme's primary color. Use Tab to focus it and confirm that the focus outline is visible. See Button for variants, sizes, and interaction examples.

Optional Migoy themeCopy Anchor Link

To use Migoy's palette and shared control tokens, preview the separate theme item:

pnpm dlx shadcn@latest add http://127.0.0.1:3017/r/theme.json --dry-run

Review the proposed CSS changes, then install it:

pnpm dlx shadcn@latest add http://127.0.0.1:3017/r/theme.json

The theme adds gray primitives, semantic colors for light and dark modes, and control tokens to your global stylesheet. It changes matching theme variables while preserving unrelated custom variables. Existing CSS overrides can affect the result, so check both themes in your app afterward.

Fonts and a theme switcher are configured separately. Installing individual components preserves your existing palette.

Adding more componentsCopy Anchor Link

Browse Components for each component's installation command, imports, and setup requirements. Composed components can also install other Migoy components they depend on; review changes to those files too.

Some components need additional setup. For example, Tooltip uses TooltipProvider, and its animation classes require tw-animate-css in your global stylesheet. Follow the component's installation notes before using it.

Updating customized componentsCopy Anchor Link

Your project owns the installed files. Commit the initial installation before customizing, and keep the original source or a commit you can compare against later. Components run from your local source; they do not fetch code from the registry at runtime.

Preview an update before applying it:

pnpm dlx shadcn@latest add http://127.0.0.1:3017/r/button.json --dry-run
pnpm dlx shadcn@latest add http://127.0.0.1:3017/r/button.json --diff components/ui/button.tsx

Adjust the diff path to your actual UI directory. The diff compares a proposed replacement with your file; it does not automatically merge your customizations.

Compare the original installed source, your current version, and the proposed update. Merge the changes you want, then run your project's checks and verify the component in your app. The local registry is a development snapshot, so inspect each update rather than assuming it represents a versioned release.