whyrating/.context/turbostarter-framework-context/sections/extension/customization/components.md

title, description, url

title	description	url
Components	Manage and customize your extension components.	/docs/extension/customization/components

Components

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

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:

<Tabs items={["Using the CLI", "Copy-pasting"]}> 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:

```bash
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.

```bash
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.

You can always copy-paste a component from the [shadcn/ui](https://ui.shadcn.com/docs/components) website and modify it to your needs.

This is possible, because the components are headless and don't need (in most cases) any additional dependencies.

Copy code from the website, create a new file in the `packages/ui/web/src` directory and paste the code into the file.

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:

// [!code word:card]
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:

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>
  );
}

We recommend using [v0](https://v0.dev) 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.