Zen UI

https://zenui.dev/docs
Admin
Zen UI is a comprehensive React component library built with Tailwind CSS, featuring accessible,...
Tokens:28,224
Snippets:152
Trust Score:4.6
Update:6 months ago
Show doc for...
Tokens:
Raw
### Installation

Source: https://zenui.dev/docs/components/skeleton

Steps to install and set up the Skeleton component in your project.

```APIDOC
## Installation

Follow these steps to install and set up the Skeleton component in your project.

### Copy the component code

Place the following code into `skeleton.jsx` (or your preferred file path):

```javascript
import React from 'react'; 
import { cn } from './src/libs/utils';

function Skeleton({ className, ...props }) {
  return (
    <div
      className={cn(
        'animate-pulse rounded-md bg-gray-700/50 dark:bg-gray-500/20',
        className
      )}
      {...props}
    />
  );
}

export { Skeleton };
```

### Copy the utility function

Ensure you have the `cn` utility function available in your project. Place the following code into `utils.js` (or your preferred file path):

```javascript
// utils.js
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs) {
  return twMerge(clsx(inputs));
}
```

### Use the component

After copying the component and its dependencies, you can use it in your project:

```javascript
import {Skeleton} from './src/components/skeleton';

function MyComponent() {
  return (
    <div>
      <Skeleton />
    </div>
  );
}

export default MyComponent;
```
```

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

### Installation and Usage

Source: https://zenui.dev/docs/components/select

Instructions on how to install and use the Select component in your project.

```APIDOC
## Installation

Follow these steps to install and set up the Select component in your project.

### Copy the component code
`select.jsx`
```jsx
import React from 'react';
import { cn } from './src/libs/utils';

export default function Select({
  label,
  options = [],
  value,
  onChange,
  placeholder = 'Select an option',
  className = '',
  name,
  disabled = false,
}) {
  return (
    <div className="w-full max-w-xs">
      {label && (
        <label
          htmlFor={name}
          className="block mb-1 font-medium text-gray-700 dark:text-gray-300 text-sm"
        >
          {label}
        </label>
      )}

      <div className="relative">
        <select
          id={name}
          name={name}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          disabled={disabled}
          className={cn(
            'appearance-none w-full px-4 py-2 pr-10 rounded-lg shadow-sm',
            'border bg-white dark:bg-gray-800',
            'text-sm text-gray-900 dark:text-white',
            'border-gray-300 dark:border-gray-600',
            'focus:outline-none focus:ring-2 focus:ring-blue-500',
            disabled &&
              'bg-gray-100 dark:bg-gray-700 cursor-not-allowed opacity-60',
            className
          )}
        >
          {placeholder && (
            <option value="" disabled hidden>
              {placeholder}
            </option>
          )}

          {options.map((opt) => (
            <option key={opt.value} value={opt.value}>
              {opt.label}
            </option>
          ))}
        </select>

        {/* Dropdown Arrow Icon */}
        <div className="right-3 absolute inset-y-0 flex items-center text-gray-400 dark:text-gray-300 pointer-events-none">
          <svg
            className="w-4 h-4"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            viewBox="0 0 24 24"
          >
            <path d="M19 9l-7 7-7-7" />
          </svg>
        </div>
      </div>
    </div>
  );
}
```

### Copy the utility function
Make sure you have this utility function in your project:
`utils.js`
```javascript
// utils.js
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs) {
  return twMerge(clsx(inputs));
}
```

### Use the component
After copying the component and its dependencies, you can use it in your project:
`YourComponent.jsx`
```jsx
import {Select} from './src/components/select';

function MyComponent() {
  return (
    <div>
      <Select />
    </div>
  );
}

export default MyComponent;
```
```

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

### Installation and Usage

Source: https://zenui.dev/docs/components/pagination

Instructions on how to install and use the Pagination component in your project.

```APIDOC
## Installation and Usage

### Installation
1. Copy the `Pagination` component code into your project, for example, in `src/components/pagination.jsx`.
2. Ensure you have the `clsx` and `tailwind-merge` libraries installed (`npm install clsx tailwind-merge` or `yarn add clsx tailwind-merge`).
3. Copy the `cn` utility function into your project, for example, in `utils.js`.

### Basic Usage
Import the `Pagination` component into your React component and use it.

```jsx
import { Pagination } from './src/components/pagination';

function MyComponent() {
  return (
    <div>
      <Pagination
        count={10} // Total number of pages
        page={1}   // Current page
        onPageChange={(newPage) => console.log('Page changed to:', newPage)}
      />
    </div>
  );
}

export default MyComponent;
```
```

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

### Timer with User Input Example

Source: https://zenui.dev/docs/components/timer

Shows a Timer component configured to allow users to input custom start times. This variant is useful for scenarios requiring flexible time settings.

```jsx
import  { Timer }  from "./src/components/timer"

export function TimerWithInput() {
  return (
    <Timer initialMinutes={0} initialSeconds={0} />
  )
}
```

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

