Skip to content

UI Components

Turboship uses shadcn/ui as the design system for its UI components.

All UI components are located in the packages/ui folder and their styles are configured using TailwindCSS as the utility-first CSS framework.

Adding New UI Components

In order to add new UI components to the design system, you can run the command bun ui:add inside the packages/ui folder. This command will download the new component file into the components/ui folder which you can access from the @acme/ui package.

Example:

import {Button} from '@acme/ui/button'

Customizing the Theme

To customize the theme, you can edit the packages/ui/global.css and packages/ui/tailwind.config.ts. The global.css file contains the global styles for the design system, while the tailwind.config.ts file contains the configuration for the TailwindCSS framework.

If you are new to shadcn/ui, you can refer to the official documentation for more information on how to use the design system or generate a custom theme.