Components

For the components part, we're using shadcn/ui for atomic, accessible and highly customizable components.

Why shadcn/ui?

shadcn/ui is a powerful tool that allows you to generate pre-designed components with a single command. It's built with Tailwind CSS and Radix UI, and it's highly customizable.

TurboStarter defines two packages that are responsible for the UI part of your app:

@turbostarter/ui - shared styles, themes and assets (e.g. icons)
@turbostarter/ui-web - pre-built UI web components, ready to use in your app

Adding a new component

There are basically two ways to add a new component:

TurboStarter is fully compatible with shadcn CLI, so you can generate new components with single command.

Run the following command from the root of your project:

pnpm --filter @turbostarter/ui-web ui:add

This will launch an interactive command-line interface to guide you through the process of adding a new component where you can pick which component you want to add.

Which components would you like to add? > Space to select. A to toggle all.
Enter to submit.
 
◯  accordion
◯  alert
◯  alert-dialog
◯  aspect-ratio
◯  avatar
◯  badge
◯  button
◯  calendar
◯  card
◯  checkbox

Newly created components will appear in the packages/ui/web/src directory.

Keep it atomic

Keep in mind that you should always try to keep shared components as atomic as possible. This will make it easier to reuse them and to build specific views by composition.

E.g. include components like Button, Input, Card, Dialog in shared package, but keep specific components like LoginForm in your app directory.

Using components

Each component is a standalone entity which has a separate export from the package. It helps to keep things modular, avoid unnecessary dependencies and make tree-shaking possible.

To import a component from the UI package, use the following syntax:

components/my-component.tsx

import {
  Card,
  CardContent,
  CardHeader,
  CardFooter,
  CardTitle,
  CardDescription,
} from "@turbostarter/ui-web/card";

Then you can use it to build a component specific to your app:

components/my-component.tsx

export function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>My Component</CardTitle>
      </CardHeader>
      <CardContent>
        <p>My Component Content</p>
      </CardContent>
      <CardFooter>
        <Button>Click me</Button>
      </CardFooter>
    </Card>
  );
}

Recommendation: use v0 to generate layouts

We recommend using v0 to generate layouts for your app. It's a powerful tool that allows you to generate layouts from the natural language instructions.

Of course, it won't replace a designer, but it can be a good starting point for your layout.

shadcn/ui

ui.shadcn.com

v0 by Vercel

v0.dev

Adding a new component

Using components

shadcn/ui

v0 by Vercel

On this page