### Installation and Usage

Source: https://zenui.dev/docs/components/pricing-table

Instructions on how to install and use the Pricing Table component in your project.

```APIDOC
### Copy the utility function

Make sure you have this utility function in your project:

```javascript
// utils.js
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs) {
  return twMerge(clsx(inputs));
}
```

### Use the component

After copying the component and its dependencies, you can use it in your project:

```jsx
import {PricingTable} from './src/components/pricing-table';

function MyComponent() {
  return (
    <div>
      <PricingTable />
    </div>
  );
}

export default MyComponent;
```
```

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

### Spinner Component Installation

Source: https://zenui.dev/docs/components/spinner

Instructions for installing and setting up the Spinner component in your project.

```APIDOC
## Installation

Follow these steps to install and set up the Spinner component in your project.

### Copy the component code

```jsx
import React from "react";
import { cn } from "./src/libs/utils";
import {cva} from "class-variance-authority";

const spinnerVariants = cva("border-4 rounded-full animate-spin",
     {
    variants: {
        variant:{
            dashed:"border-dashed",
            dotted:"border-dotted",
        },
        size: {
            sm: "h-8 w-8",
            md: "h-10 w-10",
            lg: "h-12 w-12",
        },
        color:{
            pink:"border-pink-600",
            purple:"border-purple-600",
            blue:"border-blue-600",
            red:"border-red-600",
            yellow:"border-yellow-600",
            green:'border-green-600',
        }
    },
    defaultVariants: {
        variant:"dashed",
        size: "md",
       color:"blue"
    },
});

const Spinner = React.forwardRef(
({ 
    className,
    children,
    variant,
    size,
    color,
    isLoading,
    disabled,
    ...props
},ref)=>{
    return(
        <div
        className={cn(
            spinnerVariants({size,color,className,variant})
        )}
        ref={ref}
        disabled={isLoading||disabled}
        {...props}
        >

{isLoading ? (
          <>
            <svg
              className="mr-2 -ml-1 w-4 h-4 text-white animate-spin"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
            >
              <circle
                className="opacity-25"
                cx="12"
                cy="12"
                r="10"
                stroke="currentColor"
                strokeWidth="4"
              ></circle>
              <path
                className="opacity-75"
                fill="currentColor"
                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
              ></path>
            </svg>
            Loading...
          </>
        ) : (
          children
        )}

        </div>
    )
}
)

Spinner.displayName="Spinner";

export  { Spinner };
```

### Copy the utility function

Make sure you have this utility function in your project:

```javascript
// utils.js
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs) {
  return twMerge(clsx(inputs));
}
```

### Use the component

After copying the component and its dependencies, you can use it in your project:

```jsx
import {Spinner} from './src/components/spinner';

function MyComponent() {
  return (
    <div>
      <Spinner />
    </div>
  );
}

export default MyComponent;
```
```

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

### Full API Reference Example

Source: https://zenui.dev/docs/components/select

Demonstrates all available props for the Select component.

```jsx
<Select
  label="Label"
  name="select-name"
  value={val}
  onChange={setVal}
  options={[
    { label: 'One', value: '1' },
    { label: 'Two', value: '2' },
  ]}
  placeholder="Choose option"
  className="custom-class"
  disabled={false}
/>
```

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

### Basic Select Example

Source: https://zenui.dev/docs/components/select

A simple select dropdown example without managing React state.

```APIDOC
## Basic Select

A simple select dropdown with no React state.

### Component Code
```jsx
<Select
  value={val}
  onChange={setVal}
  options={[
    { label: 'Option X', value: 'x' },
    { label: 'Option Y', value: 'y' },
  ]}
  placeholder="Pick one"
  name="select-basic"
/>
<div id="select-basic-value">Selected: None</div>
```
```

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

### Timer Component API Example

Source: https://zenui.dev/docs/components/timer

Example of initializing the Timer component with specific prop values.

```jsx
<Timer initialMinutes={5} initialSeconds={0} />
```

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

### Component Usage Example

Source: https://zenui.dev/docs/components/select

Basic import and usage pattern for the Select component.

```jsx
import {Select} from './src/components/select';

function MyComponent() {
  return (
    <div>
      <Select />
    </div>
  );
}

export default MyComponent;
```

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

### Install Dependencies

Source: https://zenui.dev/docs/installation

Required packages for Zen UI components, including animation and utility libraries.

```bash
npm install tailwindcss-animate class-variance-authority clsx tailwind-merge recharts
```

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

### Textarea API Example

Source: https://zenui.dev/docs/components/textarea

Demonstration of passing props to the Textarea component.

```jsx
          <Textarea
          isLoading={false} // Whether to show a loading state
          disabled={false} // Whether the button is disabled
          >
          </Textarea>
```

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

### Select with Label Example

Source: https://zenui.dev/docs/components/select

Demonstrates how to use the Select component with a label.

