## File: README.md

<h3 align="center">coss.com/ui (formerly Origin UI)</h3>

## About the Project

coss.com/ui is the official Cal.com Design System.

## Repository Overview

This repository contains multiple products and applications that make up the coss.com ecosystem:

### Apps and Packages

- **`apps/www/`** - Main coss.com website
- **`apps/ui/`** - coss ui component library and documentation
- **`apps/origin/`** - Legacy Origin UI components (pre-acquisition)
- **`packages/ui/`** - Shared UI components package
- **`packages/typescript-config/`** - TypeScript configurations
- **`biome.json`** - Shared Biome configuration for linting and formatting

Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).

### Environment Variables

This monorepo contains multiple Next.js applications that are designed to link to each other. For the navigation to work correctly, you must set up environment variables for both local development and production deployments.

#### Local Development

For local development, create a `.env.local` file in each of the app directories with the corresponding variables.

1.  **`www` app**

    This app needs to know the URLs of the other apps. Create a file at `apps/www/.env.local`:

    ```sh
    # apps/www/.env.local
    NEXT_PUBLIC_APP_URL=http://localhost:3000
    NEXT_PUBLIC_COSS_UI_URL=http://localhost:4000/ui
    ```

2.  **`ui` app**

    This app needs to know the URLs of the other apps. Create a file at `apps/ui/.env.local`:

    ```sh
    # apps/ui/.env.local
    NEXT_PUBLIC_APP_URL=http://localhost:4000/ui
    NEXT_PUBLIC_COSS_URL=http://localhost:3000
    NEXT_PUBLIC_ORIGIN_URL=http://localhost:4001
    ```

3.  **`origin` app**

    This app needs to know the URLs of the other apps. Create a file at `apps/origin/.env.local`:

    ```sh
    # apps/origin/.env.local
    NEXT_PUBLIC_APP_URL=http://localhost:4001/origin
    NEXT_PUBLIC_COSS_URL=http://localhost:3000
    NEXT_PUBLIC_COSS_UI_URL=http://localhost:4000/ui
    ```

> [!NOTE]
> Turborepo is configured to watch for changes in `.env*` files, so it will automatically invalidate the cache when these variables change.

### Development

This Turborepo has some additional tools already setup for you:

