# Get started





Starting a new project [#starting-a-new-project]

If you are starting a new project, you can use the dashboard example right away with the following command:

```bash
npx gitpick https://github.com/ailab-core/uilab/tree/main/examples/template-vite-tanstack-router [your_project_name]
cd [your_project_name]
npm install
npm run dev
```

Every example here uses Tanstack Router so make sure to follow the [guide](https://tanstack.com/start/latest/docs/framework/react/guide/routing).

Examples [#examples]

* [Vite Template - Tanstack Router App](https://github.com/ailab-core/uilab/tree/main/examples/template-vite-tanstack-router)
* [Vite Template - Tanstack Start App](https://github.com/ailab-core/uilab/tree/main/examples/template-vite-tanstack-start)

<Callout type="warning">
  Tanstack Start Template not fully complete yet. Tanstack Start is in RC stage, not fully stable yet so expect frequent changes
</Callout>

Manual Setup [#manual-setup]

Install these packages for your project.

```bash
npm install uilab-core tw-animate-css lucide-react
```

Import the component styles in your application entry point:

```css title='app/global.css'
@import "tailwindcss";
@import "tw-animate-css";
@import "uilab-core/styles.css";
@import "uilab-core/theme.css";

/* Make sure to add this too for themes */
@custom-variant dark (&:is(.dark *));
```

**Note that tailwindcss needs to be installed in your project! [See how](https://tailwindcss.com/docs/installation/using-vite)**

Registry setup [#registry-setup]

Our custom shadcn registry is deployed through GitLab pages and due to it's privacy, you will need your personal access token to add our custom components to your project

```bash title='.env.local'
PAT_TOKEN={YOUR_GITLAB_PAT_TOKEN}
```

```json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  ...
  "registries": {
    "@uilab": {
      "url": "https://ailabmn.gitlab.io/frontend/uilab/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${PAT_TOKEN}"
      }
    }
  }
}
```

TypeScript Support [#typescript-support]

All components are written in TypeScript and include complete type definitions. You'll get full IntelliSense support in your IDE:

```tsx
import { Button, type ButtonProps } from "uilab-core"

// Full type support for props
function MyButton(props: ButtonProps) {
  return <Button {...props} />
}
```

Framework Compatibility [#framework-compatibility]

`uilab-core` works with anything that's on client component.

Server component however, is on experimental. There is a known issue of when using the function `cn` on server component. It errors out on console that `cn` function needs to be called in client component. A separate development will be done in near future.


# Introduction





uilab is a react component library. Built on top of [Base UI](https://base-ui.com/), styled with [Tailwind CSS](https://tailwindcss.com/) and bundled with [rolldown](https://rolldownjs.org/).

This is a component library we'll be adopting for our projects at [ailab.mn](https://ailab.mn). We're building it in the open for anyone who wants to create quick, easy and reliable user interfaces.

<Callout type="info" title="Early Access">
  uilab-core is currently in early development. Things may change quickly so we recomment using this in projects where you're comfortable adapting to changes.
</Callout>

How it works [#how-it-works]

The reason for making it a separate library instead of using shadcn directly is to have our own internal company design system and an ability to change and control certain components without interacting with the project. We currently have and soon will be having many projects under our company and to change a component style and functionality is a massive work.

We separated it into 2 parts.

<img alt="Image" src="https://i.imgur.com/Vm6Rx5k.png" width="1120" height="220" />

* **Components** - Base atom components such as Button, Alert, Input, Card etc will be separate installable package.
* **Blocks** - More complex molecule components. This needs more customization based on the project requirements so we decided to go with shadcn/ui registry distribution.

Get Involved [#get-involved]

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

To get started, check out our contribution guidelines on GitHub. You can find open issues and submit pull requests in our repository.


# Styling



Extended Color Variables [#extended-color-variables]

* `--destructive-foreground`: Foreground color for destructive actions
* `--info`: Information state color
* `--info-foreground`: Foreground color for information states
* `--success`: Success state color
* `--success-foreground`: Foreground color for success states
* `--warning`: Warning state color
* `--warning-foreground`: Foreground color for warning states

These additional variables ensure consistent styling across components that need to communicate different states or levels of importance.


# Confirmation Dialog





Preview [#preview]

<ComponentPreview name="confirmation-preview" />

Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn add @uilab-core/confirmation
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn add @uilab-core/confirmation
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn add @uilab-core/confirmation
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn add @uilab-core/confirmation
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Usage [#usage]

Wrap your app with the provider

```tsx
import { ConfirmationProvider } from '@/components/confirmation';

function App() {
  return (
    <ConfirmationProvider>
      <MyApp />
    </ConfirmationProvider>
  );
}
```

```tsx
import { useConfirmation } from '@/components/confirmation';
```

```tsx
showDialog({
  title: 'Delete Item',
  description: 'Are you sure you want to delete this item?',
  variant: 'destructive'
  confirmText: 'Delete',
  cancelText: 'Cancel',
  onConfirm: () => {
    // Handle confirmation
  },
})
```

API References [#api-references]

ConfirmationOptions [#confirmationoptions]

<TypeTable
  type="{
  title: {
    type: <code>string</code>,
    description: &#x22;The title of the confirmation dialog&#x22;,
  },
  description: {
    type: <code>string</code>,
    description: &#x22;The description or message shown in the dialog&#x22;,
  },
  variant: {
    type: <code>destructive | default</code>,
    default: <code>default</code>,
    description: &#x22;Variant of confirmation dialog&#x22;
  },
  confirmText: {
    type: <code>string</code>,
    default: &#x22;Confirm&#x22;,
    description: &#x22;Text for the confirm button&#x22;,
  },
  cancelText: {
    type: <code>string</code>,
    default: &#x22;Cancel&#x22;,
    description: &#x22;Text for the cancel button&#x22;,
  },
  onConfirm: {
    type: <code>{&#x22;() => void&#x22;}</code>,
    description: &#x22;Callback when user confirms&#x22;,
  },
  onCancel: {
    type: <code>{&#x22;() => void&#x22;}</code>,
    description: &#x22;Callback when user cancels&#x22;,
  },
}"
/>


# Data Grid





<Callout type="warn" title="Experimental">
  Things may change quickly
</Callout>

<ComponentPreview name="data-grid-preview" />


# Data Table





<Callout type="warn" title="Experimental">
  Things may change quickly
</Callout>

<ComponentPreview name="data-table-preview" />

Introduction [#introduction]

Every data table is unique and it depends on your use case and business logic. It's hard to have one data table that fits every single data display. Some needs to be simple and some needs to have complex filters and paginations (e.g. fintech stuff).

We have made 2 types of data tables using [Tanstack Table](https://tanstack.com/table/latest) which is a headless UI. Capability of this package is endless so you can change certain code to fit your use case.

[Tanstack Router](https://tanstack.com/router/latest)'s type-safe routing feature is super useful for filters and pagination, so we will be using it for demonstrations below.

Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn add @uilab-core/data-table
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn add @uilab-core/data-table
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn add @uilab-core/data-table
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn add @uilab-core/data-table
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Basic Table [#basic-table]

Pretty basic and simple table. Made this for smaller data that does not need pagination or any other feature.

<ComponentPreview name="data-table-basic" />

<Steps>
  <Step>
    File structure [#file-structure]

    Start by creating the following file structure:

    ```
    products
    ├── index.tsx
    └── -components
        └── products-table
            ├── columns.tsx
            └── index.tsx
    ```
  </Step>

  <Step>
    Column definitions [#column-definitions]

    ```tsx title='-components/products-table/columns.tsx'
    export default [
      {
        accessorKey: "name",
        header: "Name"
      },
      {
        accessorKey: "email",
        header: "Email"
      },
      {
        accessorKey: "status",
        header: "Status",
        cell: ({ row }: CellContext<DataItem, unknown>) => (
          <Badge variant="outline">{row.getValue('status')}</Badge>
        )
      },
      {
        accessorKey: "createdAt",
        header: "Created At"
      }
    ] as Array<ColumnDef<DataItem>>
    ```
  </Step>

  <Step>
    Render the table [#render-the-table]

    Prepare our table component to render on page

    ```tsx title='-components/products-table/index.tsx'
    import columns from "./columns"
    import BasicDataTable from "@/components/data-table"

    export function Table() {
      const { data, isFetching } = useQuery(dataQuery())

      return (
        <BasicDataTable
          columns={columns}
          data={data}
          isFetching={isFetching}
        />
      );
    }
    ```
  </Step>
</Steps>

Advanced Table [#advanced-table]

<ComponentPreview name="data-table-preview" />

<Steps>
  <Step>
    File structure [#file-structure-1]

    Start by creating the following file structure:

    ```
    products
    ├── index.tsx
    └── -components
        ├── index.tsx
        └── table
            ├── columns.tsx
            ├── filter.tsx
            └── index.tsx
    ```
  </Step>

  <Step>
    Validate search params [#validate-search-params]

    Page needs to validate if given search params is valid or not. We are using `zod` library for validation.

    ```tsx title='products/index.tsx'
    import { createFileRoute } from "@tanstack/react-router"
    import * as z from "zod"
    import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE } from "@/lib/constants"
    import { Table } from "./-components/table"

    export const productsSearchSchema = z.object({
      pageIndex: z.number().catch(DEFAULT_PAGE_INDEX).optional(),
      pageSize: z.number().catch(DEFAULT_PAGE_SIZE).optional(),
    })

    export const Route = createFileRoute("/products/")({
      component: ProductsPage,
      validateSearch: productsSearchSchema.parse,
    })

    function ProductsPage() {
      return <Table />
    }
    ```
  </Step>

  <Step>
    Filter component [#filter-component]

    <Callout type="info" title="Reminder">
      Filter form components should be controlled components, so when sharing the url, the values are instantly filled into the form components. Ease of use.
    </Callout>

    ```tsx title='products/-components/table/filter.tsx'
    import { FormProvider, useForm } from "react-hook-form"
    import { zodResolver } from "@hookform/resolvers/zod"
    import { productsSearchSchema } from "../../"

    export default function Filter() {
      const { filters, setFilters, resetFilters } = useFilters(PATH)
      const form = useForm({
        resolver: zodResolver(productsSearchSchema),
        values: filters,
      })

      const handleSubmit = form.handleSubmit((items: SearchSchema) => {
        setFilters(items)
      })

      const handleReset = () => {
        resetFilters().then(() => {
          form.reset()
          form.clearErrors()
        })
      }

      return (
        <FormProvider {...form}>
          <form
            className="flex flex-wrap items-end gap-2 rounded-lg border border-dashed p-2"
            onSubmit={handleSubmit}
          >
            <InputGroup>
              <InputGroupAddon>
                <MailIcon />
              </InputGroupAddon>
              <InputGroupInput
                placeholder="Filter emails..."
                value={emailFilter}
                onChange={(e) => setEmailFilter(e.target.value)}
              />
            </InputGroup>
            <Button variant="outline" size="icon" onClick={handleReset}>
              <RotateCcw />
            </Button>
            <Button type="submit">
              <SearchIcon />
              {t("search")}
            </Button>
          </form>
        </FormProvider>
      )
    }
    ```
  </Step>

  <Step>
    Column definition [#column-definition]

    ```tsx title='products/-components/table/columns.tsx'
    export default [
      {
        accessorKey: "name",
        header: "Name"
      },
      {
        accessorKey: "email",
        header: "Email"
      },
      {
        accessorKey: "status",
        header: "Status",
        cell: ({ row }: CellContext<DataItem, unknown>) => (
          <Badge variant="outline">{row.getValue('status')}</Badge>
        )
      },
      {
        accessorKey: "createdAt",
        header: "Created At"
      }
    ] as Array<ColumnDef<DataItem>>
    ```
  </Step>

  <Step>
    Render the table [#render-the-table-1]

    ```tsx title='products/-components/table/index.tsx'
    import { AdvancedDataTable } from "@/components/data-table"
    import { useFilters } from "@/hooks/use-filter"
    import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE } from "@/lib/constants"
    import Filter from "./filter"
    import columns from "./columns"

    export function Table() {
      // This filter will be using `/products` page's validated search params.
      const { filters, setFilters } = useFilters("/products/")

      const paginationState = {
        pageIndex: filters.pageIndex ?? DEFAULT_PAGE_INDEX,
        pageSize: filters.pageSize ?? DEFAULT_PAGE_SIZE,
      }

      const { data, isFetching, refetch } = useQuery(
        dataQuery({
          ...filters,
          page: paginationState.pageIndex.toString(),
          size: paginationState.pageSize.toString(),
        }),
      )

      return (
        <AdvancedDataTable
          columns={COLUMNS}
          data={data}
          refetch={refetch}
          isFetching={isFetching}
          leftHeader={<Filter />}
          // For example: You can add sheet components with trigger
          rightHeader={<Button><PlusIcon />Add</Button>}
          pagination={paginationState}
        />
      );
    }
    ```
  </Step>
</Steps>


# Date Picker



Coming soon...


# Form Fields



Coming soon...


# Blocks



Roadmap and status [#roadmap-and-status]

| #  | Name                                  | Status | Description                                                                            |
| :- | ------------------------------------- | :----: | -------------------------------------------------------------------------------------- |
| 1  | [Data Grid](/docs/blocks/data-grid)   |   ⚠️   | For now, It is built for CBS web only, need better solution for global customizability |
| 2  | [Data Table](/docs/blocks/data-table) |   ⚠️   | For now, It is built for CBS web only, need better solution for global customizability |
| 3  | [Layout](/docs/blocks/layout)         |    ✅   | No issues                                                                              |
| 4  | [Sonner](/docs/blocks/sonner)         |    ✅   | No issues                                                                              |


# Layout





Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn add @uilab-core/layout
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn add @uilab-core/layout
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn add @uilab-core/layout
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn add @uilab-core/layout
    ```
  </CodeBlockTab>
</CodeBlockTabs>

API References [#api-references]

<TypeTable
  type="{
  variant: {
    type: <code>breakpointPadded | constrainedPadded | narrowConstrainedPadded</code>,
    default: <code>breakpointPadded</code>,
  },
}"
/>


# Sonner





<ComponentPreview name="sonner-preview" />

Installation [#installation]

<Steps>
  <Step>
    Install via following command:

    <Callout type="info" title="Reminder">
      Following CLI command will install `next-themes` and `sonner` libraries to your project.
    </Callout>

    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npx shadcn add @uilab-core/sonner
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm dlx shadcn add @uilab-core/sonner
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn dlx shadcn add @uilab-core/sonner
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun x shadcn add @uilab-core/sonner
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </Step>

  <Step>
    Add the Toaster component

    ```tsx title='app/layout.tsx'
    import { Toaster } from "uilab-core"

    export default function RootLayout({ children }) {
      return (
        <html lang="en">
          <head />
          <body>
            <Toaster />
            <main>{children}</main>
          </body>
        </html>
      )
    }
    ```
  </Step>
</Steps>

Usage [#usage]

```tsx
import { toast } from "sonner"
```

```tsx
toast("Event has been created.")
```

Examples [#examples]

Types [#types]

<ComponentPreview name="sonner-types" />

Description [#description]

<ComponentPreview name="sonner-description" />

Position [#position]

Use the `position` prop to change the position of the toast.

<ComponentPreview name="sonner-position" />


# Accordion



<ComponentPreview name="accordion-preview" />

Usage [#usage]

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "uilab-core"
```

```tsx
<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Example Item 1</AccordionTrigger>
    <AccordionContent>
        Example accordion content
    </AccordionContent>
  </AccordionItem>
</Accordion>
```

Examples [#examples]

Basic [#basic]

<ComponentPreview name="accordion-basic" />

Multiple [#multiple]

<ComponentPreview name="accordion-multiple" />

Disabled [#disabled]

<ComponentPreview name="accordion-disabled" />


# Alert Dialog



<ComponentPreview name="alert-dialog-preview" />

Usage [#usage]

```tsx
import {
  Button,
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "uilab-core"
```

```tsx
<AlertDialog>
  <AlertDialogTrigger
    render={<Button variant="outline">Show Dialog</Button>}
  />
  <AlertDialogContent>
    <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>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
```

Examples [#examples]

Basic [#basic]

A basic alert dialog with a title, description, and cancel and continue buttons.

<ComponentPreview name="alert-dialog-basic" />

Small [#small]

Use the `size="sm"` prop to make the alert dialog smaller.

<ComponentPreview name="alert-dialog-small" />

Media [#media]

Use the `AlertDialogMedia` component to add a media element such as an icon or image to the alert dialog.

<ComponentPreview name="alert-dialog-with-media" />

Small with Media [#small-with-media]

Use the `size="sm"` prop to make the alert dialog smaller and the `AlertDialogMedia` component to add a media element such as an icon or image to the alert dialog.

<ComponentPreview name="alert-dialog-small-with-media" />

Destructive [#destructive]

Use the `AlertDialogAction` component to add a destructive action button to the alert dialog.

<ComponentPreview name="alert-dialog-destructive" />


# Alert



<ComponentPreview name="alert-preview" />

Usage [#usage]

```tsx
import {
  Alert,
  AlertDescription,
  AlertTitle
} from "uilab-core"
```

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

Examples [#examples]

Basic [#basic]

A basic alert with an icon, title and description.

<ComponentPreview name="alert-basic" />

Destructive [#destructive]

Use `variant="destructive"` to create a destructive alert.

<ComponentPreview name="alert-destructive" />

Action [#action]

Use `AlertAction` to add a button or other action element to the alert.

<ComponentPreview name="alert-action" />

Custom color [#custom-color]

You can customize the alert colors by adding custom classes such as `bg-amber-50 dark:bg-amber-950` to the `Alert` component.

<ComponentPreview name="alert-custom-colors" />


# Aspect Ratio



<ComponentPreview name="aspect-ratio-preview" />

Usage [#usage]

```tsx
import { AspectRatio } from "uilab-core"
```

```tsx
<AspectRatio ratio={16 / 9}>
  <Image src="..." alt="Photo" fill className="rounded-lg object-cover" />
</AspectRatio>
```

Examples [#examples]

Square [#square]

A square aspect ratio component using the `ratio={1 / 1}` prop. This is useful for displaying images in a square format.

<ComponentPreview name="aspect-ratio-square" />

Portrait [#portrait]

A portrait aspect ratio component using the `ratio={9 / 16}` prop. This is useful for displaying images in a portrait format.

<ComponentPreview name="aspect-ratio-portrait" />


# Avatar



<ComponentPreview name="avatar-preview" />

Usage [#usage]

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarImage
} from "uilab-core"
```

```tsx
<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>
```


# Badge



<ComponentPreview name="badge-preview" />

Usage [#usage]

```tsx
import { Badge } from "uilab-core"
```

```tsx
<Badge variant="default | outline | secondary | destructive">Badge</Badge>
```

Examples [#examples]

Basic [#basic]

Use the `variant` prop to change the variant of the badge.

<ComponentPreview name="badge-variants" />

Icon [#icon]

You can render an icon inside the badge. Use `data-icon="inline-start"` to render the icon on the left and `data-icon="inline-end"` to render the icon on the right.

<ComponentPreview name="badge-icon" />

Spinner [#spinner]

You can render a spinner inside the badge. Remember to add the `data-icon="inline-start"` or `data-icon="inline-end"` prop to the spinner.

<ComponentPreview name="badge-spinner" />

Link [#link]

Use the `render` prop to render a link as a badge.

<ComponentPreview name="badge-link" />

Custom colors [#custom-colors]

You can customize the colors of a badge by adding custom classes such as `bg-green-50 dark:bg-green-800` to the Badge component.

<ComponentPreview name="badge-custom-colors" />


# Breadcrumb



<ComponentPreview name="breadcrumb-preview" />

Usage [#usage]

```tsx
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "uilab-core"
```

```tsx
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink render={<a href="/" />}>Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink render={<a href="/components" />}>
        Components
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```


# Button Group



<ComponentPreview name="button-group-preview" />

Usage [#usage]

```tsx
import {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
} from "uilab-core"
```

```tsx
<ButtonGroup>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>
```


# Button



<ComponentPreview name="button-preview" />

Usage [#usage]

```tsx
import { Button } from "uilab-core"
```

```tsx
<Button variant="outline">Button</Button>
```

Examples [#examples]

Sizes [#sizes]

Use the `size` prop to change the size of the button.

<ComponentPreview name="button-sizes" />

Icon [#icon]

<ComponentPreview name="button-icon" />

With Icon [#with-icon]

Remember to add the `data-icon="inline-start"` or `data-icon="inline-end"` attribute to the icon for the correct spacing.

<ComponentPreview name="button-with-icon" />

Rounded [#rounded]

Use the `rounded-full` class to make the button rounded.

<ComponentPreview name="button-rounded" />


# Calendar



<ComponentPreview name="calendar-preview" />

Usage [#usage]

```tsx
import { Calendar } from "uilab-core"
```

```tsx
const [date, setDate] = React.useState<Date | undefined>(new Date())

return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    className="rounded-lg border"
  />
)
```


# Card



<ComponentPreview name="card-preview" />

Usage [#usage]

```tsx
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "uilab-core"
```

```tsx
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
    <CardAction>Card Action</CardAction>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>
```

Examples [#examples]

Sizes [#sizes]

Use the `size="sm"` prop to set the size of the card to small. The small size variant uses smaller spacing.

<ComponentPreview name="card-sizes" />

Image [#image]

Add an image before the card header to create a card with an image.

<ComponentPreview name="card-image" />


# Checkbox



<ComponentPreview name="checkbox-preview" />

Usage [#usage]

```tsx
import { Checkbox } from "@/components/ui/checkbox"
```

```tsx
<Checkbox />
```

Examples [#examples]

Basic [#basic]

Pair the checkbox with `Field` and `FieldLabel` for proper layout and labeling.

<ComponentPreview name="checkbox-basic" />

Description [#description]

Use `FieldContent` and `FieldDescription` for helper text.

<ComponentPreview name="checkbox-description" />

Disabled [#disabled]

Use the disabled prop to prevent interaction and add the `data-disabled` attribute to the `<Field>` component for disabled styles.

<ComponentPreview name="checkbox-disabled" />

Group [#group]

Use multiple fields to create a checkbox list.

<ComponentPreview name="checkbox-group" />


# Collapsible



<ComponentPreview name="collapsible-preview" />

Usage [#usage]

```tsx
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "uilab-core"
```

```tsx
<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. Free to use for personal and commercial projects. No attribution
    required.
  </CollapsibleContent>
</Collapsible>
```

Examples [#examples]

Settings Panel [#settings-panel]

Use a trigger button to reveal additional settings.

<ComponentPreview name="collapsible-settings" />

File Tree [#file-tree]

Use nested collapsibles to build a file tree.

<ComponentPreview name="collapsible-file-tree" />


# Command



<ComponentPreview name="command-preview" />

Usage [#usage]

```tsx
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "uilab-core"
```

```tsx
<Command className="max-w-sm rounded-lg border">
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
      <CommandItem>Calculator</CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>Profile</CommandItem>
      <CommandItem>Billing</CommandItem>
      <CommandItem>Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>
```


# Context Menu



<ComponentPreview name="context-menu-preview" />

Usage [#usage]

```tsx
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "uilab-core"
```

```tsx
<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>
```

Examples [#examples]

Submenu [#submenu]

Use `ContextMenuSub` to nest secondary actions.

<ComponentPreview name="context-menu-submenus" />

Icons [#icons]

Combine icons with labels for quick scanning.

<ComponentPreview name="context-menu-icons" />

Groups [#groups]

Group related actions and separate them with dividers.

<ComponentPreview name="context-menu-groups" />

Checkboxes [#checkboxes]

Use `ContextMenuCheckboxItem` for toggles.

<ComponentPreview name="context-menu-checkboxes" />

Radios [#radios]

Use `ContextMenuRadioItem` for exclusive choices.

<ComponentPreview name="context-menu-radios" />


# Dialog



<ComponentPreview name="dialog-preview" />

Usage [#usage]

```tsx
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
```

```tsx
<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>
```


# Drawer



<ComponentPreview name="drawer-preview" />

Usage [#usage]

```tsx
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "uilab-core"
```

```tsx
<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>
```

Examples [#examples]

Scrollable content [#scrollable-content]

Keep actions visible while the content scrolls.

<ComponentPreview name="drawer-scrollable" />

Sides [#sides]

Use the `direction` prop to set the side of the drawer. Available options are top, right, bottom, and left.

<ComponentPreview name="drawer-sides" />


# Dropdown Menu



<ComponentPreview name="dropdown-menu-preview" />

Usage [#usage]

```tsx
import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "uilab-core"
```

```tsx
<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>
    Open
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuItem>Profile</DropdownMenuItem>
      <DropdownMenuItem>Billing</DropdownMenuItem>
      <DropdownMenuSeparator />
    </DropdownMenuGroup>
    <DropdownMenuGroup>
      <DropdownMenuItem>Team</DropdownMenuItem>
      <DropdownMenuItem>Subscription</DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>
```

Examples [#examples]

Basic [#basic]

A basic dropdown menu with labels and separators.

<ComponentPreview name="dropdown-menu-basic" />

Submenu [#submenu]

Use `DropdownMenuSub` to nest secondary actions.

<ComponentPreview name="dropdown-menu-submenus" />

Shortcuts [#shortcuts]

Add `DropdownMenuShortcut` to show keyboard hints.

<ComponentPreview name="dropdown-menu-shortcuts" />

Checkboxes [#checkboxes]

Use `DropdownMenuCheckboxItem` for toggles.

<ComponentPreview name="dropdown-menu-checkboxes" />

Radios [#radios]

Use `DropdownMenuRadioGroup` for exclusive choices.

<ComponentPreview name="dropdown-menu-radios" />

Complex [#complex]

A richer example combining groups, icons, and submenus.

<ComponentPreview name="dropdown-menu-complex" />


# Empty



<ComponentPreview name="empty-preview" />

Usage [#usage]

```tsx
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "uilab-core"
```

```tsx
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon />
    </EmptyMedia>
    <EmptyTitle>No data</EmptyTitle>
    <EmptyDescription>No data found</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Add data</Button>
  </EmptyContent>
</Empty>
```

Examples [#examples]

Outline [#outline]

Use the `border` utility class to create an outline empty state.

<ComponentPreview name="empty-outline" />

Avatar [#avatar]

Use the `EmptyMedia` component to display an avatar in the empty state.

<ComponentPreview name="empty-avatar" />

Input Group [#input-group]

You can add an `InputGroup` component to the `EmptyContent` component.

<ComponentPreview name="empty-input-group" />


# Field



<ComponentPreview name="field-preview" />

Usage [#usage]

```tsx
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldTitle,
} from "uilab-core"
```

```tsx
<FieldSet>
  <FieldLegend>Profile</FieldLegend>
  <FieldDescription>This appears on invoices and emails.</FieldDescription>
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="name">Full name</FieldLabel>
      <Input id="name" autoComplete="off" placeholder="Evil Rabbit" />
      <FieldDescription>This appears on invoices and emails.</FieldDescription>
    </Field>
    <Field>
      <FieldLabel htmlFor="username">Username</FieldLabel>
      <Input id="username" autoComplete="off" aria-invalid />
      <FieldError>Choose another username.</FieldError>
    </Field>
    <Field orientation="horizontal">
      <Switch id="newsletter" />
      <FieldLabel htmlFor="newsletter">Subscribe to the newsletter</FieldLabel>
    </Field>
  </FieldGroup>
</FieldSet>
```

Examples [#examples]

Input [#input]

<ComponentPreview name="field-input" />

Textarea [#textarea]

<ComponentPreview name="field-textarea" />

Select [#select]

<ComponentPreview name="field-select" />

Slider [#slider]

<ComponentPreview name="field-slider" />

Checkbox [#checkbox]

<ComponentPreview name="field-checkbox" />

Radio [#radio]

<ComponentPreview name="field-radio" />

Switch [#switch]

<ComponentPreview name="field-switch" />

Choice Card [#choice-card]

<ComponentPreview name="field-choice-card" />

Field Group [#field-group]

<ComponentPreview name="field-group" />


# Hover Card



<ComponentPreview name="hover-card-preview" />

Usage [#usage]

```tsx
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "uilab-core"
```

```tsx
<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>
    The React Framework – created and maintained by @vercel.
  </HoverCardContent>
</HoverCard>
```

Trigger delays [#trigger-delays]

Use delay and closeDelay on the trigger to control when the card opens and closes.

```tsx
<HoverCard>
  <HoverCardTrigger delay={100} closeDelay={200}>
    Hover
  </HoverCardTrigger>
  <HoverCardContent>Content</HoverCardContent>
</HoverCard>
```

Positioning [#positioning]

Use the `side` and `align` props on `HoverCardContent` to control placement.

```tsx
<HoverCard>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent side="top" align="start">
    Content
  </HoverCardContent>
</HoverCard>
```

Examples [#examples]

Basic [#basic]

<ComponentPreview name="hover-card-basic" />

Sides [#sides]

<ComponentPreview name="hover-card-sides" />


# Components





<Callout type="warning" title="Client component only!">
  These components are for client component only! We are actively working to make it compatible on server component
</Callout>

Most base components are direct export of [shadcn components](https://ui.shadcn.com/docs/components) with our custom styling except the complex ones.
It should function exactly the same except the import destination is different.

Basic usage [#basic-usage]

```tsx
import { Button } from "uilab-core" // instead of '@/components/ui'

export function Example() {
  return <Button variant="secondary">Example</Button>
}
```

Components that are not included from shadcn in the base components are listed below.

* Carousel &#x2A;(Should be optional, depending on the project)*
* Chart &#x2A;(Should be optional, depending on the project)*
* [Data Table](/docs/blocks/data-table)
* [Date Picker](/docs/blocks/date-picker)
* [Sonner](/docs/blocks/sonner)

Don't worry, Most complex components are available in our [shadcn registry](/docs/blocks) with our solutions


# Input Group



<ComponentPreview name="input-group-preview" />

Usage [#usage]

```tsx
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "uilab-core"
```

```tsx
<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>
```

Examples [#examples]

Icon [#icon]

<ComponentPreview name="input-group-icon" />

Text [#text]

<ComponentPreview name="input-group-text" />

Button [#button]

<ComponentPreview name="input-group-button" />

Kbd [#kbd]

<ComponentPreview name="input-group-kbd" />

Dropdown [#dropdown]

<ComponentPreview name="input-group-dropdown" />

Spinner [#spinner]

<ComponentPreview name="input-group-spinner" />

Textarea [#textarea]

<ComponentPreview name="input-group-textarea" />


# Input OTP



<ComponentPreview name="input-otp-preview" />

Usage [#usage]

```tsx
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp"
```

```tsx
<InputOTP maxLength={6}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>
```

Examples [#examples]

Separator [#separator]

Use the `<InputOTPSeparator />` component to add a separator between input groups.

<ComponentPreview name="input-otp-separator" />

Disabled [#disabled]

Use the `disabled` prop to disable the input.

<ComponentPreview name="input-otp-disabled" />

Controlled [#controlled]

Use the `value` and `onChange` props to control the input value.

<ComponentPreview name="input-otp-controlled" />

Invalid [#invalid]

Use `aria-invalid` on the slots to show an error state.

<ComponentPreview name="input-otp-invalid" />

Form [#form]

<ComponentPreview name="input-otp-form" />


# Input



<ComponentPreview name="input-preview" />

Usage [#usage]

```tsx
import { Input } from "@/components/ui/input"
```

```tsx
<Input />
```

Examples [#examples]

Basic [#basic]

<ComponentPreview name="input-basic" />

Field [#field]

Use `Field`, `FieldLabel`, and `FieldDescription` to create an input with a label and description.

<ComponentPreview name="input-field" />

Field Group [#field-group]

Use `FieldGroup` to show multiple `Field` blocks and to build forms.

<ComponentPreview name="input-field-group" />

Disabled [#disabled]

Use the `disabled` prop to disable the input. To style the disabled state, add the `data-disabled` attribute to the `Field` component.

<ComponentPreview name="input-disabled" />

Invalid [#invalid]

Use the `aria-invalid` prop to mark the input as invalid. To style the invalid state, add the `data-invalid` attribute to the `Field` component.

<ComponentPreview name="input-invalid" />

File [#file]

Use the `type="file"` prop to create a file input.

<ComponentPreview name="input-file" />

Inline [#inline]

Use `Field` with `orientation="horizontal"` to create an inline input. Pair with `Button` to create a search input with a button.

<ComponentPreview name="input-inline" />

Grid [#grid]

Use a grid layout to place multiple inputs side by side.

<ComponentPreview name="input-grid" />

Required [#required]

Use the `required` attribute to indicate required inputs.

<ComponentPreview name="input-required" />

Badge [#badge]

Use `Badge` in the label to highlight a recommended field.

<ComponentPreview name="input-badge" />

Input Group [#input-group]

To add icons, text, or buttons inside an input, use the `InputGroup` component. See the [Input Group](/docs/components/input-group) component for more examples.

<ComponentPreview name="input-input-group" />

Button Group [#button-group]

To add buttons to an input, use the `ButtonGroup` component. See the [Button Group](/docs/components/button-group) component for more examples.

<ComponentPreview name="input-button-group" />

Form [#form]

A full form example with multiple inputs, a select, and a button.

<ComponentPreview name="input-form" />


# Item



<ComponentPreview name="item-preview" />

Usage [#usage]

```tsx
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "uilab-core"
```

```tsx
<Item>
  <ItemMedia variant="icon">
    <Icon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Title</ItemTitle>
    <ItemDescription>Description</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button>Action</Button>
  </ItemActions>
</Item>
```

Item vs Field [#item-vs-field]

Use Field if you need to display a form input such as a checkbox, input, radio, or select.

If you only need to display content such as a title, description, and actions, use Item.

Examples [#examples]

Variants [#variants]

Use the `variant` prop to change the visual style of the item.

<ComponentPreview name="item-variants" />

Sizes [#sizes]

Use the `size` prop to change the size of the item. Available sizes are `default`, `sm`, and `xs`.

<ComponentPreview name="item-sizes" />

Icon [#icon]

Use `ItemMedia` with `variant="icon"` to display an icon.

<ComponentPreview name="item-icon" />

Avatar [#avatar]

You can use `ItemMedia` with `variant="avatar"` to display an avatar.

<ComponentPreview name="item-avatar" />

Image [#image]

Use `ItemMedia` with `variant="image"` to display an image.

<ComponentPreview name="item-image" />

Group [#group]

Use `ItemGroup` to group related items together.

<ComponentPreview name="item-group" />

Header [#header]

Use `ItemHeader` to add a header above the item content.

<ComponentPreview name="item-header" />

Link [#link]

Use the `render` prop to render the item as a link. The hover and focus states will be applied to the anchor element.

<ComponentPreview name="item-link" />

Dropdown [#dropdown]

<ComponentPreview name="item-dropdown" />


# Kbd



<ComponentPreview name="kbd-preview" />

Usage [#usage]

```tsx
import { Kbd } from "@/components/ui/kbd"
```

```tsx
<Kbd>Ctrl</Kbd>
```

Examples [#examples]

Group [#group]

Use the `KbdGroup` component to group keyboard keys together.

<ComponentPreview name="kbd-group" />

Button [#button]

Use the `Kbd` component inside a `Button` component to display a keyboard key inside a button.

<ComponentPreview name="kbd-button" />

Tooltip [#tooltip]

You can use the `Kbd` component inside a `Tooltip` component to display a tooltip with a keyboard key.

<ComponentPreview name="kbd-tooltip" />

Input Group [#input-group]

You can use the `Kbd` component inside a `InputGroupAddon` component to display a keyboard key inside an input group.

<ComponentPreview name="kbd-input-group" />


# Label



<ComponentPreview name="label-preview" />

Usage [#usage]

```tsx
import { Label } from "uilab-core"
```

```tsx
<Label htmlFor="email">Your email address</Label>
```

Label in Field [#label-in-field]

For form fields, use the [Field](/docs/components/field) component which includes built-in `FieldLabel`, `FieldDescription`, and `FieldError` components.

```tsx
<Field>
  <FieldLabel htmlFor="email">Your email address</FieldLabel>
  <Input id="email" />
</Field>
```


# Menubar



<ComponentPreview name="menubar-preview" />

Usage [#usage]

```tsx
import {
  Menubar,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar"
```

```tsx
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarGroup>
        <MenubarItem>
          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
        </MenubarItem>
        <MenubarItem>New Window</MenubarItem>
      </MenubarGroup>
      <MenubarSeparator />
      <MenubarGroup>
        <MenubarItem>Share</MenubarItem>
        <MenubarItem>Print</MenubarItem>
      </MenubarGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
```

Examples [#examples]

Checkboxes [#checkboxes]

Use `MenubarCheckboxItem` for toggleable options.

<ComponentPreview name="menubar-checkboxes" />

Radios [#radios]

Use `MenubarRadioGroup` and `MenubarRadioItem` for single-select options.

<ComponentPreview name="menubar-radios" />

Submenus [#submenus]

Use `MenubarSub`, `MenubarSubTrigger`, and `MenubarSubContent` for nested menus.

<ComponentPreview name="menubar-submenus" />

With Icons [#with-icons]

<ComponentPreview name="menubar-icons" />


# Navigation Menu



<ComponentPreview name="navigation-menu-preview" />

Usage [#usage]

```tsx
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "uilab-core"
```

```tsx
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>
```

Link Component (experimental) [#link-component-experimental]

Use the render prop to compose a custom link component such as Next.js Link.
Copy

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

import {
  NavigationMenuItem,
  NavigationMenuLink,
  navigationMenuTriggerStyle,
} from "uilab-core"

export function NavigationMenuDemo() {
  return (
    <NavigationMenuItem>
      <NavigationMenuLink
        render={<Link href="/docs" />}
        className={navigationMenuTriggerStyle()}
      >
        Documentation
      </NavigationMenuLink>
    </NavigationMenuItem>
  )
}
```


# Pagination



<ComponentPreview name="pagination-preview" />

Usage [#usage]

```tsx
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "uilab-core"
```

```tsx
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        2
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>
```

Examples [#examples]

Simple [#simple]

A simple pagination with only page numbers.

<ComponentPreview name="pagination-simple" />

Icons only [#icons-only]

Use just the previous and next buttons without page numbers. This is useful for data tables with a rows per page selector.

<ComponentPreview name="pagination-icons-only" />

Next.js [#nextjs]

By default the `<PaginationLink />` component will render an `<a />` tag.

To use the Next.js `<Link />` component, make the following updates to `pagination.tsx`.

```diff
+ import Link from "next/link"

- type PaginationLinkProps = ... & React.ComponentProps<"a">
+ type PaginationLinkProps = ... & React.ComponentProps<typeof Link>

const PaginationLink = ({...props }: ) => (
  <PaginationItem>
-   <a>
+   <Link>
      // ...
-   </a>
+   </Link>
  </PaginationItem>
)
```


# Popover



<ComponentPreview name="popover-preview" />

Usage [#usage]

```tsx
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "uilab-core"
```

```tsx
<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>
    Open Popover
  </PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Title</PopoverTitle>
      <PopoverDescription>Description text here.</PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>
```

Examples [#examples]

Basic [#basic]

A simple popover with a header, title, and description.

<ComponentPreview name="popover-basic" />

Align [#align]

Use the `align` prop on `PopoverContent` to control the horizontal alignment.

<ComponentPreview name="popover-align" />

With Form [#with-form]

A popover with form fields inside.

<ComponentPreview name="popover-form" />


# Progress



<ComponentPreview name="progress-preview" />

Usage [#usage]

```tsx
import { Progress } from "@/components/ui/progress"
```

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

Examples [#examples]

Label [#label]

Use `ProgressLabel` and `ProgressValue` to add a label and value display.

<ComponentPreview name="progress-label" />

Controlled [#controlled]

A progress bar that can be controlled by a slider.

<ComponentPreview name="progress-controlled" />


# Radio Group



<ComponentPreview name="radio-group-preview" />

Usage [#usage]

```tsx
import { Label, RadioGroup, RadioGroupItem } from "uilab-core"
```

```tsx
<RadioGroup defaultValue="option-one">
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </div>
  <div className="flex items-center gap-3">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </div>
</RadioGroup>
```

Examples [#examples]

Description [#description]

Radio group items with a description using the `Field` component.

<ComponentPreview name="radio-group-description" />

Choice Card [#choice-card]

Use `FieldLabel` to wrap the entire `Field` for a clickable card-style selection.

<ComponentPreview name="radio-group-choice-card" />

Field set [#field-set]

Use `FieldSet` and `FieldLegend` to group radio items with a label and description.

<ComponentPreview name="radio-group-fieldset" />

Disabled [#disabled]

Use the `disabled` prop on `RadioGroup` to disable all items.

<ComponentPreview name="radio-group-disabled" />

Invalid [#invalid]

Use `aria-invalid` on `RadioGroupItem` and `data-invalid` on `Field` to show validation errors.

<ComponentPreview name="radio-group-invalid" />


# Resizable



<ComponentPreview name="resizable-preview" />

Usage [#usage]

```tsx
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@/components/ui/resizable"
```

```tsx
<ResizablePanelGroup orientation="horizontal">
  <ResizablePanel>One</ResizablePanel>
  <ResizableHandle />
  <ResizablePanel>Two</ResizablePanel>
</ResizablePanelGroup>
```

Examples [#examples]

Vertical [#vertical]

Use `orientation="vertical"` for vertical resizing.

<ComponentPreview name="resizable-vertical" />

Handle [#handle]

Use the `withHandle` prop on `ResizableHandle` to show a visible handle.

<ComponentPreview name="resizable-handle" />


# Scroll Area



<ComponentPreview name="scroll-area-preview" />

Usage [#usage]

```tsx
import { ScrollArea } from "uilab-core"
```

```tsx
<ScrollArea className="h-50 w-87.5 rounded-md border p-4">
  Your scrollable content here.
</ScrollArea>
```

Examples [#examples]

Horizontal [#horizontal]

Use `ScrollBar` with `orientation="horizontal"` for horizontal scrolling.

<ComponentPreview name="scroll-area-horizontal" />


# Select



<ComponentPreview name="select-preview" />

Usage [#usage]

```tsx
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "uilab-core"
```

```tsx
<Select>
  <SelectTrigger className="w-45">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectItem value="light">Light</SelectItem>
      <SelectItem value="dark">Dark</SelectItem>
      <SelectItem value="system">System</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>
```

Example [#example]

Align Item With Trigger [#align-item-with-trigger]

Use `alignItemWithTrigger` on `SelectContent` to control whether the selected item aligns with the trigger. When `true` (default), the popup positions so the selected item appears over the trigger. When `false`, the popup aligns to the trigger edge.

<ComponentPreview name="select-align-item" />

Groups [#groups]

Use `SelectGroup`, `SelectLabel`, and `SelectSeparator` to organize items.

<ComponentPreview name="select-groups" />

Scrollable [#scrollable]

A select with many items that scrolls.

<ComponentPreview name="select-scrollable" />

Disabled [#disabled]

<ComponentPreview name="select-disabled" />

Invalid [#invalid]

Add the `data-invalid` attribute to the `Field` component and the `aria-invalid` attribute to the `SelectTrigger` component to show an error state.

```tsx
// [!code word:data-invalid]
<Field data-invalid>
  <FieldLabel>Fruit</FieldLabel>
  // [!code word:aria-invalid]
  <SelectTrigger aria-invalid>
    <SelectValue />
  </SelectTrigger>
</Field>
```

<ComponentPreview name="select-invalid" />


# Separator



<ComponentPreview name="separator-preview" />

Usage [#usage]

```tsx
import { Separator } from "uilab-core"
```

```tsx
<Separator />
```

Examples [#examples]

Vertical [#vertical]

Use `orientation="vertical"` for a vertical separator.

<ComponentPreview name="separator-vertical" />

Menu [#menu]

Vertical separators between menu items with descriptions.

<ComponentPreview name="separator-menu" />

List [#list]

Horizontal separators between list items.

<ComponentPreview name="separator-list" />


# Sheet



<ComponentPreview name="sheet-preview" />

Usage [#usage]

```tsx
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "uilab-core"
```

```tsx
<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>This action cannot be undone.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>
```

Examples [#examples]

Sides [#sides]

Use the `side` prop on `SheetContent` to set the edge of the screen where the sheet appears. Values are `top`, `right`, `bottom`, or `left`.

<ComponentPreview name="sheet-sides" />

No Close Button [#no-close-button]

Use `showCloseButton={false}` on `SheetContent` to hide the close button.

<ComponentPreview name="sheet-no-close-button" />


# Sidebar



Usage [#usage]

```tsx title='app/layout.tsx'
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
import { AppSidebar } from "@/components/app-sidebar"

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <AppSidebar />
      <main>
        <SidebarTrigger />
        {children}
      </main>
    </SidebarProvider>
  )
}
```

```tsx title='components/app-sidebar.tsx'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
} from "@/components/ui/sidebar"

export function AppSidebar() {
  return (
    <Sidebar>
      <SidebarHeader />
      <SidebarContent>
        <SidebarGroup />
        <SidebarGroup />
      </SidebarContent>
      <SidebarFooter />
    </Sidebar>
  )
}
```


# Skeleton



<ComponentPreview name="skeleton-preview" />

Usage [#usage]

```tsx
import { Skeleton } from "uilab-core"
```

```tsx
<Skeleton className="h-5 w-25 rounded-full" />
```

Examples [#examples]

Avatar [#avatar]

<ComponentPreview name="skeleton-avatar" />

Card [#card]

<ComponentPreview name="skeleton-card" />

Text [#text]

<ComponentPreview name="skeleton-text" />

Form [#form]

<ComponentPreview name="skeleton-form" />

Table [#table]

<ComponentPreview name="skeleton-table" />


# Slider



<ComponentPreview name="slider-preview" />

Usage [#usage]

```tsx
import { Slider } from "@/components/ui/slider"
```

```tsx
<Slider defaultValue={[33]} max={100} step={1} />
```

Examples [#examples]

Range [#range]

Use an array with two values for a range slider.

<ComponentPreview name="slider-range" />

Multiple Thumbs [#multiple-thumbs]

Use an array with multiple values for multiple thumbs.

<ComponentPreview name="slider-multiple" />

Vertical [#vertical]

Use `orientation="vertical"` for a vertical slider.

<ComponentPreview name="slider-vertical" />

Controlled [#controlled]

<ComponentPreview name="slider-controlled" />

Disabled [#disabled]

Use the `disabled` prop to disable the slider.

<ComponentPreview name="slider-disabled" />


# Spinner



<ComponentPreview name="spinner-preview" />

Usage [#usage]

```tsx
import { Spinner } from "uilab-core"
```

```tsx
<Spinner />
```

Examples [#examples]

Sizes [#sizes]

Use the size-\* utility class to change the size of the spinner.

<ComponentPreview name="spinner-sizes" />

Button [#button]

Add a spinner to a button to indicate a loading state. Remember to use the `data-icon="inline-start"` prop to add the spinner to the start of the button and the `data-icon="inline-end"` prop to add the spinner to the end of the button.

<ComponentPreview name="spinner-button" />

Badge [#badge]

Add a spinner to a badge to indicate a loading state. Remember to use the `data-icon="inline-start"` prop to add the spinner to the start of the badge and the `data-icon="inline-end"` prop to add the spinner to the end of the badge.

<ComponentPreview name="spinner-badge" />

Input Group [#input-group]

<ComponentPreview name="spinner-input-group" />

Empty [#empty]

<ComponentPreview name="spinner-empty" />


# Switch



<ComponentPreview name="switch-preview" />

Usage [#usage]

```tsx
import { Switch } from "@/components/ui/switch"
```

```tsx
<Switch />
```

Examples [#examples]

Description [#description]

<ComponentPreview name="switch-description" />

Choice Card [#choice-card]

Card-style selection where `FieldLabel` wraps the entire `Field` for a clickable card pattern.

<ComponentPreview name="switch-choice-card" />

Sizes [#sizes]

Use the size prop to change the size of the switch.

<ComponentPreview name="switch-sizes" />

Disabled [#disabled]

Add the `disabled` prop to the `Switch` component to disable the switch. Add the `data-disabled` prop to the `Field` component for styling.

<ComponentPreview name="switch-disabled" />

Invalid [#invalid]

Add the `aria-invalid` prop to the `Switch` component to indicate an invalid state. Add the `data-invalid` prop to the `Field` component for styling.

<ComponentPreview name="switch-invalid" />


# Tabs



<ComponentPreview name="tabs-preview" />

Usage [#usage]

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "uilab-core"
```

```tsx
<Tabs defaultValue="account" className="w-100">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Make changes to your account here.</TabsContent>
  <TabsContent value="password">Change your password here.</TabsContent>
</Tabs>
```

Examples [#examples]

Line [#line]

Use the `variant="line"` prop on `TabsList` for a line style.

<ComponentPreview name="tabs-line" />

Vertical [#vertical]

Use `orientation="vertical"` for vertical tabs.

<ComponentPreview name="tabs-vertical" />

Disabled [#disabled]

<ComponentPreview name="tabs-disabled" />

Icons [#icons]

<ComponentPreview name="tabs-icons" />


# Textarea



<ComponentPreview name="textarea-preview" />

Usage [#usage]

```tsx
import { Textarea } from "@/components/ui/textarea"
```

```tsx
<Textarea />
```

Examples [#examples]

Field [#field]

Use `Field`, `FieldLabel`, and `FieldDescription` to create a textarea with a label and description.

<ComponentPreview name="textarea-field" />

Disabled [#disabled]

Use the `disabled` prop to disable the textarea. To style the disabled state, add the `data-disabled` attribute to the `Field` component.

<ComponentPreview name="textarea-disabled" />

Invalid [#invalid]

Use the `aria-invalid` prop to mark the textarea as invalid. To style the invalid state, add the `data-invalid` attribute to the `Field` component.

<ComponentPreview name="textarea-invalid" />

Button [#button]

Pair with `Button` to create a textarea with a submit button.

<ComponentPreview name="textarea-button" />


# Toggle Group



<ComponentPreview name="toggle-group-preview" />

Usage [#usage]

```tsx
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
```

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

Examples [#examples]

Outline [#outline]

Use `variant="outline"` for an outline style.

<ComponentPreview name="toggle-group-outline" />

Sizes [#sizes]

Use the `size` prop to change the size of the toggle group.

<ComponentPreview name="toggle-group-sizes" />

Spacing [#spacing]

Use `spacing` to add spacing between toggle group items.

<ComponentPreview name="toggle-group-spacing" />

Vertical [#vertical]

Use `orientation="vertical"` for vertical toggle groups.

<ComponentPreview name="toggle-group-vertical" />

Disabled [#disabled]

<ComponentPreview name="toggle-group-disabled" />


# Toggle



<ComponentPreview name="toggle-preview" />

Usage [#usage]

```tsx
import { Toggle } from "uilab-core"
```

```tsx
<Toggle>Toggle</Toggle>
```

Examples [#examples]

Outline [#outline]

Use `variant="outline"` for an outline style.

<ComponentPreview name="toggle-outline" />

Sizes [#sizes]

Use the `size` prop to change the size of the toggle.

<ComponentPreview name="toggle-sizes" />

Text [#text]

<ComponentPreview name="toggle-text" />

Disabled [#disabled]

<ComponentPreview name="toggle-disabled" />


# Tooltip



<ComponentPreview name="tooltip-preview" />

Usage [#usage]

```tsx
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "uilab-core"
```

```tsx
<Tooltip>
  <TooltipTrigger>Hover</TooltipTrigger>
  <TooltipContent>
    <p>Add to library</p>
  </TooltipContent>
</Tooltip>
```

Examples [#examples]

Sides [#sides]

Use the `side` prop to change the position of the tooltip.

<ComponentPreview name="tooltip-sides" />

With Keyboard Shortcut [#with-keyboard-shortcut]

<ComponentPreview name="tooltip-with-kbd" />

Disabled Button [#disabled-button]

Show a tooltip on a disabled button by wrapping it with a span.

<ComponentPreview name="tooltip-disabled-button" />