Untitled UI React

https://www.untitledui.com/react/docs
Admin
Untitled UI React is the world's largest collection of open-source React components built with...
Tokens:36,682
Snippets:262
Trust Score:9.3
Update:2 months ago
Show doc for...
Tokens:
Raw
### Specify Example Placement

Source: https://www.untitledui.com/react/docs/cli

After selecting an example, you will be prompted to specify the directories where the example files and components should be placed.

```bash
? Where would you like to add the dashboard-01 example? › app
? Where would you like to add the components? › components
```

--------------------------------

### Add Page Examples to Project

Source: https://www.untitledui.com/react/docs/cli

Integrate complete page examples or specific examples like dashboards into your project. You can also specify a target directory for the examples.

```bash
# Add a complete page example to your project
npx untitledui@latest example

# Add a specific dashboard example
npx untitledui@latest example dashboards-01/05

# Add example to specific directory
npx untitledui@latest example landing-pages/01 --example-path src/app/landing
```

--------------------------------

### Handle PRO Example Access

Source: https://www.untitledui.com/react/docs/cli

If an example requires PRO access, you will see a lock icon. Authenticate first using the login command, then add the example.

```bash
🔒 The dashboard-01 example requires PRO access.

To access PRO examples:
  → If you've already purchased: npx untitledui@latest login
  → To purchase PRO examples: https://www.untitledui.com/buy/react
```

```bash
npx untitledui@latest login
npx untitledui@latest example dashboard-01
```

--------------------------------

### Add a Nested Example

Source: https://www.untitledui.com/react/docs/cli

For nested examples, specify the full path to the desired example.

```bash
npx untitledui@latest example dashboards-01/01
```

--------------------------------

### Interactively Add Example Pages

Source: https://www.untitledui.com/react/docs/cli

Run this command to interactively browse and select example pages to add to your project. You will be prompted to choose a category and then a specific example.

```bash
npx untitledui@latest example
```

--------------------------------

### Specify Example Path

Source: https://www.untitledui.com/react/docs/cli

Use the `--example-path` option to specify the directory where the main example page should be added.

```bash
# Specify where to add the example page
npx untitledui@latest example dashboard-01/05 --example-path src/app/dashboard
```

--------------------------------

### Add Example with Specific Library Version

Source: https://www.untitledui.com/react/docs/cli

This command shows how to add an example page while explicitly setting the component library version to v7.

```bash
npx untitledui@latest example dashboards-01/05 --lib-version 7
```

--------------------------------

### Select Example Category

Source: https://www.untitledui.com/react/docs/cli

After running the interactive command, you will be prompted to select a category for the example pages.

```bash
? Select which type of example you want to add ›
❯ Application
  Marketing
```

--------------------------------

### Add a Specific Dashboard Example

Source: https://www.untitledui.com/react/docs/cli

Use this command to directly add a specific dashboard example by its name.

```bash
# Add a specific dashboard example
npx untitledui@latest example dashboards-01
```

--------------------------------

### Specify Component Path

Source: https://www.untitledui.com/react/docs/cli

Use the `--path` option to specify the directory where the example's components should be added.

```bash
# Specify where to add the components
npx untitledui@latest example dashboard-01/05 --path components/ui
```

--------------------------------

### Installing PRO Icons

Source: https://www.untitledui.com/react/docs/icons

Install the PRO icon package using your preferred package manager.

```bash
npm install @untitledui-pro/icons
```

```bash
yarn add @untitledui-pro/icons
```

```bash
bun add @untitledui-pro/icons
```

--------------------------------

### Install Required Packages

Source: https://www.untitledui.com/react/docs/installation

Install the necessary dependencies using your preferred package manager.

```bash
npm install @untitledui/icons react-aria-components tailwindcss-react-aria-components tailwind-merge tailwindcss-animate
```

```bash
yarn add @untitledui/icons react-aria-components tailwindcss-react-aria-components tailwind-merge tailwindcss-animate
```