```APIDOC
## Select with Label

A select component with a label.

### Component Code
```jsx
<Select
  label="Select Item"
  name="item"
  value={val}
  onChange={setVal}
  options={[
    { label: 'Item 1', value: 'item1' },
    { label: 'Item 2', value: 'item2' },
  ]}
/>
```
```

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

### Configure the Pagination component

Source: https://zenui.dev/docs/components/pagination

Example usage of the Pagination component with various configuration props.

```jsx
<Pagination
  count={10}
  page={1}
  onPageChange={(page) => console.log(page)}
  siblingCount={1}
  boundaryCount={1}
  showFirstButton={false}
  showLastButton={false}
  showPrevNextButtons={true}
  disabled={false}
  variant="default"
  size="default"
/>
```

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

### Implement Basic Pagination

Source: https://zenui.dev/docs/components/pagination

Standard pagination setup with previous and next buttons using a controlled state.

```jsx
import { useState } from "react"

const [page, setPage] = useState(1)

<Pagination 
  count={10} 
  page={page} 
  onPageChange={setPage}
/>
```

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

### Basic Component Usage

Source: https://zenui.dev/docs/components/skeleton

Example of importing and using the Skeleton component in a React component.

```jsx
import {Skeleton} from './src/components/skeleton';

function MyComponent() {
  return (
    <div>
      <Skeleton />
    </div>
  );
}

export default MyComponent;
```

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

### Timer Variants Example

Source: https://zenui.dev/docs/components/timer

Demonstrates how to use the Timer component in its default, compact, and circular variants. Ensure the Timer component is imported correctly.

```jsx
import  { Timer }  from "./src/components/timer"

export function TimerVariants() {
  return (
    <div className="gap-6 grid grid-cols-1 md:grid-cols-2">
      <div className="space-y-2">
        <h3 className="font-medium text-sm">Default Timer</h3>
        <Timer initialMinutes={1} initialSeconds={30} showInput={false} />
      </div>
      <div className="space-y-2">
        <h3 className="font-medium text-sm">Compact Timer</h3>
        <Timer initialMinutes={1} initialSeconds={30} variant="compact" showInput={false} />
      </div>
      <div className="space-y-2">
        <h3 className="font-medium text-sm">Circular Timer</h3>
        <Timer initialMinutes={1} initialSeconds={30} variant="circular" showInput={false} />
      </div>
    </div>
  )
}
```

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

### Table with Footer

Source: https://zenui.dev/docs/components/table

Example of including a TableFooter for summary information, such as a total amount.

```jsx
<Table>
  {/* header and body */}
  <TableFooter>
    <TableRow>
      <TableCell colSpan={2}>Total: $1,200.00</TableCell>
    </TableRow>
  </TableFooter>
</Table>

```

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

### Import and use the PieChart component

Source: https://zenui.dev/docs/components/piechart

Basic implementation example for rendering the PieChart within a React component.

```jsx
import {PieChart} from './src/components/piechart';

function MyComponent() {
  return (
    <div>
      <PieChart />
    </div>
  );
}

export default MyComponent;
```

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

### Disabled Select Example

Source: https://zenui.dev/docs/components/select

Shows how to render a disabled Select component.

```APIDOC
## Disabled Select

A select dropdown that is disabled.

### Component Code
```jsx
<Select
  disabled
  value=""
  onChange={()=>{}}
  options={[
    { label: 'Disabled 1', value: 'd1' },
    { label: 'Disabled 2', value: 'd2' },
  ]}
/>
```
```

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

### Timer Component Usage

Source: https://zenui.dev/docs/components/timer

Basic implementation example for importing and using the Timer component in a parent component.

```jsx
import {Timer} from './src/components/timer';

function MyComponent() {
  return (
    <div>
      <Timer />
    </div>
  );
}

export default MyComponent;
```

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

### Spinner API Reference Example

Source: https://zenui.dev/docs/components/spinner

Demonstrates the usage of the Spinner component with its available props. Customize 'variant', 'size', 'isLoading', and 'disabled' for specific needs.

```jsx
<Spinner
variant="dashed" // The visual style of the button
size="md" // The size of the button
isLoading={false} // Whether to show a loading state
disabled={false} // Whether the button is disabled
>
</Spinner>
```

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

### Timer Component API Reference

Source: https://zenui.dev/docs/components/timer

Provides an overview of the Timer component's API and an example of its usage.

```APIDOC
## API Reference

Learn about the available functions and parameters for the Timer component to maximize its potential in your projects.

### Timer Component API

The Timer component provides a way to display and control countdown timers.

```jsx
<Timer initialMinutes={5} initialSeconds={0} />
```
```

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

### Using the Button Component in a Project (YourComponent.jsx)

Source: https://zenui.dev/docs/components/button

This example demonstrates how to import and use the `Button` component from its file path in your React application. Ensure the path `./src/components/button` is correct for your project structure.

```jsx
import {Button} from './src/components/button';

function MyComponent() {
  return (
    <div>
      <Button />
    </div>
  );
}

export default MyComponent;
```

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

