### 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
```

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

### 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
```

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

### 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
```

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

### 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
```

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

### Install Core Packages with Bun

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

Install the required packages using Bun. Ensure you have a Tailwind CSS project set up before proceeding.

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

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

### 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
```

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

### Install Untitled UI Icons with bun

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

Use this command to install the icon package using bun.

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

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

### Install Core Packages with npm

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

Install the required packages using npm. Ensure you have a Tailwind CSS project set up before proceeding.

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

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

### Install Untitled UI Icons with npm

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

Use this command to install the icon package using npm.

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

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

### Install Core Packages with Yarn

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

Install the required packages using Yarn. Ensure you have a Tailwind CSS project set up before proceeding.

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

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

### Install Untitled UI Icons with yarn

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

Use this command to install the icon package using yarn.

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

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

### 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]
```

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

### 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"
```

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

### 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
```

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

### 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>

```

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

### 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
```

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

### Next.js Project Configuration Prompts

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

Example of interactive prompts during Next.js project initialization. Customize your project name and brand color.

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

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

### 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 Untitled UI Icons PRO with bun

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

Use this command to install the PRO version of Untitled UI Icons using bun after configuring your package manager.

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

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

### Add Specific Component via CLI

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

Install individual components using the Untitled UI CLI. This command allows for targeted installation of components.

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

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

### Install Untitled UI Icons PRO with npm

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

Use this command to install the PRO version of Untitled UI Icons using npm after configuring your package manager.

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

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

### 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
```

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

### Install Untitled UI Icons PRO with yarn

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

Use this command to install the PRO version of Untitled UI Icons using yarn after configuring your package manager.

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

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

### 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
```

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

### Using Imported Icons

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

Example of rendering an imported icon component with a specified size using a CSS class.

```tsx
<Home01 className="size-6" />
```

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

### 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
```

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

### 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
```

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

### Initialize Vite Project with CLI

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

Use this command to create a new Vite project with Untitled UI pre-installed. You will be prompted to answer configuration questions.

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

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

### 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
```

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

### Configure bun for Private Packages

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

Set up your bunfig.toml file to define the scope, registry URL, and authentication token for bun.

```toml
# bunfig.toml

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

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

### 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
```

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

### Update Specific Component via CLI

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

Update previously installed components using the Untitled UI CLI. Use the --overwrite flag to ensure the latest version is applied.

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

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

### 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) {

```

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

### 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
```

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

### 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
```

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

### Configure npm for Private Packages

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

Set up your .npmrc file to use the private registry and authenticate with your access token for npm.

```bash
# .npmrc

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

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

### Scaffold Untitled UI Project with Tailwind

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

Use this command to scaffold a new Untitled UI project and integrate Tailwind CSS tokens. This is useful for projects not using React or for integrating core tokens.

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

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

### 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
```

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

### Interactive login

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

Execute the 'login' command to authenticate with your Untitled UI account. This process may open your browser and send a magic link to your email if you are not already signed in.

```bash
npx untitledui@latest login
```

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

### Applying Dark Mode Styles

Source: https://www.untitledui.com/react/docs/dark-mode

Demonstrates how to apply dark mode styles using CSS variables for text and background colors. Use semantic color classes for automatic dark mode application.

```jsx
<p className="bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-50">Hello, world!</p>
```

```jsx
<p className="bg-primary text-primary">Hello, world!</p>
```

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

### Adjust Search Limit and Use API Key

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

Increase the number of results per category using the `--limit` option. Access PRO components by providing your API key with the `--key` option.

```bash
# Get more results
npx untitledui@latest search "modal file upload" --limit 10
```

```bash
# With PRO access
npx untitledui@latest search "split login testimonial" --key YOUR_API_KEY
```

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

### Import Icons from Main Module

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

Import multiple icons from the main package for use with tree-shaking build tools. This ensures only used icons are bundled.

```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" />
```