```bash
bun add @untitledui/icons react-aria-components tailwindcss-react-aria-components tailwind-merge tailwindcss-animate
```

--------------------------------

### Install Untitled UI Icons package

Source: https://www.untitledui.com/react/docs/icons

Install the icon library using your preferred package manager.

```bash
npm install @untitledui/icons
```

```bash
yarn add @untitledui/icons
```

```bash
bun add @untitledui/icons
```

--------------------------------

### Initialize Vite Project with Untitled UI

Source: https://www.untitledui.com/react/docs/cli

Create a new Vite project and integrate Untitled UI. After creation, navigate to the project directory and start the development server.

```bash
# Create a new Vite project with Untitled UI
npx untitledui@latest init untitledui-app --vite

# Navigate to your new project
cd untitledui-app

# Start the development server
npm run dev
```

--------------------------------

### Search for Components, Templates, and Icons

Source: https://www.untitledui.com/react/docs/cli

Use the `search` command with a natural language query to find UI elements. Results are grouped by type and include installation commands.

```bash
npx untitledui@latest search "login page with customer reviews"
```

--------------------------------

### Install CLI Tool

Source: https://www.untitledui.com/react/docs/cli

The untitledui CLI tool is available directly as a command-line utility and doesn't require any installation. You can run it using either npx or bunx.

```bash
npx untitledui@latest [command]
```

```bash
bunx untitledui@latest [command]
```

--------------------------------

### Initialize Next.js Project with Untitled UI

Source: https://www.untitledui.com/react/docs/cli

Create a new Next.js project and integrate Untitled UI. After creation, navigate to the project directory and start the development server.

```bash
# Create a new Next.js project with Untitled UI
npx untitledui@latest init untitledui-app --nextjs

# Navigate to your new project
cd untitledui-app

# Start the development server
npm run dev
```

--------------------------------

### Article Layout Example

Source: https://www.untitledui.com/react/docs/typography

Demonstrates a full article layout with lead paragraphs, headings, quotes, and lists. Use this for blog posts or long-form content.

```jsx
<div className="prose prose-centered-quote mx-auto">
    <p className="lead">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa.
        Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.
    </p>
    <hr />
    <h2>Introduction</h2>
    <p>
        Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis
        montes, sit sit. Tellus aliquam enim urna, etiam. Mauris posuere vulputate arcu amet, vitae nisi, tellus tincidunt. At feugiat sapien
        varius id.
    </p>
    <p>
        Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat mollis at volutpat lectus velit, sed auctor. Porttitor fames arcu quis
        fusce augue enim. Quis at habitant diam at. Suscipit tristique risus, at donec. In turpis vel et quam imperdiet. Ipsum molestie aliquet
        sodales id est ac volutpat.
    </p>

    <figure>
        <blockquote>
            <p>
                In a world older and more complete than ours they move finished and complete, gifted with extensions of the senses we have lost
                or never attained, living by voices we shall never hear.
            </p>
        </blockquote>
        <figcaption className="not-prose mt-6 inline-flex flex-col items-center md:mt-8">
            <img src="https://www.untitledui.com/images/avatars/olivia-rhye" className="size-10 rounded-full object-cover" alt="Olivia Rhye" />
            <p className="mt-3 text-primary text-md font-semibold">Olivia Rhye</p>
            <cite className="mt-0.5 not-italic text-tertiary text-md">Product Designer</cite>
        </figcaption>
    </figure>

    <p>
        Dolor enim eu tortor urna sed duis nulla. Aliquam vestibulum, nulla odio nisl vitae. In aliquet pellentesque aenean hac vestibulum
        turpis mi bibendum diam. Tempor integer aliquam in vitae malesuada fringilla.
    </p>

    <p>
        Elit nisi in eleifend sed nisi. Pulvinar at orci, proin imperdiet commodo consectetur convallis risus. Sed condimentum enim dignissim
        adipiscing faucibus consequat, urna. Viverra purus et erat auctor aliquam. Risus, volutpat vulputate posuere purus sit congue convallis
        aliquet. Arcu id augue ut feugiat donec porttitor neque. Mauris, neque ultricies eu vestibulum, bibendum quam lorem id. Dolor lacus,
        eget nunc lectus in tellus, pharetra, porttitor.
    </p>
    <p>
        Ipsum sit mattis nulla quam nulla. Gravida id gravida ac enim mauris id. Non pellentesque congue eget consectetur turpis. Sapien, dictum
        molestie sem tempor. Diam elit, orci, tincidunt aenean tempus. Quis velit eget ut tortor tellus. Sed vel, congue felis elit erat nam
        nibh orci.
    </p>

    <h3>Software and tools</h3>

    <p>
        Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis
        montes, sit sit. Tellus aliquam enim urna, etiam. Mauris posuere vulputate arcu amet, vitae nisi, tellus tincidunt. At feugiat sapien
        varius id.
    </p>
    <p>
        Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat mollis at volutpat lectus velit, sed auctor. Porttitor fames arcu quis
        fusce augue enim. Quis at habitant diam at. Suscipit tristique risus, at donec. In turpis vel et quam imperdiet. Ipsum molestie aliquet
        sodales id est ac volutpat.
    </p>

    <h3>Other resources</h3>

    <p>
        Sagittis et eu at elementum, quis in. Proin praesent volutpat egestas sociis sit lorem nunc nunc sit. Eget diam curabitur mi ac. Auctor
        rutrum lacus malesuada massa ornare et. Vulputate consectetur ac ultrices at diam dui eget fringilla tincidunt. Arcu sit dignissim massa
        erat cursus vulputate gravida id. Sed quis auctor vulputate hac elementum gravida cursus dis.
    </p>
    <ol>
        <li>Lectus id duis vitae porttitor enim gravida morbi.</li>

```