- [TypeScript](https://www.typescriptlang.org/) for static type checking
- [Biome](https://biomejs.dev/) for linting and formatting

#### Build

To build all apps and packages:

```sh
bun run build
```

To build a specific app:

```sh
bun run build --filter=www
bun run build --filter=ui
bun run build --filter=origin
```

#### Develop

To develop all apps and packages:

```sh
bun run dev
```

To develop a specific app:

```sh
bun run dev --filter=www
bun run dev --filter=ui
bun run dev --filter=origin
```

## coss ui

**coss ui** is a collection of beautifully designed, accessible, and composable components for your React apps. Built on top of [Base UI](https://base-ui.com/) and styled with [Tailwind CSS](https://tailwindcss.com/), it's designed for you to copy, paste, and own.

We think Base UI is the best foundation for modern web applications. We've taken its powerful, unstyled primitives and given them a design system that's ready to go, right out of the box.

This is the component library we'll be progressively adopting for [cal.com](https://cal.com). We're building it in the open for anyone who wants to create beautiful, reliable user interfaces.

### Origin UI Acquisition

This repository also includes the **Origin UI** components as a legacy snapshot. Origin UI was a pre-acquisition collection of Radix-based, shadcn-style components that remains available for use, but with limited support and maintenance. Active development now focuses on the new [Particles](https://coss.com/ui/particles) components built on the coss ui primitives.

### Contributing to coss ui

We're always looking for contributors to help improve our UI components. Whether it's a bug report, a new feature, or a documentation update, we appreciate your help.

Please see our [Contributing Guidelines](apps/ui/CONTRIBUTING.md) for more information on how to get involved.

## Licensing

This repository uses a mixed licensing approach. The default license for this project is [AGPLv3.0](LICENSE).

- **MIT**: The `apps/origin/` and `apps/ui/` directories are licensed under their original MIT license
- **AGPLv3**: All other directories are licensed under the GNU Affero General Public License v3.0

For detailed information, see our [Licensing documentation](LICENSING.md).

## Acknowledgements

Special thanks to:

- **[Tailwind CSS](https://tailwindcss.com/)** - For the utility-first CSS framework that powers our design system
- **[Base UI](https://base-ui.com/)** - For providing the robust, accessible primitives that form the foundation of our components
- **[shadcn/ui](https://ui.shadcn.com/)** - For inspiring our copy-paste approach and component philosophy
- **[Fumadocs](https://fumadocs.dev/)** - For providing the documentation framework that powers our component docs

---

## File: apps/www/README.md

This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun run dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

---

## File: apps/ui/content/docs/components/accordion.mdx

---
title: Accordion
links:
  doc: https://base-ui.com/react/components/accordion#api-reference
---

<ComponentPreview name="p-accordion-1" align="start" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>

<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/accordion
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @base-ui/react
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="accordion" title="components/ui/accordion.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion"
```

```tsx
<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionPanel>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionPanel>
  </AccordionItem>
</Accordion>
```

## API Reference

### Accordion

Root component. Alias for `Accordion.Root` from Base UI.

### AccordionItem

Individual accordion item container. Styled wrapper for `Accordion.Item` from Base UI with bottom border styling.

### AccordionTrigger

Trigger button that toggles the accordion panel. Styled wrapper for `Accordion.Trigger` from Base UI. Includes a built-in chevron icon that rotates when expanded.

### AccordionPanel

Collapsible content panel. Styled wrapper for `Accordion.Panel` from Base UI with animated height transitions. Also exported as `AccordionContent`.

## Examples

### Single Accordion

<ComponentPreview name="p-accordion-2" align="start" />

### Multiple Accordion

<ComponentPreview name="p-accordion-3" align="start" />

### Controlled Accordion

<ComponentPreview name="p-accordion-4" align="start" />

---

## File: apps/ui/content/docs/components/alert.mdx

---
title: Alert
---

<ComponentPreview name="p-alert-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>
<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/alert
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Import the following variables into your CSS file</Step>

```css
@theme inline {
  --color-destructive-foreground: var(--destructive-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
}

:root {
  --destructive-foreground: var(--color-red-400);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-700);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-700);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-700);
}

.dark {
  --destructive-foreground: var(--color-red-400);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-400);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-400);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-400);
}
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="alert" title="components/ui/alert.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
```

```tsx
<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>
```

## API Reference

This is a custom component, not a Base UI wrapper.

### Alert

Root container for the alert.

| Prop      | Type                                                        | Default     | Description                                      |
| --------- | ----------------------------------------------------------- | ----------- | ------------------------------------------------ |
| `variant` | `"default" \| "error" \| "info" \| "success" \| "warning"` | `"default"` | Controls the alert styling and color scheme      |

### AlertTitle

Title text for the alert. Renders as a styled `div`.

### AlertDescription

Description text for the alert. Renders as a styled `div` with muted foreground color.

### AlertAction

Container for action buttons. Automatically positions to the right on larger screens.

## Examples

### With Icon

<ComponentPreview name="p-alert-2" />

### With Icon and Action Buttons

<ComponentPreview name="p-alert-3" />

### Info Alert

<ComponentPreview name="p-alert-4" />

### Success Alert

<ComponentPreview name="p-alert-5" />

### Warning Alert

<ComponentPreview name="p-alert-6" />

### Error Alert

<ComponentPreview name="p-alert-7" />

---

## File: apps/ui/content/docs/components/alert-dialog.mdx

---
title: Alert Dialog
links:
  doc: https://base-ui.com/react/components/alert-dialog#api-reference
---

<ComponentPreview name="p-alert-dialog-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>

<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/alert-dialog
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @base-ui/react
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="alert-dialog" title="components/ui/alert-dialog.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPopup,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
```

```tsx
<AlertDialog>
  <AlertDialogTrigger>Delete Account</AlertDialogTrigger>
  <AlertDialogPopup>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogClose>Cancel</AlertDialogClose>
      <AlertDialogClose>Delete Account</AlertDialogClose>
    </AlertDialogFooter>
  </AlertDialogPopup>
</AlertDialog>
```

## API Reference

### AlertDialog

Root component. Alias for `AlertDialog.Root` from Base UI.

### AlertDialogTrigger

Trigger button that opens the alert dialog. Alias for `AlertDialog.Trigger` from Base UI.

### AlertDialogPopup

Popup container that displays the alert dialog content. Also exported as `AlertDialogContent`.

| Prop                  | Type                         | Default | Description                                      |
| --------------------- | ---------------------------- | ------- | ------------------------------------------------ |
| `bottomStickOnMobile` | `boolean`                    | `true`  | When true, sticks to the bottom of the screen on mobile devices |
| `portalProps`         | `AlertDialog.Portal.Props`   | -       | Props forwarded to the internal portal (`keepMounted`, `container`, etc.); see Base UI Alert Dialog portal API |

### AlertDialogHeader

Container for the alert dialog title and description.

### AlertDialogFooter

Footer section for action buttons.

Unlike [Dialog](/docs/components/dialog), alert dialog has no `AlertDialogPanel`. Put title and description in `AlertDialogHeader`, actions in `AlertDialogFooter`, and use a plain element with `className` if you need extra body content between them.

| Prop        | Type                     | Default     | Description                                      |
| ----------- | ------------------------ | ----------- | ------------------------------------------------ |
| `variant`   | `"default" \| "bare"`    | `"default"` | Controls the footer styling. `default` includes border and background, `bare` removes them |

**Example:**

```tsx
// Default variant (with border and background)
<AlertDialogFooter>
  <AlertDialogClose>Cancel</AlertDialogClose>
  <AlertDialogClose>Delete</AlertDialogClose>
</AlertDialogFooter>

// Bare variant (no border or background)
<AlertDialogFooter variant="bare">
  <AlertDialogClose>Cancel</AlertDialogClose>
  <AlertDialogClose>Delete</AlertDialogClose>
</AlertDialogFooter>
```

### AlertDialogTitle

Title component. Alias for `AlertDialog.Title` from Base UI.

### AlertDialogDescription

Description component. Alias for `AlertDialog.Description` from Base UI.

### AlertDialogClose

Close button component. Alias for `AlertDialog.Close` from Base UI.

### AlertDialogPortal

Portal component for rendering outside the DOM hierarchy. Alias for `AlertDialog.Portal` from Base UI.

### AlertDialogBackdrop

Backdrop/overlay component. Also exported as `AlertDialogOverlay`. Alias for `AlertDialog.Backdrop` from Base UI.

### AlertDialogViewport

Viewport component for positioning. Alias for `AlertDialog.Viewport` from Base UI.

## Examples

### Alert Dialog with Bare Footer

<ComponentPreview name="p-alert-dialog-2" />

### Close Confirmation

<ComponentPreview name="p-dialog-4" />

---

## File: apps/ui/content/docs/components/autocomplete.mdx

---
title: Autocomplete
links:
  doc: https://base-ui.com/react/components/autocomplete#api-reference
---

<ComponentPreview name="p-autocomplete-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>

<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/autocomplete
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @base-ui/react
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="autocomplete" title="components/ui/autocomplete.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import {
  Autocomplete,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
  AutocompletePopup,
} from "@/components/ui/autocomplete"
```

```tsx
const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
]

<Autocomplete items={items}>
  <AutocompleteInput placeholder="Search..." />
  <AutocompletePopup>
    <AutocompleteEmpty>No results found.</AutocompleteEmpty>
    <AutocompleteList>
      {(item) => <AutocompleteItem key={item.value} value={item}>{item.label}</AutocompleteItem>}
    </AutocompleteList>
  </AutocompletePopup>
</Autocomplete>
```

## API Reference

### Autocomplete

The root autocomplete component. Manages the autocomplete state and provides context to child components.

| Prop       | Type                                      | Description                                         |
| ---------- | ----------------------------------------- | --------------------------------------------------- |
| `items`    | `readonly unknown[]`                      | The array of items to display in the autocomplete   |
| `open`     | `boolean`                                 | Controls whether the popup is open                  |
| `...props` | `React.ComponentProps<typeof Autocomplete>` | All Base UI Autocomplete props are supported        |

### AutocompleteInput

The input field component with extended features for size variants and addon support.

| Prop           | Type                              | Default     | Description                                                                                      |
| -------------- | --------------------------------- | ----------- | ------------------------------------------------------------------------------------------------ |
| `size`         | `"sm" \| "default" \| "lg"`       | `"default"` | The size variant of the input field                                                              |
| `startAddon`   | `React.ReactNode`                 | -           | Element to display at the start (left side) of the input, such as an icon                        |
| `showTrigger`  | `boolean`                         | `false`     | Whether to display a trigger button (chevron icon) on the right side of the input                |
| `showClear`    | `boolean`                         | `false`     | Whether to display a clear button (X icon) on the right side of the input when there is a value |
| `triggerProps`  | `Autocomplete.Trigger.Props`     | -           | Props forwarded to the internal trigger button, useful for overriding `aria-label`               |
| `clearProps`    | `Autocomplete.Clear.Props`       | -           | Props forwarded to the internal clear button, useful for overriding `aria-label`                 |
| `className`    | `string`                          | -           | Additional CSS classes to apply to the component                                                 |
| `...props`     | Base UI Autocomplete Input props  | -           | All standard autocomplete input attributes are supported                                         |

### AutocompletePopup

The popup container that displays the autocomplete suggestions.

| Prop           | Type                                          | Description                                      |
| -------------- | --------------------------------------------- | ------------------------------------------------ |
| `className`    | `string`                                      | Additional CSS classes to apply to the component |
| `portalProps`  | `Autocomplete.Portal.Props`                   | Props forwarded to the internal portal (`keepMounted`, `container`, etc.); see Base UI Combobox portal API (autocomplete reuses it) |
| `...props`     | Base UI Autocomplete Popup props              | All standard autocomplete popup attributes are supported |

### AutocompleteList

A scrollable container for autocomplete items.

| Prop        | Type                                     | Description                                      |
| ----------- | ---------------------------------------- | ------------------------------------------------ |
| `className` | `string`                                 | Additional CSS classes to apply to the component |
| `...props`  | Base UI Autocomplete List props          | All standard autocomplete list attributes are supported |

### AutocompleteItem

An individual selectable autocomplete item.

| Prop        | Type                                     | Description                                      |
| ----------- | ---------------------------------------- | ------------------------------------------------ |
| `value`     | `unknown`                                | The value of the item                            |
| `className` | `string`                                 | Additional CSS classes to apply to the component |
| `...props`  | Base UI Autocomplete Item props          | All standard autocomplete item attributes are supported |

### AutocompleteEmpty

Displays a message when no results are found.

| Prop        | Type                                      | Description                                      |
| ----------- | ----------------------------------------- | ------------------------------------------------ |
| `className` | `string`                                  | Additional CSS classes to apply to the component |
| `...props`  | Base UI Autocomplete Empty props          | All standard autocomplete empty attributes are supported |

### AutocompleteGroup

Groups related autocomplete items together.

| Prop        | Type                                      | Description                                      |
| ----------- | ----------------------------------------- | ------------------------------------------------ |
| `items`     | `readonly unknown[]`                      | The array of items in this group                 |
| `className` | `string`                                  | Additional CSS classes to apply to the component |
| `...props`  | Base UI Autocomplete Group props          | All standard autocomplete group attributes are supported |

### AutocompleteGroupLabel

Displays a label for an autocomplete group.

| Prop        | Type                                           | Description                                      |
| ----------- | ---------------------------------------------- | ------------------------------------------------ |
| `className` | `string`                                       | Additional CSS classes to apply to the component |
| `...props`  | Base UI Autocomplete Group Label props         | All standard autocomplete group label attributes are supported |

### AutocompleteCollection

Used to wrap items within a group for rendering.

| Prop        | Type                                           | Description                                      |
| ----------- | ---------------------------------------------- | ------------------------------------------------ |
| `...props`  | Base UI Autocomplete Collection props          | All standard autocomplete collection attributes are supported |

## Examples

### Disabled

<ComponentPreview name="p-autocomplete-2" />

### Small Size

<ComponentPreview name="p-autocomplete-3" />

### Large Size

<ComponentPreview name="p-autocomplete-4" />

### With Label

<ComponentPreview name="p-autocomplete-5" />

### Inline Autocomplete

Autofill the input with the highlighted item while navigating with arrow keys.

<ComponentPreview name="p-autocomplete-6" />

### Auto Highlight

Automatically highlight the first matching option.

<ComponentPreview name="p-autocomplete-7" />

### With Clear Button

<ComponentPreview name="p-autocomplete-8" />

### With Trigger and Clear Buttons

<ComponentPreview name="p-autocomplete-9" />

### With Start Addon

Display an icon or other element at the start of the input using the `startAddon` prop.

<ComponentPreview name="p-autocomplete-14" />

### With Groups

<ComponentPreview name="p-autocomplete-10" />

### With Limit Results

<ComponentPreview name="p-autocomplete-11" />

### Async Search

<ComponentPreview name="p-autocomplete-12" />

### Form Integration

<ComponentPreview name="p-autocomplete-13" />

---

## File: apps/ui/content/docs/components/avatar.mdx

---
title: Avatar
links:
  doc: https://base-ui.com/react/components/avatar#api-reference
---

<ComponentPreview name="p-avatar-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>

<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/avatar
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @base-ui/react
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="avatar" title="components/ui/avatar.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
```

```tsx
<Avatar>
  <AvatarImage src="/avatars/01.png" alt="User avatar" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>
```

## API Reference

### Avatar

Root component. Styled wrapper for `Avatar.Root` from Base UI with default size of 32px (8 units) and rounded-full styling.

### AvatarImage

Image element for the avatar. Styled wrapper for `Avatar.Image` from Base UI.

### AvatarFallback

Fallback content displayed when the image fails to load. Styled wrapper for `Avatar.Fallback` from Base UI with muted background.

## Examples

### Fallback Only

<ComponentPreview name="p-avatar-2" />

### Different Sizes

<ComponentPreview name="p-avatar-3" />

### Different Radius

<ComponentPreview name="p-avatar-4" />

### Group Avatars

<ComponentPreview name="p-avatar-5" />

---

## File: apps/ui/content/docs/components/badge.mdx

---
title: Badge
---

<ComponentPreview name="p-badge-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>
<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/badge
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @base-ui/react
```

<Step>Import the following variables into your CSS file</Step>

```css
@theme inline {
  --color-destructive-foreground: var(--destructive-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
}

:root {
  --destructive-foreground: var(--color-red-700);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-700);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-700);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-700);
}