### Render PieChart with data and styling

Source: https://zenui.dev/docs/components/piechart

Example usage of the PieChart component with custom data, colors, and variant styling.

```jsx
<PieChart
      data={[
        { name: 'Group A', value: 400 },
        { name: 'Group B', value: 300 },
        { name: 'Group C', value: 300 },
      ]}
      colors={['#6366f1', '#10b981', '#ef4444']}
      variant="bordered"
      size="md"
    />
```

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

### Timer With AutoStart and No Input

Source: https://zenui.dev/docs/components/timer

Enables the Timer component to start automatically upon mounting and hides the user input fields. Set `autoStart` to true and `showInput` to false.

```jsx
<Timer 
  initialMinutes={5} 
  initialSeconds={0} 
  autoStart={true}
  showInput={false}
/>
```

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

### Using the Spinner Component

Source: https://zenui.dev/docs/components/spinner

Example of how to import and use the Spinner component in your React application. Basic usage involves importing and rendering the component.

```jsx
import {Spinner} from './src/components/spinner';

function MyComponent() {
  return (
    <div>
      <Spinner />
    </div>
  );
}

export default MyComponent;
```

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

### Basic Separator Usage

Source: https://zenui.dev/docs/components/separator

A simple example of how to import and use the Separator component in your React application.

```jsx
import {Separator} from './src/components/separator';

function MyComponent() {
  return (
    <div>
      <Separator />
    </div>
  );
}

export default MyComponent;

```

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

### Configure ChartWrapper layout

Source: https://zenui.dev/docs/components/piechart

Example of wrapping chart components with the ChartWrapper to apply specific variants and sizes.

```jsx
<ChartWrapper variant="light" size="md">
      {/* Chart components go here */}
    </ChartWrapper>
```

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

### Textarea Component Usage

Source: https://zenui.dev/docs/components/textarea

Example of importing and using the Textarea component within a React application.

```jsx
import {Textarea} from './src/components/textarea';

function MyComponent() {
  return (
    <div>
      <Textarea />
    </div>
  );
}

export default MyComponent;
```

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

### Separator Component API Examples

Source: https://zenui.dev/docs/components/separator

Illustrates various ways to use the Separator component with different props for orientation, decoration, and custom styling.

```jsx
import  { Separator }  from "./src/components/separator"

// Horizontal separator (default)
<Separator />

// Vertical separator
<Separator orientation="vertical" />

// Non-decorative separator (for semantic separation)
<Separator decorative={false} />

// Custom styling
<Separator className="bg-blue-600 my-6" />

```

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

### Pagination Component Implementation

Source: https://zenui.dev/docs/components/pagination

This is the core implementation of the Pagination component. It handles page calculations, button rendering, and event handling for navigation. Ensure necessary dependencies like `react`, `class-variance-authority`, and `lucide-react` are installed.

```jsx
import React from "react"
import { cn } from "./src/libs/utils"
import { cva } from "class-variance-authority"
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
import { Button } from "./src/components/button"
  
  const paginationVariants = cva("flex items-center", {
    variants: {
      variant: {
        default: "",
        outline: "",
        ghost: "",
      },
      size: {
        default: "text-sm",
        sm: "text-xs",
        lg: "text-base",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  })
  
  export const Pagination = React.forwardRef(
    (
      {
        className,
        variant,
        size,
        count,
        page,
        onPageChange,
        siblingCount = 1,
        boundaryCount = 1,
        showFirstButton = false,
        showLastButton = false,
        showPrevNextButtons = true,
        disabled = false,
        ...props
      },
      ref,
    ) => {
      const range = (start, end) => {
        const length = end - start + 1
        return Array.from({ length }, (_, i) => start + i)
      }
  
      const startPages = range(1, Math.min(boundaryCount, count))
      const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count)
  
      const siblingsStart = Math.max(
        Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),
        boundaryCount + 2,
      )
  
      const siblingsEnd = Math.min(
        Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),
        endPages.length > 0 ? endPages[0] - 2 : count - 1,
      )
  
      const itemList = [
        ...(showFirstButton ? ["first"] : []),
        ...(showPrevNextButtons ? ["previous"] : []),
        ...startPages,
        ...(siblingsStart > boundaryCount + 2
          ? ["start-ellipsis"]
          : boundaryCount + 1 < count - boundaryCount
            ? [boundaryCount + 1]
            : []),
        ...range(siblingsStart, siblingsEnd),
        ...(siblingsEnd < count - boundaryCount - 1
          ? ["end-ellipsis"]
          : count - boundaryCount > boundaryCount
            ? [count - boundaryCount]
            : []),
        ...endPages,
        ...(showPrevNextButtons ? ["next"] : []),
        ...(showLastButton ? ["last"] : []),
      ]
  
      const handleClick = (pageNumber) => {
        if (!disabled) {
          onPageChange(pageNumber)
        }
      }
  
      const getButtonVariant = (item) => {
        if (item === page) {
          return variant === "outline" ? "default" : variant === "ghost" ? "secondary" : "default"
        }
        return variant
      }
  
      return (
        <nav
          ref={ref}
          className={cn(paginationVariants({ variant, size }), className)}
          aria-label="Pagination"
          {...props}
        >
          <ul className="flex items-center gap-1">
            {itemList.map((item, index) => {
              if (item === "first") {
                return (
                  <li key={index}>
                    <Button
                      variant={variant === "default" ? "outline" : variant}
                      size={size === "default" ? "sm" : size === "sm" ? "sm" : "default"}
                      onClick={() => handleClick(1)}
                      disabled={disabled || page === 1}
                      aria-label="Go to first page"
                      className="px-2"
                    >
                      <ChevronLeft className="mr-1 w-4 h-4" />
                      <ChevronLeft className="w-4 h-4" />
                    </Button>
                  </li>
                )
              }
  
              if (item === "previous") {
                return (
                  <li key={index}>
                    <Button
                      variant={variant === "default" ? "outline" : variant}
                      size={size === "default" ? "sm" : size === "sm" ? "sm" : "default"}
                      onClick={() => handleClick(page - 1)}
                      disabled={disabled || page === 1}
                      aria-label="Go to previous page"
                      className="px-2"
                    >
                      <ChevronLeft className="w-4 h-4" />
                    </Button>
                  </li>
                )
              }
  
              if (item === "start-ellipsis" || item === "end-ellipsis") {
                return (
                  <li key={index} className="flex justify-center items-center">
                    <span className="px-2">
                      <MoreHorizontal className="w-4 h-4" />
                    </span>
                  </li>
                )
              }
  
              if (item === "next") {
                return (
                  <li key={index]>
                    <Button
                      variant={variant === "default" ? "outline" : variant}

```

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