--------------------------------

### Specify Installation Path for Components

Source: https://www.untitledui.com/react/docs/cli

Customize the directory where components are installed using the `--path` flag. This is useful for organizing your project structure.

```bash
npx untitledui@latest add button --path src/components/ui
```

--------------------------------

### Install Tailwind CSS Typography Plugin with Bun

Source: https://www.untitledui.com/react/docs/typography

Use this command to install the official Tailwind CSS Typography plugin using Bun.

```bash
bun add @tailwindcss/typography
```

--------------------------------

### Install Tailwind CSS Typography Plugin with Yarn

Source: https://www.untitledui.com/react/docs/typography

Use this command to install the official Tailwind CSS Typography plugin using Yarn.

```bash
yarn add @tailwindcss/typography
```

--------------------------------

### Install Tailwind CSS Typography Plugin with npm

Source: https://www.untitledui.com/react/docs/typography

Use this command to install the official Tailwind CSS Typography plugin using npm.

```bash
npm install @tailwindcss/typography
```

--------------------------------

### Commit Pre-upgrade Snapshot

Source: https://www.untitledui.com/react/docs/upgrade

Ensures the git working tree is clean before starting the upgrade process.

```bash
git add -A && git commit -m "Pre-upgrade snapshot"
```

--------------------------------

### Initialize a new project via CLI

Source: https://www.untitledui.com/react/docs/installation

Use the CLI to scaffold a new project. Choose between Next.js or Vite templates.

```bash
npx untitledui@latest init --nextjs
```

```bash
npx untitledui@latest init --vite
```

--------------------------------

### Initialize Vite Project with CLI

Source: https://www.untitledui.com/react/docs/cli

Run this command in your root folder to create a new Vite project with Untitled UI components and configurations pre-installed. You will be prompted for project name and brand color.

```bash
npx untitledui@latest init --vite
```

```bash
? What is your project named? › untitled-ui
? Which color would you like to use as the brand color? ›
❯   brand
    error
    warning
    success
  ↓ neutral
```

--------------------------------

### Update installed components

Source: https://www.untitledui.com/react/docs/installation

Use the overwrite flag to update components previously installed via the CLI.