.dark {
  --destructive-foreground: var(--color-red-400);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-400);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-400);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-400);
}
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="badge" title="components/ui/badge.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import { Badge } from "@/components/ui/badge"
```

```tsx
Badge
```

## Link

You can use the [`render`](https://base-ui.com/react/utils/use-render#migrating-from-radix-ui) prop to make another component look like a badge. Here's an example of a link that looks like a badge.

```tsx
import Link from "next/link"

import { Badge } from "@/components/ui/badge"

export function LinkAsBadge() {
  return }>New
}
```

## API Reference

This is a custom component using Base UI's `useRender` hook, not a direct Base UI wrapper.

### Badge

A badge component with variant and size options.

| Prop      | Type                                                                                                    | Default     | Description                                      |
| --------- | ------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------ |
| `variant` | `"default" \| "destructive" \| "error" \| "info" \| "outline" \| "secondary" \| "success" \| "warning"` | `"default"` | Controls the badge styling and color scheme      |
| `size`    | `"default" \| "sm" \| "lg"`                                                                             | `"default"` | Controls the badge size                          |
| `render`  | `React.ReactElement`                                                                                    | -           | Render as a different element (e.g., Link)       |

## Examples

### Outline

<ComponentPreview name="p-badge-2" />

### Secondary

<ComponentPreview name="p-badge-3" />

### Destructive

<ComponentPreview name="p-badge-4" />

### Info

<ComponentPreview name="p-badge-5" />

### Success

<ComponentPreview name="p-badge-6" />

### Warning

<ComponentPreview name="p-badge-7" />

### Error

<ComponentPreview name="p-badge-8" />

### Small

<ComponentPreview name="p-badge-9" />

### Large

<ComponentPreview name="p-badge-10" />

### With Icon

<ComponentPreview name="p-badge-11" />

### With Link

<ComponentPreview name="p-badge-12" />

### With Count

<ComponentPreview name="p-badge-13" />

---

## File: apps/ui/content/docs/components/breadcrumb.mdx

---
title: Breadcrumb
---

<ComponentPreview name="p-breadcrumb-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>
<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/breadcrumb
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="breadcrumb" title="components/ui/breadcrumb.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
```