### Project Directory Structure

Source: https://zenui.dev/docs/installation

Recommended file organization for components and utility libraries.

```text
./src/
├── components/
│   ├── button.jsx
│   ├── card.jsx
│   ├── tooltip.jsx
│   └── ... other components
└── libs/
    └── utils.js    # Contains helper functions like cn(), mergeRefs(), etc.
```

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

### Importing Components and Utilities

Source: https://zenui.dev/docs/installation

Standard import syntax for accessing components and utility functions within the application.

```javascript
// Importing components
import { Button } from './src/components/button';
import { Card } from './src/components/card';

// Importing utility functions
import { cn } from './src/libs/utils';
```

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

### Implement Pricing Table with Toggle

Source: https://zenui.dev/docs/components/pricing-table

Enables a monthly/yearly billing toggle by setting the showToggle prop to true.

```jsx
import { PricingTable } from "./src/components/pricing-table"

export function PricingTableWithToggle() {
  const tiers = [
    // Define your pricing tiers here
  ]

  return <PricingTable tiers={tiers} showToggle={true} />
}
```

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

### Display pagination results

Source: https://zenui.dev/docs/components/pagination

Example usage of the PaginationResults component to show current page range and total count.

```jsx
<PaginationResults
  total={100}
  pageSize={10}
  currentPage={1}
/>
```

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

### Basic Table Usage

Source: https://zenui.dev/docs/components/table

Demonstrates the basic structure for using the Table component with a caption, header, and body.

```jsx
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption } from "./src/components/table"

// Basic table
<Table>
  <TableCaption>Invoice List</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>INV001</TableCell>
      <TableCell>Paid</TableCell>
    </TableRow>
  </TableBody>
</Table>

```

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

### Table Subcomponents Usage

Source: https://zenui.dev/docs/components/table

Examples of various table subcomponents with custom Tailwind CSS utility classes for styling and layout.

```jsx
// TableHeader with custom styling
    <TableHeader className="bg-gray-100">
      <TableRow>
        <TableHead className="w-[100px]">ID</TableHead>
        <TableHead>Name</TableHead>
      </TableRow>
    </TableHeader>
    
    // TableBody with alternating row colors
    <TableBody className="[&_tr:nth-child(odd)]:bg-gray-50">
      {/* rows */}
    </TableBody>
    
    // TableFooter with merged cells
    <TableFooter>
      <TableRow>
        <TableCell colSpan={3}>Total</TableCell>
        <TableCell className="text-right">$2,500.00</TableCell>
      </TableRow>
    </TableFooter>
    
    // TableRow with hover effect
    <TableRow className="hover:bg-gray-100">
      <TableCell>INV001</TableCell>
      <TableCell>Paid</TableCell>
    </TableRow>
    
    // TableHead with right-aligned text
    <TableHead className="text-right">Amount</TableHead>
    
    // TableCell with emphasized text
    <TableCell className="font-medium">INV001</TableCell>
    
    // TableCaption with subtle text
    <TableCaption className="text-gray-500">A list of recent invoices</TableCaption>
```

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

### Vertical Separator Example

Source: https://zenui.dev/docs/components/separator