```bash
npx untitledui@latest add [component-name] --overwrite
```

--------------------------------

### Add Components to Project

Source: https://www.untitledui.com/react/docs/cli

Add free components by listing their names, or add PRO components after authenticating. Components are added to your project's components directory.

```bash
# Add free components to existing project
npx untitledui@latest add button toggle avatar

# Add PRO components (requires authentication)
npx untitledui@latest login
npx untitledui@latest add charts-base

# The components will be added to your project's components directory
```

--------------------------------

### Initialize Next.js Project with CLI

Source: https://www.untitledui.com/react/docs/cli

Run this command in your root folder to create a new Next.js project with Untitled UI components and configurations pre-installed. You will be prompted for project name and brand color.

```bash
npx untitledui@latest init --nextjs
```

```bash
? What is your project named? › untitled-ui
? Which color would you like to use as the brand color? ›
❯   brand
    error
    warning
    success
  ↓ neutral
```

--------------------------------

### Configuring Package Manager for PRO Icons

Source: https://www.untitledui.com/react/docs/icons

Set up authentication for the private registry using your access token.

```bash
# .npmrc

@untitledui-pro:registry=https://pkg.untitledui.com
//pkg.untitledui.com/:_authToken=YOUR_TOKEN_HERE
```

```yaml
# .yarnrc.yml

npmScopes:
  untitledui-pro:
    npmRegistryServer: "https://pkg.untitledui.com"
    npmAuthToken: "YOUR_TOKEN_HERE"
```

```toml
# bunfig.toml

[install.scopes]
"untitledui-pro" = { url = "https://pkg.untitledui.com", token = "YOUR_TOKEN_HERE" }
```

--------------------------------

### Add PRO components

Source: https://www.untitledui.com/react/docs/cli

To add PRO components, first log in to your Untitled UI account using the 'login' command, then proceed with adding the desired PRO component.

```bash
npx untitledui@latest login
npx untitledui@latest add pro-component
```

--------------------------------

### Run RTL Migration Preview

Source: https://www.untitledui.com/react/docs/rtl

Use the CLI to preview changes required for RTL support without applying them to the codebase.

```bash
npx untitledui@latest migrate rtl --dry-run
```

--------------------------------

### Add individual components via CLI

Source: https://www.untitledui.com/react/docs/installation

Use this command to add specific components to your project.

```bash
npx untitledui@latest add [component-name]
```

--------------------------------

### Custom Typography Styles

Source: https://www.untitledui.com/react/docs/typography

Create a `typography.css` file and add these custom styles for the Tailwind CSS Typography plugin. This example defines base styles, text, lists, horizontal rules, quotes, and headings.

