Installation

Get Mosiac set up in your project and start adding components.

Prerequisites

Mosiac components are built for React and use Tailwind CSS and Motion. Make sure these are already configured in your project.

Using the CLI

Mosiac components can be installed using the shadcn CLI. Follow the shadcn CLI documentation to set up and use the CLI.

The component will be added directly to your project, where you can import and customize it.

Using Manually

You can also install components without the CLI. Open the component page, copy its source code, and add it to your project.

src/
└── components/
    └── ui/
        └── text-actions.tsx

Check the component's documentation for any dependencies it requires.

Utilities

Mosiac components use a small utility for merging Tailwind classes.

import { twMerge } from 'tailwind-merge';
import clsx, { type ClassValue } from 'clsx';

export const cn = (...inputs: ClassValue[]) => {
  return twMerge(clsx(inputs));
};

That's it

Once your project is ready, head over to the components and install whatever you need.