Installation

Matos UI is distributed through the shadcn CLI. Components are copied into your project, so you own the code and can style it with your theme.

Requirements

Before installing components, make sure your app has:

• React or Next.js
• Tailwind CSS
• shadcn/ui initialized
• Node.js 18+ or Bun

Start a New Project

Create a Next.js app:

npx create-next-app@latest my-app

Move into the project:

cd my-app

Initialize shadcn/ui:

npx shadcn@latest init

Add Matos UI Components

Install a component from the production registry:

npx shadcn@latest add https://matos-ui.com/r/button.json

Install more components:

npx shadcn@latest add https://matos-ui.com/r/badge.json
npx shadcn@latest add https://matos-ui.com/r/command-dock.json
npx shadcn@latest add https://matos-ui.com/r/dynamic-island.json
npx shadcn@latest add https://matos-ui.com/r/file-upload.json

Install a demo:

npx shadcn@latest add https://matos-ui.com/r/button-demo.json

Common Dependencies

The shadcn CLI installs registry dependencies when they are declared by the component. If you are copying files manually, install the packages used across Matos UI:

npm install @base-ui/react framer-motion lucide-react tailwind-merge tailwind-variants

With Bun:

bun add @base-ui/react framer-motion lucide-react tailwind-merge tailwind-variants

Use a Component

After installation, import the component from your local components folder:

import { Button } from "@/components/matos-ui/button"

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

Run This Repository Locally

Clone the repository:

git clone https://github.com/SilasMatos/matos-ui.git

Move into the project:

cd matos-ui

Install dependencies:

bun install

Start the docs app:

bun run --cwd apps/docs dev

The docs run at:

http://localhost:4000

Registry Commands

Build the registry JSON files:

bun run --cwd apps/docs registry:build

Run TypeScript checks for the docs app:

bun run --cwd apps/docs types:check

Build the full docs app:

bun run --cwd apps/docs build

Run the full monorepo build:

bun run build

Format and lint the workspace:

bun run check

Local Registry URL

When the docs dev server is running, you can install components from the local registry:

npx shadcn@latest add http://localhost:4000/r/button.json

This is useful when testing new components before publishing.