RetroUI

https://www.retroui.dev/docs
Admin
RetroUI is a modern UI library for building unique and playful websites using retro and neobrutalist...
Tokens:14,002
Snippets:151
Trust Score:7.3
Update:6 months ago
Show doc for...
Tokens:
Raw
### Default Progress Example

Source: https://www.retroui.dev/docs/components/progress

A basic example of the Progress component. No specific setup is required beyond installation.

```typescript
<Progress value={33} />
```

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

### Default Badge Example

Source: https://www.retroui.dev/docs/components/badge

A basic example of the Badge component. No specific setup or imports are shown here, implying it's ready for use after installation.

```typescript
<Badge>Default</Badge>
```

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

### Installation

Source: https://www.retroui.dev/docs/components/empty

Install the Empty component using pnpm, npm, or yarn.

```APIDOC
## Installation

CLIManual
pnpmnpmyarnbun
`pnpm dlx shadcn@latest add @retroui/empty`
```

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

### Examples

Source: https://www.retroui.dev/docs/components/empty

Examples demonstrating various ways to use the Empty component.

```APIDOC
### Default

PreviewCode
Open in
### No Results
Your search didn't match any items. Try adjusting your filters.
```

```APIDOC
### Custom Icon

PreviewCode
Open in
👻
### No data
There is nothing to show here yet. Imagine you wrote some good stuff here.
```

```APIDOC
### Customize everything

PreviewCode
Open in
### No data
Get started by creating your first item
Create now
```

```APIDOC
### Using with table

PreviewCode
Open in
Invoice| Customer| Status| Method| Amount  
---|---|---|---|---
### Empty
Get started by creating your first invoice.
```

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

### Default Calendar Example

Source: https://www.retroui.dev/docs/components/calendar

A basic example of the calendar component. No specific setup or imports are shown in this preview.

```html
PreviewCode
Open in
April 2026
Su| Mo| Tu| We| Th| Fr| Sa  
---|---|---|---|---|---|---
29| 30| 31| 1| 2| 3| 4  
5| 6| 7| 8| 9| 10| 11  
12| 13| 14| 15| 16| 17| 18  
19| 20| 21| 22| 23| 24| 25  
26| 27| 28| 29| 30| 1| 2  
  
  

Last Updated: 14 Nov, 2025
```

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

### Install Retroui Text Component

Source: https://www.retroui.dev/docs/components/text

Install the @retroui/text package using pnpm.

```bash
pnpm dlx shadcn@latest add @retroui/text
```

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

### Default Menu Example

Source: https://www.retroui.dev/docs/components/menu

A basic example demonstrating the default usage of the Menu component.

```typescript
import {
  Menu,
  MenuTrigger,
  MenuItem,
  MenuSection,
  MenuSeparator,
} from "@retroui/menu";

export default function Page() {
  return (
    <Menu>
      <MenuTrigger>Open Menu</MenuTrigger>
      <MenuItem>Item 1</MenuItem>
      <MenuItem>Item 2</MenuItem>
      <MenuSection title="Section">
        <MenuItem>Section Item 1</MenuItem>
        <MenuSeparator />
        <MenuItem>Section Item 2</MenuItem>
      </MenuSection>
    </Menu>
  );
}
```

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

### Install Table Component

Source: https://www.retroui.dev/docs/components/table

Install the Table component using pnpm. This command downloads and installs the necessary package.

```bash
pnpm dlx shadcn@latest add @retroui/table
```

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

### Install Select Component

Source: https://www.retroui.dev/docs/components/select

Use the CLI to add the Select component to your project.

```bash
pnpm dlx shadcn@latest add @retroui/select
```

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

### Install Tooltip Component

Source: https://www.retroui.dev/docs/components/tooltip

Use the CLI to add the Tooltip component to your project.

```bash
pnpm dlx shadcn@latest add @retroui/tooltip
```

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

### Install Utility Library

Source: https://www.retroui.dev/docs/install/nextjs

Adds the required utils.ts file to your project if it is missing.

```bash
pnpm dlx shadcn@latest add https://retroui.dev/r/utils.json
```

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

### Install Drawer Component

Source: https://www.retroui.dev/docs/components/drawer

Use the CLI to add the Drawer component to your project.

```bash
pnpm dlx shadcn@latest add @retroui/drawer
```

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

### Install Menu Component with pnpm

Source: https://www.retroui.dev/docs/components/menu

Use this command to install the Menu component using pnpm.

```bash
pnpm dlx shadcn@latest add @retroui/menu
```

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

### Default Accordion Example

Source: https://www.retroui.dev/docs/components/accordion

A basic example demonstrating the default behavior of the Accordion component. This setup includes three collapsible items.

```html
### Accordion Item 1
### Accordion Item 2
### Accordion Item 3
```

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

### Install cn dependencies

Source: https://www.retroui.dev/docs/utils/cn

Install the required clsx and tailwind-merge packages via npm.

```bash
npm install clsx tailwind-merge
```

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