```tsx

  
    
      Home
    
    
    
      
    
    
      Components
    
    
    
      Breadcrumb
    
  

```

## API Reference

This is a custom component, not a Base UI wrapper.

### Breadcrumb

Root navigation container with `aria-label="breadcrumb"`.

### BreadcrumbList

Ordered list container for breadcrumb items.

### BreadcrumbItem

Individual breadcrumb item container.

### BreadcrumbLink

Link element for navigable breadcrumb items. Supports the `render` prop to use custom link components (e.g., Next.js Link).

| Prop     | Type                   | Default | Description                                      |
| -------- | ---------------------- | ------- | ------------------------------------------------ |
| `render` | `React.ReactElement`   | -       | Render as a different element (e.g., Next.js Link) |

### BreadcrumbPage

Non-interactive element representing the current page. Includes `aria-current="page"`.

### BreadcrumbSeparator

Separator between breadcrumb items. Defaults to a chevron icon but accepts custom children.

### BreadcrumbEllipsis

Ellipsis indicator for collapsed breadcrumb items.

## Examples

### With custom separator

<ComponentPreview name="p-breadcrumb-2" />

---

## File: apps/ui/content/docs/components/button.mdx

---
title: Button
---

<ComponentPreview name="p-button-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>
<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/button
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @base-ui/react
```

<Step>Import the following variables into your CSS file</Step>

```css
@theme inline {
  --color-destructive-foreground: var(--destructive-foreground);
}

