UI

ship.pluv.io templates are built with shadcn/ui, 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.

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

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:

pnpm shadcn add checkbox

Using type-safe icons

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

Using lucide-react

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.

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

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

pnpm build

4. Use the icon component in your project:

import { MyCustomIcon } from "@workspace/icons";

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