### Install Card Component

Source: https://www.retroui.dev/docs/components/card

Use this command to install the Card component via pnpm. Ensure you have pnpm installed.

```bash
pnpm dlx shadcn@latest add @retroui/card
```

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

### Install Calendar Component

Source: https://www.retroui.dev/docs/components/calendar

Use this command to install the calendar component using pnpm. Ensure you have pnpm installed.

```bash
pnpm dlx shadcn@latest add @retroui/calendar
```

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

### Install Retroui Empty Component

Source: https://www.retroui.dev/docs/components/empty

Use this command to install the @retroui/empty package via pnpm.

```bash
pnpm dlx shadcn@latest add @retroui/empty
```

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

### Install Radio Component

Source: https://www.retroui.dev/docs/components/radio

Use this command to install the Radio component via pnpm.

```bash
pnpm dlx shadcn@latest add @retroui/radio
```

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

### Install Accordion Component

Source: https://www.retroui.dev/docs/components/accordion

Use this command to install the Accordion component via pnpm. Ensure you have pnpm installed.

```bash
pnpm dlx shadcn@latest add @retroui/accordion
```

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

### Install Context Menu Component

Source: https://www.retroui.dev/docs/components/context-menu

Use the CLI to add the Context Menu component to your project.

```bash
pnpm dlx shadcn@latest add @retroui/context-menu
```

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

### Install Line Chart Component

Source: https://www.retroui.dev/docs/charts/line-chart

Use this command to install the line chart component via pnpm.

```bash
pnpm dlx shadcn@latest add 'https://retroui.dev/r/line-chart.json'
```

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

### Install Switch Component

Source: https://www.retroui.dev/docs/components/switch

Install the Switch component using pnpm. This command adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @retroui/switch
```

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

### Install RetroUI Component

Source: https://www.retroui.dev/docs/install/nextjs

Use the CLI to add specific components like the Button to your project.

```bash
pnpm dlx shadcn@latest add 'https://retroui.dev/r/button.json'
```

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

### Install Pie Chart Component

Source: https://www.retroui.dev/docs/charts/pie-chart

Use the CLI to add the pie chart component to your project.

```bash
pnpm dlx shadcn@latest add 'https://retroui.dev/r/pie-chart.json'
```

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

### Install Carousel Component

Source: https://www.retroui.dev/docs/components/carousel

Use this command to install the carousel component via pnpm.

```bash
pnpm dlx shadcn@latest add @retroui/carousel
```

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

### Default Alert

Source: https://www.retroui.dev/docs/components/alert

A basic alert component. No specific setup is required beyond installation.

```typescript
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@retroui/alert";

function AlertDemo() {
  return (
    <Alert>
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        This where you can write description that no one reads...
      </AlertDescription>
    </Alert>
  );
}

```

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

### Install RetroUI Dialog

Source: https://www.retroui.dev/docs/components/dialog

Use the CLI to add the Dialog component to your project.

```bash
pnpm dlx shadcn@latest add @retroui/dialog
```

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

### Install Avatar Component

Source: https://www.retroui.dev/docs/components/avatar

Use the CLI to add the Avatar component to your project.

```bash
pnpm dlx shadcn@latest add @retroui/avatar
```

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

### Install Popover component

Source: https://www.retroui.dev/docs/components/popover

Use the CLI to add the Popover component to your project.

```bash
pnpm dlx shadcn@latest add @retroui/popover
```

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

### Default Carousel Example

Source: https://www.retroui.dev/docs/components/carousel

A basic example of the carousel component.

```typescript
1
2
3
4
5
Previous slideNext slide
```

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

### Install Slider Component

Source: https://www.retroui.dev/docs/components/slider

Use the CLI to add the slider component to your project.

```bash
pnpm dlx shadcn@latest add @retroui/slider
```

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

### Install Badge Component

Source: https://www.retroui.dev/docs/components/badge

Install the Badge component using pnpm. This command adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @retroui/badge
```

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

### Install Command Component

Source: https://www.retroui.dev/docs/components/command

Use the package manager command to add the component to your project.

```bash
pnpm dlx shadcn@latest add @retroui/command
```

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

### Install Progress Component

Source: https://www.retroui.dev/docs/components/progress

Install the Progress component using pnpm. This command adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @retroui/progress
```

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

### Install Retroui Input

Source: https://www.retroui.dev/docs/components/input

Install the Retroui Input component using pnpm. This command adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @retroui/input
```

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

### Install Alert Component

Source: https://www.retroui.dev/docs/components/alert

Install the Alert component using pnpm. This command adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @retroui/alert
```

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

### Default Input Example

Source: https://www.retroui.dev/docs/components/input

A basic example of the Retroui Input component. This shows the default appearance and behavior.

```typescript
<Input />
```

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

### Install Toggle Group

Source: https://www.retroui.dev/docs/components/toggle-group

Use the CLI to add the Toggle Group component to your project.

```bash
pnpm dlx shadcn@latest add @retroui/toggle-group
```

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

### Create Vite React Project

Source: https://www.retroui.dev/docs/install/vite

Use this command to start a new React project with the TypeScript template using pnpm.

```bash
pnpm create vite@latest
```

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

### Install Button Component

Source: https://www.retroui.dev/docs/components/button

Install the Button component using pnpm. This command adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @retroui/button
```

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