Use this snippet to create a vertical separator for inline content, typically used in navigation or lists.

```jsx
import  { Separator }  from "./src/components/separator"

export function VerticalSeparator() {
  return (
    <div className="flex items-center space-x-4 h-5 text-sm">
      <div>Profile</div>
      <Separator orientation="vertical" />
      <div>Settings</div>
      <Separator orientation="vertical" />
      <div>Logout</div>
    </div>
  )
}
```

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

### Add First and Last Buttons

Source: https://zenui.dev/docs/components/pagination

Extends the basic pagination component with additional navigation buttons for jumping to the start or end of the list.

```jsx
import { useState } from "react"

const [page, setPage] = useState(1)

<Pagination 
  count={10} 
  page={page} 
  onPageChange={setPage}
  showFirstButton
  showLastButton
/>
```

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

### Timer Component Usage

Source: https://zenui.dev/docs/components/timer

Demonstrates how to import and use the Timer component in a React application.

```APIDOC
## Use the component

After copying the component and its dependencies, you can use it in your project:

### YourComponent.jsx
```jsx
import {Timer} from './src/components/timer';

function MyComponent() {
  return (
    <div>
      <Timer />
    </div>
  );
}

export default MyComponent;
```
```

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

### Apply Pagination Variants

Source: https://zenui.dev/docs/components/pagination

Demonstrates different visual styles including default, outline, and ghost variants.

```jsx
import { useState } from "react"

const [page1, setPage1] = useState(1)
const [page2, setPage2] = useState(1)
const [page3, setPage3] = useState(1)

<div className="space-y-4">
  <div>
    <p className="mb-2 text-gray-400 text-sm">Default</p>
    <Pagination 
      count={10} 
      page={page1} 
      onPageChange={setPage1}
      variant="default"
    />
  </div>
  <div>
    <p className="mb-2 text-gray-400 text-sm">Outline</p>
    <Pagination 
      count={10} 
      page={page2} 
      onPageChange={setPage2}
      variant="outline"
    />
  </div>
  <div>
    <p className="mb-2 text-gray-400 text-sm">Ghost</p>
    <Pagination 
      count={10} 
      page={page3} 
      onPageChange={setPage3}
      variant="ghost"
    />
  </div>
</div>
```

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

### Implement Zen UI Components in React

Source: https://zenui.dev/docs/introduction

Demonstrates importing and nesting Card and Button components within a functional React component.

```jsx
import { Button } from "./src/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "./src/components/ui/card"

export default function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <p>This is an example of using components from the UI library.</p>
        <Button variant='primary' size='custom' className="mt-4">Click Me</Button>
      </CardContent>
    </Card>
  )
}
```

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

### Separator with Content Example

Source: https://zenui.dev/docs/components/separator

This snippet demonstrates how to use a separator with text content in the middle, often used to separate options like 'OR'.

```jsx
import { Separator } from "./src/components/separator"

export function SeparatorWithContent() {
  return (
    <div className="relative flex items-center">
      <Separator className="grow" />
      <span className="bg-black mx-2 px-2 text-gray-400 text-xs">OR</span>
      <span className="bg-black mx-2 px-2 text-gray-400 text-xs">OR</span>
      <Separator className="grow" />
    </div>
  )
}
```

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

### Button as Link

Source: https://zenui.dev/docs/components/button

Shows how to utilize the Button component in a link context by wrapping it with an anchor tag.

```APIDOC
## Button as Link

### Description
The Button component can function as a navigation link when wrapped within an anchor tag.

### Request Example
```jsx
<a href="/dashboard">
  <Button>Go to Dashboard</Button>
</a>
```
```

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

### Spinner Sizes

Source: https://zenui.dev/docs/components/spinner

Illustrates how to adjust the size of the Spinner component.

```APIDOC
## Spinner Sizes

Spinners in different sizes

### Request Example
```jsx
<Spinner size="sm"></Spinner>
<Spinner size="md"></Spinner>
<Spinner size="lg"></Spinner>
```
```

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

### Component File Structure

Source: https://zenui.dev/docs/installation

Standard pattern for defining individual components using React and utility helpers.

```javascript
// ./src/components/button.jsx
import React from 'react';
import { cn } from '../libs/utils';

export function Button({ className, variant = 'default', ...props }) {
  // Component implementation
}
```

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

### Basic PricingTable Usage

Source: https://zenui.dev/docs/components/pricing-table

Demonstrates the basic integration of the PricingTable component in a React application. Requires the 'tiers' prop to be defined.

```jsx
import { PricingTable } from "./src/components/pricing-table";

function MyComponent() {
  return (
    <div>
      <PricingTable />
    </div>
  );
}

export default MyComponent;
```

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

### Implement Horizontal Pricing Table

Source: https://zenui.dev/docs/components/pricing-table

Configures the pricing table to display in a horizontal layout for feature comparison by setting the layout prop.

