# UI
URL: /docs/features/ui

Learn about installing shadcn/ui compnents and how to use type-safe icons.

[ship.pluv.io](https://ship.pluv.io) templates are built with [shadcn/ui](https://ui.shadcn.com/), allowing you to quickly install components that you can customize to your liking.

## Installing shadcn/ui components

You can install shadcn/ui components by installing them with the [shadcn/ui CLI](https://ui.shadcn.com/docs/cli).

1. Navigate to the `/packages/ui` directory.
2. Find a component you want to install (e.g. [https://ui.shadcn.com/docs/components/checkbox](https://ui.shadcn.com/docs/components/checkbox))
3. Run the CLI installation command

```bash title="/packages/ui"
pnpm dlx shadcn@latest add checkbox
```

This package already has the shadcn/ui CLI installed, so you can choose to run the following command instead:

```bash title="/packages/ui"
pnpm shadcn add checkbox
```

## Using type-safe icons

There are 2 ways to use type-safe icons in your project:

### Using lucide-react

```tsx title="page.tsx"
import { RocketIcon } from "lucide-react";

<RocketIcon className="size-6" height={24} width={24} />
```

### Using @workspace/icons

You can generate type-safe icons as React components without having to mess with Webpack loaders by generating them with [svgr](https://react-svgr.com/).

1. Go to the `/packages/icons` directory.
2. Add an svg file to the `/packages/icons/svgs` directory (e.g. "MyCustomIcon.svg").

<Callout title="Note" type="info">
  The file name of the svg file will be used as the name of the icon component.
</Callout>

3. Run the following command to generate the icon component:

```bash title="/packages/icons"
pnpm build
```

4. Use the icon component in your project:

```tsx title="page.tsx"
import { MyCustomIcon } from "@workspace/icons";

<MyCustomIcon className="size-6" height={24} width={24} />
```