### Install Tailwind CSS and Vite Plugin

Source: https://www.retroui.dev/docs/install/vite

Install Tailwind CSS and its Vite plugin. Ensure to replace the content of src/index.css with the provided import.

```bash
pnpm install tailwindcss @tailwindcss/vite
```

```css
@import "tailwindcss";
```

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

### Default Table Example

Source: https://www.retroui.dev/docs/components/table

A basic example of the Table component displaying invoice data. No special configurations are applied.

```html
Invoice| Customer| Status| Method| Amount
---|---|---|---|---
INV001| John Doe| Paid| Credit Card| $250.00
INV002| Jane Doe| Pending| PayPal| $150.00
INV003| Mark Doe| Unpaid| Bank Transfer| $350.00
INV004| Robert Doe| Paid| Credit Card| $450.00
INV005| Isabella Doe| Paid| PayPal| $550.00
INV006| Mrs. Doe| Pending| Bank Transfer| $200.00
INV007| Mr. Doe| Unpaid| Credit Card| $300.00
Total| $2,500.00
```

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

### Install Area Chart Component

Source: https://www.retroui.dev/docs/charts/area-chart

Use this command to install the Area Chart component via pnpm.

```bash
pnpm dlx shadcn@latest add 'https://retroui.dev/r/area-chart.json'
```

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

### Install Retroui TOC

Source: https://www.retroui.dev/docs/components/toc

Use this command to add the Retroui TOC component to your project via pnpm.

```bash
pnpm dlx shadcn@latest add @retroui/toc
```

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

### Install Toggle Component

Source: https://www.retroui.dev/docs/components/toggle

Use the package manager CLI to add the Toggle component to your project.

```bash
pnpm dlx shadcn@latest add @retroui/toggle
```

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

### Install Breadcrumb Component

Source: https://www.retroui.dev/docs/components/breadcrumb

Install the breadcrumb component using pnpm. This command adds the necessary package to your project.

```bash
pnpm dlx shadcn@latest add @retroui/breadcrumb
```

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

### Install Bar Chart Component

Source: https://www.retroui.dev/docs/charts/bar-chart

Install the Bar Chart component using pnpm. This command adds the component to your project.

```bash
pnpm dlx shadcn@latest add 'https://retroui.dev/r/bar-chart.json'
```

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

### Default Bar Chart Example

Source: https://www.retroui.dev/docs/charts/bar-chart

A basic example of the Bar Chart component. Ensure your data is in the correct format.

```typescript
import {
	BarChart
} from "@retroui/bar-chart";

const data = [
	{ month: "Jan", sales: 120, "profit": 80 },
	{ month: "Feb", sales: 150, "profit": 100 },
	{ month: "Mar", sales: 100, "profit": 60 },
];

export default function Page() {
	return (
		<BarChart
			data={data}
			index="month"
			categories={["sales", "profit"]}
		/>
	);
}
```

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

### Install Node Types for Vite Configuration

Source: https://www.retroui.dev/docs/install/vite

Install the types for Node.js to ensure proper type checking in your Vite configuration file.

```bash
pnpm install -D @types/node
```

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

### Install Checkbox component

Source: https://www.retroui.dev/docs/components/checkbox

Use the shadcn CLI to add the Checkbox component to your project.

```bash
pnpm dlx shadcn@latest add @retroui/checkbox
```

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

### Default Switch Example

Source: https://www.retroui.dev/docs/components/switch

A basic example of the Switch component in its default state. This is typically used for enabling or disabling features.

```typescript
<Switch />
```

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

### Install Label Component via CLI

Source: https://www.retroui.dev/docs/components/label

Use the package manager of your choice to add the Label component to your project.

```bash
pnpm dlx shadcn@latest add @retroui/label
```

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

### Install Loader Component

Source: https://www.retroui.dev/docs/components/loader

Command to add the Loader component to your project using the shadcn CLI.

```bash
pnpm dlx shadcn@latest add @retroui/loader
```

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

### Disabled Switch Example

Source: https://www.retroui.dev/docs/components/switch

An example of a disabled Switch component. This is useful when a setting is not yet available or cannot be changed by the user.

```typescript
<Switch disabled />
```

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

### Import and Use Component

Source: https://www.retroui.dev/docs/install/nextjs

Example of importing and rendering a RetroUI component in a Next.js page.

```tsx
import { Button } from "@/components/retroui/Button";
 
export default function ButtonExample() {
  return <Button>Click Me!</Button>;
}
```

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

### Install Sonner using pnpm

Source: https://www.retroui.dev/docs/components/sonner