```css
.prose:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    --tw-prose-body: var(--color-text-tertiary);
    --tw-prose-headings: var(--color-text-primary);
    --tw-prose-lead: var(--color-text-tertiary);
    --tw-prose-links: var(--color-text-tertiary);
    --tw-prose-bold: var(--color-text-primary);
    --tw-prose-counters: var(--color-text-tertiary);
    --tw-prose-bullets: var(--color-text-tertiary);
    --tw-prose-hr: var(--color-border-secondary);
    --tw-prose-quotes: var(--color-text-primary);
    --tw-prose-quote-borders: var(--color-fg-brand-primary_alt);
    --tw-prose-captions: var(--color-text-tertiary);
    --tw-prose-code: var(--color-text-tertiary);
    --tw-prose-pre-code: var(--color-text-tertiary);
    --tw-prose-pre-bg: var(--color-bg-primary);
    --tw-prose-th-borders: var(--color-border-primary);
    --tw-prose-td-borders: var(--color-border-secondary);

    /* Base */
    color: var(--tw-prose-body);
    font-size: var(--text-md);
    line-height: var(--text-md--line-height);
}

.prose :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    /* Text */
    &:where(p) {
        margin-top: calc(var(--spacing) * 4);
        margin-bottom: calc(var(--spacing) * 4);
    }

    &:where([class~="lead"]) {
        font-size: var(--text-md);
        line-height: var(--text-md--line-height);
        margin-top: 1.2em;
        margin-bottom: 1.2em;
    }

    /* Lists */
    &:where(ol) {
        list-style-type: decimal;

        margin-top: calc(var(--spacing) * 4);
        margin-bottom: calc(var(--spacing) * 4);
        padding-inline-start: calc(var(--spacing) * 5.75);
    }
    &:where(ul) {
        list-style-type: disc;

        margin-top: calc(var(--spacing) * 4);
        margin-bottom: calc(var(--spacing) * 4);
        padding-inline-start: calc(var(--spacing) * 5.75);
    }
    &:where(li) {
        margin-top: calc(var(--spacing) * 2);
        margin-bottom: calc(var(--spacing) * 2);
    }
    &:where(ol > li) {
        padding-inline-start: 1px;
        margin-top: 0;
        margin-bottom: 0;
    }
    &:where(ul > li) {
        padding-inline-start: 1px;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Horizontal rules */
    &:where(hr) {
        margin-top: calc(var(--spacing) * 8);
        margin-bottom: calc(var(--spacing) * 8);
    }

    /* Quotes */
    &:where(blockquote) {
        color: var(--tw-prose-quotes);

        border-left-width: 2px;
        border-left-color: var(--tw-prose-quote-borders);

        padding-inline-start: 0;
        margin-top: calc(var(--spacing) * 10);
        margin-bottom: calc(var(--spacing) * 10);
    }
    &:where(blockquote p) {
        margin: 0;
        font-weight: 500;
        font-style: italic;

        font-size: var(--text-xl);
        line-height: var(--text-xl--line-height);
    }
    &:where(blockquote p:first-of-type::before) {
        content: open-quote;
    }
    &:where(blockquote p:last-of-type::after) {
        content: close-quote;
    }

    /* Headings */
    &:where(h1) {

```

--------------------------------

### Verify Build

Source: https://www.untitledui.com/react/docs/upgrade

Runs the project build command to confirm the migration was successful.

```bash
npm run build
```

--------------------------------

### CLI configuration prompts

Source: https://www.untitledui.com/react/docs/installation

Interactive prompts displayed during the initialization process to configure project name and brand color.

```text
? What is your project named? › untitled-ui
? Which color would you like to use as the brand color? ›
❯   brand
    error
    warning
    success
  ↓ neutral
```

--------------------------------

### Specify component path

Source: https://www.untitledui.com/react/docs/cli

Use the '--path' option with the 'add' command to define the specific directory where the component should be placed.

```bash
npx untitledui@latest add button --path src/components
```

--------------------------------

### Add Button with Specific Library Version

Source: https://www.untitledui.com/react/docs/cli

This command demonstrates how to add a component while specifying a particular version of the component library to use.

```bash
npx untitledui@latest add button --lib-version 7
```

--------------------------------

### Add a single component

Source: https://www.untitledui.com/react/docs/cli

Use the 'add' command to include a specific component in your project. Specify the component name after the command.

```bash
npx untitledui@latest add button
```

--------------------------------

### Preview Upgrade Changes

Source: https://www.untitledui.com/react/docs/upgrade

Runs the upgrade in dry-run mode to inspect changes without modifying files.

```bash
npx untitledui@latest upgrade --dry-run
```

```bash
yarn dlx untitledui@latest upgrade --dry-run
```

```bash
bunx untitledui@latest upgrade --dry-run
```

--------------------------------

### Import icons from the main module

Source: https://www.untitledui.com/react/docs/icons

Recommended for build tools supporting tree-shaking to optimize bundle size.

```tsx
import { 
  Home01, 
  Settings01, 
  User01, 
  Bell01 
} from "@untitledui/icons";

<Home01 className="size-5" />
<Settings01 className="size-5" />
<User01 className="size-5" />
<Bell01 className="size-5" />
```

--------------------------------

### Specify project directory

Source: https://www.untitledui.com/react/docs/cli