:root {
  --destructive-foreground: var(--color-red-700);
}

.dark {
  --destructive-foreground: var(--color-red-400);
}
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="button" title="components/ui/button.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import { Button } from "@/components/ui/button"
```

```tsx
Button
```

## Link

You can use the [`render`](https://base-ui.com/react/utils/use-render#migrating-from-radix-ui) prop to make another component look like a button. Here's an example of a link that looks like a button.

```tsx
import Link from "next/link"

import { Button } from "@/components/ui/button"

export function LinkAsButton() {
  return }>Login
}
```

## API Reference

This is a custom component using Base UI's `useRender` hook, not a direct Base UI wrapper.

### Button

A button component with variant, size, and loading states.

| Prop      | Type                                                                                                              | Default     | Description                                                                 |
| --------- | ----------------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------- |
| `variant` | `"default" \| "destructive" \| "destructive-outline" \| "ghost" \| "link" \| "outline" \| "secondary"`         | `"default"` | Controls the button styling                                                 |
| `size`    | `"default" \| "icon" \| "icon-lg" \| "icon-sm" \| "icon-xl" \| "icon-xs" \| "lg" \| "sm" \| "xl" \| "xs"`     | `"default"` | Controls the button size                                                    |
| `loading` | `boolean`                                                                                                         | `false`     | Shows a spinner and forces disabled button behavior while loading           |
| `render`  | `React.ReactElement`                                                                                              | -           | Render as a different element (e.g., Link)                                  |

When `loading` is `true`, the component:

- Renders a spinner (`data-slot="button-loading-indicator"`)
- Adds `data-loading` on the button root
- Forces the native `disabled` attribute
- Sets `aria-disabled="true"`
- Preserves button width by hiding content visually instead of unmounting it

## Examples

### Default

<ComponentPreview name="p-button-1" />

### Outline

<ComponentPreview name="p-button-2" />

### Secondary

<ComponentPreview name="p-button-3" />

### Destructive

<ComponentPreview name="p-button-4" />

### Destructive Outline

<ComponentPreview name="p-button-5" />

### Ghost

<ComponentPreview name="p-button-6" />

### Link

<ComponentPreview name="p-button-7" />

### Extra-small Size

<ComponentPreview name="p-button-8" />

### Small Size

<ComponentPreview name="p-button-9" />

### Large Size

<ComponentPreview name="p-button-10" />

### Extra-large Size

<ComponentPreview name="p-button-11" />

### Disabled

<ComponentPreview name="p-button-12" />

### Icon

<ComponentPreview name="p-button-13" />

### Icon Small Size

<ComponentPreview name="p-button-14" />

### Icon Large Size

<ComponentPreview name="p-button-15" />

### With Icon

<ComponentPreview name="p-button-16" />

### With Link

<ComponentPreview name="p-button-17" />

### Loading (Built-in Prop)

<ComponentPreview name="p-button-41" />

### Loading (Custom Composition)

<ComponentPreview name="p-button-18" />