Use this command to add the Sonner component to your project via pnpm.

```bash
pnpm dlx shadcn@latest add @retroui/sonner
```

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

### Configure Next.js Fonts

Source: https://www.retroui.dev/docs/install/nextjs

Setup Archivo Black and Space Grotesk fonts in the RootLayout.

```tsx
import { Archivo_Black, Space_Grotesk } from "next/font/google";
 
const archivoBlack = Archivo_Black({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-head",
  display: "swap",
});
 
const space = Space_Grotesk({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-sans",
  display: "swap",
});
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${archivoBlack.variable} ${space.variable}`}>
        {children}
      </body>
    </html>
  );
}
```

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

### Button with Icon Example

Source: https://www.retroui.dev/docs/components/button

Renders a button with an icon. Ensure you have an icon component available and imported.

```typescript
import {
  Button
} from "@retroui/button";
import {
  Icon
} from "@retroui/icon";

export default function Page() {
  return (
    <Button>
      <Icon name="check" />
      With Icon
    </Button>
  );
}
```

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

### Implement Loader Component

Source: https://www.retroui.dev/docs/components/loader

Examples of using the Loader component with default settings, variants, and custom animation configurations.

```tsx
import { Loader } from "@/components/ui/loader"
 
// Default
<Loader />
 
// With variants
<Loader variant="secondary" size="lg" />
 
// Custom configuration
<Loader
  count={4}           // Number of squares
  duration={1.2}      // Animation duration in seconds
  delayStep={120}     // Delay between squares in milliseconds
/>
 
// Fully customized
<Loader
  variant="secondary"
  size="lg"
  count={4}
  duration={1.2}
  delayStep={120}
  className="my-4"
/>
```

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

### Link Button Example

Source: https://www.retroui.dev/docs/components/button

Renders a button that appears as a link. Use for navigation or text-based actions.

```typescript
import {
  Button
} from "@retroui/button";

export default function Page() {
  return (
    <Button variant="link">Click Me!</Button>
  );
}
```

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

### Primary Button Example

Source: https://www.retroui.dev/docs/components/button

Renders a primary styled button. Use this for the main call to action.

```typescript
import {
  Button
} from "@retroui/button";

export default function Page() {
  return (
    <Button>Click Me!</Button>
  );
}
```

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

### Retro Player Card Example

Source: https://www.retroui.dev/docs/components/card

A card simulating a music player interface, showing the current track, artist, playback progress, and update information. Suitable for media-related features.

```html
Now playing
Punk Anthem Music
by Punk
01:10
02:15
Last Updated: 09 Sep, 2025
```

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

### Secondary Button Example

Source: https://www.retroui.dev/docs/components/button

Renders a secondary styled button. Suitable for less prominent actions.

```typescript
import {
  Button
} from "@retroui/button";

export default function Page() {
  return (
    <Button variant="secondary">Click Me!</Button>
  );
}
```

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

### Outline Button Example

Source: https://www.retroui.dev/docs/components/button

Renders an outline styled button. Ideal for actions that need visual distinction without strong emphasis.

```typescript
import {
  Button
} from "@retroui/button";

export default function Page() {
  return (
    <Button variant="outline">Click Me!</Button>
  );
}
```

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

### Testimonial Card Example

Source: https://www.retroui.dev/docs/components/card

A card format for displaying customer testimonials, including the quote, name, and title. Useful for social proof sections.

```html
" RetroUI is the cooling looking UI library out there! "
Leroy Jenkins
CEO of Uber
```

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

### Basic Card Example

Source: https://www.retroui.dev/docs/components/card

A simple card displaying a title and descriptive text. Suitable for general information display.

```html
### This is Card Title
I can not find what to write here.. so imagine I wrote some good stuff.
```

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

### Product Card Example

Source: https://www.retroui.dev/docs/components/card

A card designed to showcase product details, including name, price, and an 'Add to cart' button. Ideal for e-commerce interfaces.

```html
### Classic 8-bit Gameboy
$29.90
Add to cart
```

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

### Input with Label

Source: https://www.retroui.dev/docs/components/input

Example of the Retroui Input component with an associated label. Use this to provide context for the input field.

```typescript
<Input label="Favorite Pokemon" />
```

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

### Default Breadcrumb Example

Source: https://www.retroui.dev/docs/components/breadcrumb

A basic implementation of the breadcrumb component. Ensure you have the necessary imports for the Breadcrumb, BreadcrumbItem, and BreadcrumbLink.

```typescript
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@retroui/breadcrumb";