```jsx
import { PricingTable } from "./src/components/pricing-table"

export function HorizontalPricingTable() {
  const tiers = [
    // Define your pricing tiers here
  ]

  return <PricingTable tiers={tiers} layout="horizontal" />
}
```

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

### PricingTable with Billing Toggle

Source: https://zenui.dev/docs/components/pricing-table

Shows how to enable the billing period toggle for the PricingTable component by setting the 'showToggle' prop to true.

```jsx
import { PricingTable } from "./src/components/pricing-table";

// Basic usage
<PricingTable tiers={tiers} />

// With billing toggle
<PricingTable tiers={tiers} showToggle={true} />
```

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

### Using the Table Component in a React Component

Source: https://zenui.dev/docs/components/table

A simple React component demonstrating how to import and render the Table component.

```jsx
import {Table} from './src/components/table';

function MyComponent() {
  return (
    <div>
      <Table />
    </div>
  );
}

export default MyComponent;

```

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

### Select with Label

Source: https://zenui.dev/docs/components/select

Displays a label above the dropdown menu.

```jsx
<Select
  label="Select Item"
  name="item"
  value={val}
  onChange={setVal}
  options={[
    { label: 'Item 1', value: 'item1' },
    { label: 'Item 2', value: 'item2' },
  ]}
/>
```

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

### Spinner Variants

Source: https://zenui.dev/docs/components/spinner

Demonstrates how to use different visual styles for the Spinner component.

```APIDOC
## Spinner Variant

Different spinner variant

### Request Example
```jsx
<Spinner variant="dashed"></Spinner>
<Spinner variant="dotted"></Spinner>
```
```

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

### Button with Icon

Source: https://zenui.dev/docs/components/button

Demonstrates how to include icons within the Button component for enhanced visual cues.

```APIDOC
## Button with Icon

### Description
Buttons can incorporate icons by including them as children of the Button component.

### Request Example
```jsx
import { ArrowRight } from 'lucide-react'

<Button>
  Next <ArrowRight className="ml-2 w-4 h-4" />
</Button>
```
```

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

### Basic Select Usage

Source: https://zenui.dev/docs/components/select

A simple implementation of the Select component without external state management.

```jsx
<Select
        value={val}
        onChange={setVal}
        options={[
          { label: 'Option X', value: 'x' },
          { label: 'Option Y', value: 'y' },
        ]}
        placeholder="Pick one"
        name="select-basic"
      />
      <div id="select-basic-value">Selected: None</div>
```

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

### Render Profile Skeleton Component

Source: https://zenui.dev/docs/components/skeleton

Use this skeleton to represent a user profile placeholder. It includes elements for an avatar, name, bio, and social links. The Skeleton component must be imported.

```jsx
import  { Skeleton } from "./src/components/skeleton"

export function ProfileSkeleton() {
  return (
    <div className="flex flex-col space-y-5">
      <div className="flex items-center space-x-4">
        <Skeleton className="rounded-full w-16 h-16" />
        <div className="space-y-2">
          <Skeleton className="w-[200px] h-5" />
          <Skeleton className="w-[150px] h-4" />
        </div>
      </div>
      <div className="space-y-2">
        <Skeleton className="w-full h-4" />
        <Skeleton className="w-full h-4" />
        <Skeleton className="w-3/4 h-4" />
      </div>
      <div className="flex space-x-3">
        <Skeleton className="rounded-md w-10 h-10" />
        <Skeleton className="rounded-md w-10 h-10" />
        <Skeleton className="rounded-md w-10 h-10" />
      </div>
    </div>
  )
}
```

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

### Select Component API Reference

Source: https://zenui.dev/docs/components/select

API reference for the Select component, detailing its available props and their usage.

```APIDOC
## Select Component

Custom select dropdown with options, labels, and state.

### Props
Prop| Type| Description| Default  
---|---|---|---
label| string| Label text for the select field.| -
options| array| Array of options with `label` and `value`.| []
value| string| The currently selected value.| -
onChange| function| Callback for value change.| requires a function
placeholder| string| Placeholder text.| Select an option
className| string| Additional CSS classes.| -
name| string| Name attribute for the select field.| -
disabled| boolean| Disables the select field.| -

### Example Usage
```jsx
<Select
  label="Label"
  name="select-name"
  value={val}
  onChange={setVal}
  options={[
    { label: 'One', value: '1' },
    { label: 'Two', value: '2' },
  ]}
  placeholder="Choose option"
  className="custom-class"
  disabled={false}
/>
```
```

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

### Implement Timeline Loading Skeleton

Source: https://zenui.dev/docs/components/skeleton

A skeleton placeholder for a timeline interface using the Skeleton component.

