Starter UI

Installation

How to install dependencies and structure your app.

React 18 or later
Tailwind CSS 3.4 or later

This project and the components are written in TypeScript. We recommend using TypeScript for your project as well.

1. Create project#
Start by creating a new React project using Vite:
```
npm create vite@latest
```
2. Install Starter UI package#
To install Starter UI, run one of the following commands in your terminal:
```
npm install @starter-ui/core @starter-ui/theme
```

Starter UI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official installation guide to install Tailwind CSS. Then you need to add the following code to your `tailwind.config.ts` file:

// tailwind.config.ts
import {colors} from '@starter-ui/theme'

const config: Config = {
  content: [
    // ...
    // make sure it's pointing to the ROOT node_module
    './node_modules/'@starter-ui/core'/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // ...
      colors: {
        ...colors,
        // ...
      }
    },
  },
}

4. Add the Starter UI CSS to your CSS

// src/main.tsx <-- ReactJS -->
// app/layout.tsx <-- NextJS app directory -->

import '@starter-ui/core/index.css'
...

On This Page