export function BreadcrumbDefault() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/components">
            Components
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}
```

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

### Initialize RetroUI Project

Source: https://www.retroui.dev/docs/install/nextjs

Run this command to create a new Next.js project or initialize RetroUI in an existing one.

```bash
pnpm dlx shadcn@latest init
```

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

### Table with Checkbox Selection

Source: https://www.retroui.dev/docs/components/table

Example of a Table component configured to include checkboxes for row selection. It displays employee data and a summary of selected items.

```html
| Name| Department| Status| Salary
---|---|---|---|
| Alice Johnson| Engineering| Active| $ 85,000
| Bob Smith| Product| Active| $ 95,000
| Carol Williams| Design| On Leave| $ 70,000
| David Brown| Engineering| Active| $ 90,000
| Eve Davis| Engineering| Active| $ 75,000
| Frank Wilson| Marketing| Inactive| $ 80,000
Selected: 0 / 6| $ 495000
```

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

### Table with Sticky Header

Source: https://www.retroui.dev/docs/components/table

Demonstrates a Table component with a sticky header, ensuring the header remains visible when scrolling through a large dataset. This example shows transaction data.

```html
ID| Date| Description| Category| Amount
---|---|---|---|---
TXN001| 2024-01-15| Payment from Customer A| Revenue| $1,250.00
TXN002| 2024-01-15| Office Supplies Purchase| Expense| -$85.50
TXN003| 2024-01-16| Software License Renewal| Expense| -$299.99
TXN004| 2024-01-16| Payment from Customer B| Revenue| $750.00
TXN005| 2024-01-17| Marketing Campaign| Expense| -$500.00
TXN006| 2024-01-17| Freelancer Payment| Expense| -$400.00
TXN007| 2024-01-18| Payment from Customer C| Revenue| $2,100.00
TXN008| 2024-01-18| Equipment Purchase| Expense| -$1,200.00
TXN009| 2024-01-19| Subscription Fee| Expense| -$49.99
TXN010| 2024-01-19| Payment from Customer D| Revenue| $890.00
TXN011| 2024-01-20| Travel Expenses| Expense| -$350.00
TXN012| 2024-01-20| Payment from Customer E| Revenue| $1,500.00
```

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

### Stacked Bar Chart Example

Source: https://www.retroui.dev/docs/charts/bar-chart

Renders bars as stacked segments, showing the contribution of each category to the total. Set the 'stacked' prop to true.

```typescript
import {
	BarChart
} from "@retroui/bar-chart";

const data = [
	{ month: "Jan", sales: 120, "profit": 80 },
	{ month: "Feb", sales: 150, "profit": 100 },
	{ month: "Mar", sales: 100, "profit": 60 },
];

export default function Page() {
	return (
		<BarChart
			data={data}
			index="month"
			categories={["sales", "profit"]}
			stacked={true}
		/>
	);
}
```

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

### Import and Use RetroUI Button Component

Source: https://www.retroui.dev/docs/install/vite

After installation, import the Button component from the specified path and use it in your React components.

```javascript
import { Button } from "@/components/retroui/Button";

export default function ButtonExample() {
  return <Button>Click Me!</Button>;
}
```

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

### Horizontal Bar Chart Example

Source: https://www.retroui.dev/docs/charts/bar-chart

Configures the bar chart to display horizontally. Use the 'alignment' prop and set it to 'horizontal'.

```typescript
import {
	BarChart
} from "@retroui/bar-chart";

const data = [
	{ month: "Jan", sales: 120, "profit": 80 },
	{ month: "Feb", sales: 150, "profit": 100 },
	{ month: "Mar", sales: 100, "profit": 60 },
];

export default function Page() {
	return (
		<BarChart
			data={data}
			index="month"
			categories={["sales", "profit"]}
			alignment="horizontal"
		/>
	);
}
```

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

### Collapsed Breadcrumb Example

Source: https://www.retroui.dev/docs/components/breadcrumb

Demonstrates a collapsed breadcrumb, useful for long navigation paths. The `maxVisibleItems` and `itemsBeforeCollapse` props control the collapsing behavior.

```typescript
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@retroui/breadcrumb";

export function BreadcrumbCollapsed() {
  return (
    <Breadcrumb
      maxVisibleItems={3}
      itemsBeforeCollapse={1}
      separator="..."
    >
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/components">
            Components
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/components/ui">
            UI
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}
```

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

### Breadcrumb with Custom Separator

Source: https://www.retroui.dev/docs/components/breadcrumb

Customize the separator between breadcrumb items. This example uses a custom SVG icon as the separator.

```typescript
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@retroui/breadcrumb";

export function BreadcrumbCustomSeparator() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="12"
            height="12"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="m12 19 7-7-7-7" />
            <path d="M5 12h14" />
          </svg>
        </BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbLink href="/components">
            Components
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}
```

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

### Rounded Badge Example

Source: https://www.retroui.dev/docs/components/badge

Shows how to apply a fully rounded style to the Badge component using the 'rounded="full"' prop. This creates a circular or pill-shaped badge.

```typescript
<Badge rounded="full">Rounded</Badge>
```

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

### Loader Component Usage

Source: https://www.retroui.dev/docs/components/loader

Demonstrates various ways to implement the Loader component, from default usage to custom configurations.

```APIDOC
## Loader Component Usage

### Description
This section provides examples of how to use the Loader component with different configurations and variants.