```jsx
import { Skeleton }  from "./src/components/skeleton"

export function TimelineLoadingSkeleton() {
  return (
    <div className="w-full max-w-md">
      <div className="space-y-8">
        {[...Array(3)].map((_, index) => (
          <div key={index} className="relative pb-8 pl-8">
            {/* Timeline connector */}
            {index < 2 && (
              <div className="top-3 left-3.5 absolute bg-gray-700 w-px h-full" />
            )}
            
            {/* Timeline dot */}
            <div className="top-1 left-0 absolute">
              <Skeleton className="rounded-full w-7 h-7" />
            </div>
            
            {/* Timeline content */}
            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <Skeleton className="w-24 h-4" />
                <Skeleton className="w-16 h-3" />
              </div>
              <Skeleton className="w-full h-4" />
              <Skeleton className="w-full h-4" />
              <Skeleton className="w-3/4 h-4" />
              
              {/* Optional image or attachment */}
              {index === 1 && (
                <Skeleton className="mt-2 rounded-md w-full h-32" />
              )}
              
              {/* Action buttons */}
              <div className="flex gap-2 pt-2">
                <Skeleton className="rounded-md w-16 h-8" />
                <Skeleton className="rounded-md w-16 h-8" />
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
```

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

### Spinner Sizes

Source: https://zenui.dev/docs/components/spinner

Illustrates the Spinner component in different sizes. Available options are 'sm', 'md', and 'lg' for flexible integration.

```jsx
<Spinner size="sm"></Spinner>
<Spinner size="md"></Spinner>
<Spinner size="lg"></Spinner>
```

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

### Use the Pagination component

Source: https://zenui.dev/docs/components/pagination

Basic implementation of the Pagination component within a React application.

```jsx
import {Pagination} from './src/components/pagination';

function MyComponent() {
  return (
    <div>
      <Pagination />
    </div>
  );
}

export default MyComponent;
```

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

### Implement Custom Pricing Table

Source: https://zenui.dev/docs/components/pricing-table

Defines specific pricing tiers with custom features, pricing structures, and highlights using the tiers array.

```jsx
import { PricingTable } from "./src/components/pricing-table"

export function CustomPricingTable() {
  const tiers = [
    {
      name: "Basic",
      description: "For small projects",
      price: {
        monthly: 19,
        yearly: 190,
      },
      features: [
        { name: "3 team members" },
        { name: "10GB storage" },
        { name: "Basic analytics", info: "Page views and visitor counts" },
      ],
      buttonText: "Get Started",
    },
    {
      name: "Growth",
      description: "For growing businesses",
      price: {
        monthly: 49,
        yearly: 490,
      },
      features: [
        { name: "10 team members" },
        { name: "100GB storage" },
        { name: "Advanced analytics", info: "Includes conversion tracking and funnels" },
      ],
      buttonText: "Start Free Trial",
      highlighted: true,
      badge: "Best Value",
    },
    {
      name: "Enterprise",
      description: "Custom solutions for large teams",
      price: {
        custom: true,
        label: "Custom",
      },
      features: [
        { name: "Unlimited team members" },
        { name: "Custom storage limits" },
        { name: "Custom analytics solutions", info: "Tailored to your specific needs" },
      ],
      buttonText: "Contact Sales",
    },
  ]

  return <PricingTable tiers={tiers} />
}
```

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

### Table Variants and Sizes

Source: https://zenui.dev/docs/components/table

Shows how to apply different variants ('zebra', 'bordered') and sizes ('lg') to the Table component.

```jsx
// Zebra-striped variant
<Table variant="zebra">
  {/* table content */}
</Table>

// Bordered variant with large size
<Table variant="bordered" size="lg">
  {/* table content */}
</Table>

```

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

### Timeline Loading Skeleton

Source: https://zenui.dev/docs/components/skeleton

A skeleton placeholder component designed for a timeline interface.

```APIDOC
## Timeline Loading Skeleton

A skeleton placeholder for a timeline interface.

### Component Definition

```javascript
import { Skeleton } from "./src/components/skeleton"

export function TimelineLoadingSkeleton() {
  return (
    <div className="w-full max-w-md">
      <div className="space-y-8">
        {[...Array(3)].map((_, index) => (
          <div key={index} className="relative pb-8 pl-8">
            {/* Timeline connector */}
            {index < 2 && (
              <div className="top-3 left-3.5 absolute bg-gray-700 w-px h-full" />
            )}
            
            {/* Timeline dot */}
            <div className="top-1 left-0 absolute">
              <Skeleton className="rounded-full w-7 h-7" />
            </div>
            
            {/* Timeline content */}
            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <Skeleton className="w-24 h-4" />
                <Skeleton className="w-16 h-3" />
              </div>
              <Skeleton className="w-full h-4" />
              <Skeleton className="w-full h-4" />
              <Skeleton className="w-3/4 h-4" />
              
              {/* Optional image or attachment */}
              {index === 1 && (
                <Skeleton className="mt-2 rounded-md w-full h-32" />
              )}
              
              {/* Action buttons */}
              <div className="flex gap-2 pt-2">
                <Skeleton className="rounded-md w-16 h-8" />
                <Skeleton className="rounded-md w-16 h-8" />
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
```
```
Tokens:
Raw