The '--dir' option allows you to indicate the root directory of your project when adding components.

```bash
npx untitledui@latest add button --dir ./my-project
```

--------------------------------

### Add multiple components

Source: https://www.untitledui.com/react/docs/cli

You can add several components simultaneously by listing their names after the 'add' command, separated by spaces.

```bash
npx untitledui@latest add button toggle avatar
```

--------------------------------

### Select Brand Color via CLI

Source: https://www.untitledui.com/react/docs/theming

When initializing a new project with the `untitledui` CLI, you can choose a brand color from a predefined list. This sets the primary color theme for your project.

```bash
? Which color would you like to use as the brand color?
❯   brand
    error
    warning
    success
    gray
    moss
    green
    teal
  ↓ blue
```

--------------------------------

### Authenticate with Untitled UI

Source: https://www.untitledui.com/react/docs/cli

Log in to access PRO components. This authentication is typically required only once per machine and is saved locally.

```bash
# Authenticate with Untitled UI for PRO components
npx untitledui@latest login

# You only need to do this once per machine
# Your authentication will be saved locally
```

--------------------------------

### Migrate classes with CLI

Source: https://www.untitledui.com/react/docs/rtl

Use the CLI to convert physical direction classes to logical properties. Always run with --dry-run first to preview changes.

```bash
npx untitledui@latest migrate rtl --dry-run
npx untitledui@latest migrate rtl
```

```bash
yarn dlx untitledui@latest migrate rtl --dry-run
yarn dlx untitledui@latest migrate rtl
```

```bash
bunx untitledui@latest migrate rtl --dry-run
bunx untitledui@latest migrate rtl
```

--------------------------------

### Scaffold Tailwind tokens

Source: https://www.untitledui.com/react/docs/installation

Run this command to integrate framework-agnostic Tailwind tokens into your project directory.

```bash
npx untitledui@latest tailwind
```

--------------------------------

### AI Agent Upgrade Instructions

Source: https://www.untitledui.com/react/docs/upgrade

Instructions to provide to an AI coding assistant for automating the v7.0 to v8.0 migration.

```markdown
## Upgrade Untitled UI React from v7.0 to v8.0

1. Read the full upgrade guide at https://www.untitledui.com/react/docs/upgrade
   to understand what changed.

2. Run the automated upgrade:
   npx untitledui@latest upgrade -y

3. Read `upgrade-report.json` in the project root. For each item
   in `manualReview`, navigate to the file and line number and
   apply the change described in the `instruction` field.

4. Ignore pre-existing type errors and linting issues. Focus only
   on errors caused by the migration. If `tsc --noEmit` reports
   errors, check whether they existed before the upgrade.

5. Run `tsc --noEmit` to verify there are no new type errors from
   the migration.

6. Run the project build command to verify everything compiles.

7. Delete `UPGRADE-INSTRUCTIONS.md` from the project root when done.
```

--------------------------------

### Search for Components, Templates, and Icons

Source: https://www.untitledui.com/react/docs/cli

Search for various UI elements using keywords. You can filter searches by type to find only components, templates, or icons.

```bash
# Search for components, templates, and icons
npx untitledui@latest search "modal with file upload"

# Search only templates
npx untitledui@latest search "dark landing page with pricing" --type templates

# Search only icons
npx untitledui@latest search "arrow" --type icons
```

--------------------------------

### Add component interactively

Source: https://www.untitledui.com/react/docs/cli

Running the 'add' command without specifying components initiates an interactive selection process. First, choose a component type, then select specific components within that type.

```bash
npx untitledui@latest add
```

```bash
? What type of component are you adding? 
❯ base
  marketing
  shared-assets
  application
  foundations
```

```bash
? Which components would you like to add? 
❯ ◯ button
  ◯ card
  ◯ dropdown
  ◯ input
  ◯ modal
  ◯ table
  ◯ tabs
  ◯ toast
  ◯ toggle
  ◯ tooltip
```
Tokens:
Raw