### Examples

#### Default Loader
```jsx
<Loader />
```

#### Loader with Variants and Sizes
```jsx
<Loader variant="secondary" size="lg" />
```

#### Custom Loader Configuration
```jsx
<Loader
  count={4}           // Number of squares
  duration={1.2}      // Animation duration in seconds
  delayStep={120}     // Delay between squares in milliseconds
/>
```

#### Fully Customized Loader
```jsx
<Loader
  variant="secondary"
  size="lg"
  count={4}
  duration={1.2}
  delayStep={120}
  className="my-4"
/>
```

### Props

- **variant** (string) - Optional - Defines the style variant for the component. Possible values: `default`, `secondary`, `outline`. Default: `default`.
- **size** (string) - Optional - Controls the size of the loader squares. Possible values: `sm`, `md`, `lg`. Default: `md`.
- **count** (number) - Optional - Sets the number of bouncing squares. Default: `3`.
- **duration** (number) - Optional - Controls the animation duration in seconds. Default: `0.5`.
- **delayStep** (number) - Optional - Defines the delay between squares in milliseconds. Default: `100`.
- **className** (string) - Optional - Allows for adding additional CSS classes for custom styling.
- **asChild** (boolean) - Optional - When `true`, merges the component's props onto its immediate child element. Default: `false`.

### Accessibility

- `role="status"`
- `aria-label="Loading..."`
```

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

### Define Theme CSS Variables

Source: https://www.retroui.dev/docs/install/nextjs

Configure the RetroUI theme and color palette in global.css.

```css
@theme {
  --font-head: var(--font-head);
  --font-sans: var(--font-sans);
  --radius: var(--radius);
 
  --shadow-xs: 1px 1px 0 0 var(--border);
  --shadow-sm: 2px 2px 0 0 var(--border);
  --shadow: 3px 3px 0 0 var(--border);
  --shadow-md: 4px 4px 0 0 var(--border);
  --shadow-lg: 6px 6px 0 0 var(--border);
  --shadow-xl: 10px 10px 0 1px var(--border);
  --shadow-2xl: 16px 16px 0 1px var(--border);
 
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-primary-hover: var(--primary-hover);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
}
 
:root {
  --radius: 0;
  --background: #fff;
  --foreground: #000;
  --card: #fff;
  --card-foreground: #000;
  --primary: #ffdb33;
  --primary-hover: #ffcc00;
  --primary-foreground: #000;
  --secondary: #000;
  --secondary-foreground: #fff;
  --muted: #aeaeae;
  --muted-foreground: #5a5a5a;
  --accent: #fae583;
  --accent-foreground: #000;
  --destructive: #e63946;
  --destructive-foreground: #fff;
  --border: #000;
}
 
.dark {
  --radius: 0;
  --background: #1a1a1a;
  --foreground: #f5f5f5;
  --card: #242424;
  --card-foreground: #f5f5f5;
  --primary: #ffdb33;
  --primary-hover: #ffcc00;
  --primary-foreground: #000;
  --secondary: #3a3a3a;
  --secondary-foreground: #f5f5f5;
  --muted: #3f3f46;
  --muted-foreground: #a0a0a0;
  --accent: #fae583;
  --accent-foreground: #000;
  --destructive: #e63946;
  --destructive-foreground: #fff;
  --border: #3a3a3a;
}
```

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

### Import Popover components

Source: https://www.retroui.dev/docs/components/popover

Import the necessary sub-components from the local project directory.

```typescript
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/retroui/Popover";
```

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

### Show Default Toast

Source: https://www.retroui.dev/docs/components/sonner

Demonstrates how to display a basic toast notification.

```typescript
import { toast } from "@retroui/sonner";

toa
```

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

### Configure tsconfig.json for Path Aliases

Source: https://www.retroui.dev/docs/install/vite

Add 'baseUrl' and 'paths' to tsconfig.json to enable path aliases like '@/*' for easier module resolution.

```json
{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
```

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

### API Reference

Source: https://www.retroui.dev/docs/components/empty

The Empty component is composed of several sub-components.

```APIDOC
## API Reference

The Empty component is composed of several sub-components:

  * `Empty` - The main component wrapper
  * `Empty.Content` - Wrapper for the content elements
  * `Empty.Icon` - Section for displaying an icon
  * `Empty.Title` - The main heading for the empty state
  * `Empty.Separator` - A visual separator line
  * `Empty.Description` - Supporting text for the empty state

Last Updated: 13 Jan, 2026
```

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

### Import Toggle Group Components

Source: https://www.retroui.dev/docs/components/toggle-group

Import the necessary components from the local registry path.

```typescript
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/components/retroui/toggle-group";
```

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

### Configure tsconfig.app.json for Path Aliases

Source: https://www.retroui.dev/docs/install/vite

Add 'baseUrl' and 'paths' to tsconfig.app.json to help your IDE resolve path aliases correctly.

```json
{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}
```

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

### Define RetroUI Theme CSS Variables

Source: https://www.retroui.dev/docs/install/vite

Set up CSS variables for fonts, radius, shadows, and color schemes to apply the RetroUI theme. Includes light and dark mode definitions.

```css
@theme {
  --font-head: 'Archivo Black', sans-serif;
  --font-sans: 'Space Grotesk', sans-serif;
  --radius: var(--radius);

  --shadow-xs: 1px 1px 0 0 var(--border);
  --shadow-sm: 2px 2px 0 0 var(--border);
  --shadow: 3px 3px 0 0 var(--border);
  --shadow-md: 4px 4px 0 0 var(--border);
  --shadow-lg: 6px 6px 0 0 var(--border);
  --shadow-xl: 10px 10px 0 1px var(--border);
  --shadow-2xl: 16px 16px 0 1px var(--border);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-primary-hover: var(--primary-hover);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
}

:root {
  --radius: 0;
  --background: #fff;
  --foreground: #000;
  --card: #fff;
  --card-foreground: #000;
  --primary: #ffdb33;
  --primary-hover: #ffcc00;
  --primary-foreground: #000;
  --secondary: #000;
  --secondary-foreground: #fff;
  --muted: #aeaeae;
  --muted-foreground: #5a5a5a;
  --accent: #fae583;
  --accent-foreground: #000;
  --destructive: #e63946;
  --destructive-foreground: #fff;
  --border: #000;
}

.dark {
  --radius: 0;
  --background: #1a1a1a;
  --foreground: #f5f5f5;
  --card: #242424;
  --card-foreground: #f5f5f5;
  --primary: #ffdb33;
  --primary-hover: #ffcc00;
  --primary-foreground: #000;
  --secondary: #3a3a3a;
  --secondary-foreground: #f5f5f5;
  --muted: #3f3f46;
  --muted-foreground: #a0a0a0;
  --accent: #fae583;
  --accent-foreground: #000;
  --destructive: #e63946;
  --destructive-foreground: #fff;
  --border: #3a3a3a;
}
```

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

### Import RetroUI Fonts

Source: https://www.retroui.dev/docs/install/vite

Add these links to your index.html or import them in styles.css to use the Archivo Black and Space Grotesk fonts.

```html
<!-- index.html -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@300..700&display=swap"
      rel="stylesheet"
    />
```

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

### Implement cn utility

Source: https://www.retroui.dev/docs/utils/cn

Copy this implementation into your project's lib/utils.ts file to enable conditional class merging.

```typescript
import clsx from "clsx";
import { ClassNameValue, twMerge } from "tailwind-merge";
 
export function cn(...classes: ClassNameValue[]) {
  return twMerge(clsx(classes));
}
```

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

### Text Component API

Source: https://www.retroui.dev/docs/components/text

Documentation for the Text component props and usage.

```APIDOC
## Text Component

### Description
The `Text` component is a versatile React component that provides various heading and paragraph styles. It leverages class-variance-authority for managing variants and allows for the customization of heading elements.

### Props
- **className** (string) - Optional - Additional CSS classes to customize the component's styling.
- **as** (string) - Optional - Determines the heading and text style. Default is "p". Variants include: "h1", "h2", "h3", "h4", "h5", "h6", "p".
```

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

### Badge Sizes

Source: https://www.retroui.dev/docs/components/badge

Illustrates how to adjust the size of the Badge component using the 'size' prop. Available sizes are 'small', 'medium', and 'large'.

```typescript
<Badge size="sm">small</Badge>
```

```typescript
<Badge size="md">medium</Badge>
```

```typescript
<Badge size="lg">large</Badge>
```

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

### Import Label Component

Source: https://www.retroui.dev/docs/components/label

Import the Label component into your React files to begin using it.

```typescript
import { Label } from "@/components/retroui/Label";
```

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

### Radio Component Sizes

Source: https://www.retroui.dev/docs/components/radio

Illustrates the different size options for the Radio component: Small, Medium, and Large.

```typescript
<RadioGroup defaultValue="1" size="sm">
  <Radio value="1">Small</Radio>
  <Radio value="2">Medium</Radio>
  <Radio value="3">Large Size</Radio>
</RadioGroup>
```

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

### Pie Chart API Reference

Source: https://www.retroui.dev/docs/charts/pie-chart

Reference for the properties available for the Pie Chart component.

```APIDOC
## Pie Chart Component API Reference

### Description
This section details the configurable properties for the Pie Chart component.

### Properties
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **data** (Record<string, any>[]): Required - Array of data objects to display. Defaults to `[]`.
- **dataKey** (string): Optional - Key for the data values.
- **nameKey** (string): Optional - Key for the category names.
- **colors** (string[]): Optional - Array of colors for the pie segments. Defaults to `["var(--chart-1)", ...]`.
- **innerRadius** (number): Optional - Inner radius (use > 0 for donut chart). Defaults to `0`.
- **outerRadius** (number): Optional - Outer radius of the pie. Defaults to `80`.
- **tooltipBgColor** (string): Optional - Background color for tooltips. Defaults to `"var(--background)"`.
- **tooltipBorderColor** (string): Optional - Border color for tooltips. Defaults to `"var(--border)"`.
- **valueFormatter** ((value: number) => string): Optional - Function to format values. Defaults to `(value) => value.toString()`.
- **showTooltip** (boolean): Optional - Whether to show tooltips on hover. Defaults to `true`.
- **className** (string): Optional - Additional CSS classes.

### Request Example
None

### Response
#### Success Response (200)
None

#### Response Example
None
```

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

### Radio Component Variants

Source: https://www.retroui.dev/docs/components/radio

Demonstrates the different visual styles available for the Radio component: Default, Outline, and Solid.

```typescript
<RadioGroup defaultValue="1">
  <Radio value="1">Option 1</Radio>
  <Radio value="2">Option 2</Radio>
  <Radio value="3">Option 3</Radio>
</RadioGroup>
```

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

### Basic Toggle Group Usage

Source: https://www.retroui.dev/docs/components/toggle-group

Implement a single-selection toggle group with defined values.

```jsx
<ToggleGroup type="single">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
  <ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>
```

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

### Implement Popover structure

Source: https://www.retroui.dev/docs/components/popover

Wrap the trigger and content within the Popover component.

```jsx
<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>Place content for the popover here.</PopoverContent>
</Popover>
```

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

### Default TOC Generation

Source: https://www.retroui.dev/docs/components/toc

Renders a table of contents based on the markdown content of the current page. No specific imports are shown, implying it's used within a Retroui environment.

```typescript
<TOC />
```

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

### Import RetroUI Fonts in CSS

Source: https://www.retroui.dev/docs/install/vite

Alternatively, import the specified Google Fonts directly into your CSS file.

```css
/* styles.css */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
```

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

### Line Chart API Reference

Source: https://www.retroui.dev/docs/charts/line-chart

API reference for the Line Chart component, detailing its properties, types, default values, and descriptions.

```APIDOC
## Line Chart Component API Reference

### Description
A customizable line chart component to visualize trends and data over time with smooth curves and data points.

### Properties

#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- None

### Properties Table
Prop| Type| Default| Description  
---|---|---|---
`data`| `Record<string, any>[]`| `[]`| Array of data objects to display
`index`| `string`| -| Key for the x-axis (category) data
`categories`| `string[]`| `[]`| Array of keys for the data values to display as lines
`strokeColors`| `string[]`| `["var(--foreground)"]`| Array of stroke colors for the lines
`strokeWidth`| `number`| `2`| Width of the line strokes
`dotSize`| `number`| `4`| Size of the data point dots
`tooltipBgColor`| `string`| `"var(--background)"`| Background color for tooltips
`tooltipBorderColor`| `string`| `"var(--border)"`| Border color for tooltips
`gridColor`| `string`| `"var(--muted)"`| Color for the grid lines
`valueFormatter`| `(value: number) => string`| `(value) => value.toString()`| Function to format values
`showGrid`| `boolean`| `true`| Whether to show grid lines
`showTooltip`| `boolean`| `true`| Whether to show tooltips on hover
`className`| `string`| -| Additional CSS classes

### Request Example
```json
{
  "example": "No request body for this component"
}
```

### Response
#### Success Response (200)
- **None**

#### Response Example
```json
{
  "example": "No response body for this component"
}
```
```

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

### Displaying Headings with Text Component

Source: https://www.retroui.dev/docs/components/text

Use the Text component to render different heading levels (h1 to h6) or paragraphs. The `as` prop controls the visual style and underlying HTML element.

```jsx
<h1>This is H1</h1>
<h2>This is H2</h2>
<h3>This is H3</h3>
<h4>This is H4</h4>
<h5>This is H5</h5>
<h6>This is H6</h6>
```

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

### Show Success Toast

Source: https://www.retroui.dev/docs/components/sonner

Displays a toast notification with a success status.

```typescript
import { toast } from "@retroui/sonner";

toast.success("Operation completed successfully!");
```

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

### Alert with Icon

Source: https://www.retroui.dev/docs/components/alert

An alert component that includes an icon. Ensure you have an icon library or component available.

```typescript
import {
  Alert,
  AlertDescription,
  AlertIcon,
  AlertTitle,
} from "@retroui/alert";

function AlertDemo() {
  return (
    <Alert>
      <AlertIcon />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        This where you can write description that no one reads...
      </AlertDescription>
    </Alert>
  );
}

```

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

### Fully Customized Empty State

Source: https://www.retroui.dev/docs/components/empty

Allows complete customization of the Empty component's content, including titles, descriptions, and call-to-action buttons. This is ideal for tailored user experiences.

```typescript
import { Empty } from "@retroui/empty";

export default function Page() {
  return (
    <Empty
      title="No data"
      description="Get started by creating your first item"
      action="Create now"
    />
  );
}
```
Tokens:
Raw