JollyUI

https://www.jollyui.dev/docs
Admin
JollyUI provides re-usable components built with React Aria Components and Tailwind CSS, designed to...
Tokens:62,847
Snippets:297
Trust Score:7
Update:1 year ago
Show doc for...
Tokens:
Raw
### Initialize Project with shadcn/ui CLI

Source: https://www.jollyui.dev/docs/installation

Command to initialize a new Next.js project or set up an existing one using the shadcn/ui CLI. This command guides the user through project configuration.

```bash
npx shadcn@latest init
```

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

### Install Lucide React for Default Style

Source: https://www.jollyui.dev/docs/installation

Installs the `lucide-react` library, which is required if you are using the `default` style for JollyUI components.

```bash
npm install lucide-react
```

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

### Install Core Dependencies for JollyUI

Source: https://www.jollyui.dev/docs/installation

Installs essential dependencies required for JollyUI components, including `tailwindcss-animate`, `class-variance-authority`, `clsx`, and `tailwind-merge`.

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

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

### Install Radix UI Icons for New York Style

Source: https://www.jollyui.dev/docs/installation

Installs the `@radix-ui/react-icons` library, necessary when using the `new-york` style for JollyUI components.

```bash
npm install @radix-ui/react-icons
```

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

### Install JollyUI Tooltip via CLI

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

This command installs the JollyUI Tooltip component using the shadcn CLI. Ensure you have Node.js and npm/yarn/pnpm/bun installed.

```bash
npx shadcn@latest add https://jollyui.dev/default/tooltip
```

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

### Basic NumberField Example

Source: https://www.jollyui.dev/docs/components/numberfield

A fundamental example of the NumberField component, demonstrating its basic input and stepper functionality. This serves as a starting point for using the component.

```javascript
// Preview
// Code
// Style: Default
// defaultnew-york
// Width
```

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

### Configure TypeScript Path Aliases

Source: https://www.jollyui.dev/docs/installation

Example `tsconfig.json` configuration to set up the `@/*` path alias, commonly used for importing components and utilities from the project root.

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

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

### Basic JollyUI Slider Example

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

A fundamental example of the JollyUI Slider component, demonstrating its default appearance and functionality. This serves as a starting point for customization.

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

function BasicSlider() {
  return (
    <Slider defaultValue={[33]} max={100} step={1} />
  );
}

export default BasicSlider;
```

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

### Install Link Component via CLI

Source: https://www.jollyui.dev/docs/components/link

This command installs the JollyUI Link component using the shadcn CLI. Ensure you have Node.js and npm/npx installed.

```bash
npx shadcn@latest add https://jollyui.dev/default/link
```

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

### Add Jolly-UI Button using Component URL (CLI)

Source: https://www.jollyui.dev/docs/installation/cli

This command demonstrates how to add a Jolly-UI button component to your project using its direct URL via the shadcn CLI. It specifies the default style for the component.

```bash
npx shadcn@latest add https://jollyui.dev/default/button
```

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

### Basic Dialog Example

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

Demonstrates the basic usage of the JollyUI Dialog component. This example shows a simple dialog with a 'Sign up...' trigger.

```javascript
// Assuming JollyUI is imported and configured
// Example structure for a basic dialog
<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Sign up...</Button>
  </DialogTrigger>
  <DialogContent className="sm:max-w-[425px]">
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>
        Make changes to your profile here. Click save and close.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button type="submit">Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>
```

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

### Basic TagGroup Example

Source: https://www.jollyui.dev/docs/components/tag-group

A basic implementation of the TagGroup component displaying categories. This serves as a starting point for using the component.

```jsx
<div>
  <p>Categories</p>
  <div className="default new-york">
    <span>News</span>
    <span>Travel</span>
    <span>Gaming</span>
    <span>Shopping</span>
  </div>
</div>
```

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

### Import and Use JollyUI Button Component

Source: https://www.jollyui.dev/docs/installation

Example of how to import and use the JollyUI Button component in a React component after it has been added to the project.

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

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
```

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

### Basic Select Example

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

A fundamental example of the Select component, demonstrating its basic functionality for selecting an animal from a predefined list.

```javascript
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@/components/ui/select";

export function SelectBasic() {
  return (
    <Select>
      <SelectTrigger className="w-[280px]">
        <SelectValue placeholder="Select an animal" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="aardvark">Aardvark</SelectItem>
        <SelectItem value="cat">Cat</SelectItem>
        <SelectItem value="dog">Dog</SelectItem>
        <SelectItem value="kangaroo">Kangaroo</SelectItem>
        <SelectItem value="panda">Panda</SelectItem>
        <SelectItem value="snake">Snake</SelectItem>
      </SelectContent>
    </Select>
  );
}
```

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

### Basic GridList Example

Source: https://www.jollyui.dev/docs/components/grid-list

A fundamental example of a GridList displaying a list of items. This demonstrates the basic structure and rendering of the component.

```html
<div>
  <div>
    <div>Charizard</div>
  </div>
  <div>
    <div>Blastoise</div>
  </div>
  <div>
    <div>Venusaur</div>
  </div>
  <div>
    <div>Pikachu</div>
  </div>
</div>
```

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

### Install Toolbar via CLI

Source: https://www.jollyui.dev/docs/components/toolbar

This snippet shows how to install the JollyUI Toolbar component using the shadcn CLI. It requires npx to be installed.

```bash
npx shadcn@latest add https://jollyui.dev/default/toolbar
```

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

### TextField Basic Example

Source: https://www.jollyui.dev/docs/components/textfield

A simple example of a TextField component, demonstrating its basic usage for capturing a first name.

```jsx
import { TextField } from "jollyui";

function Example() {
  return (
    <TextField label="First name" />
  );
}
```

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

### Install Select Component CLI

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

Installs the JollyUI Select component using the provided CLI command. This is the primary method for adding the component to your project.

```bash
npx shadcn@latest add https://jollyui.dev/default/select
```

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

### Add Jolly-UI Button using REGISTRY_URL (CLI)

Source: https://www.jollyui.dev/docs/installation/cli

This command shows how to add a Jolly-UI button component by setting the REGISTRY_URL environment variable. This method allows for adding components by their name after configuring the registry.

```bash
REGISTRY_URL=https://jollyui.dev/r npx shadcn@latest add button
```

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

### Basic DateRangePicker Example

Source: https://www.jollyui.dev/docs/components/date-range-picker

A simple example showcasing the basic functionality of the DateRangePicker component.

```javascript
// Basic DateRangePicker implementation
// Allows users to select a date range.

// Example usage:
// <DateRangePicker />
```

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

### Install TextField with CLI

Source: https://www.jollyui.dev/docs/components/textfield

This snippet shows the command to install the JollyUI TextField component using npx, which adds the necessary files to your project.

```bash
npx shadcn@latest add https://jollyui.dev/default/textfield
```

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

### Install Table Component CLI

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

Installs the JollyUI Table component using the shadcn CLI. This command fetches the default table configuration.

```bash
npx shadcn@latest add https://jollyui.dev/default/table
```

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

### Install JollyUI Dialog via CLI

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

This command installs the JollyUI Dialog component using npx. It fetches the default configuration for the dialog.

```bash
npx shadcn@latest add https://jollyui.dev/default/dialog
```

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

### Install ListBox via CLI

Source: https://www.jollyui.dev/docs/components/list-box

Installs the JollyUI ListBox component using the shadcn CLI. This command fetches the necessary files to integrate the ListBox into your project.

```bash
npx shadcn@latest add https://jollyui.dev/default/list-box
```

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

### Basic DatePicker Example

Source: https://www.jollyui.dev/docs/components/date-picker

A fundamental example of the DatePicker component, demonstrating its default appearance and functionality for selecting a date.

```javascript
// Preview
// Code
// Style: Default
defaultnew-york
Date
mm
/
dd
/
yyyy
```

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

### Install DatePicker using CLI

Source: https://www.jollyui.dev/docs/components/date-picker

Installs the JollyUI DatePicker component using the provided CLI command. This is the primary method for adding the component to your project.

```bash
npx shadcn@latest add https://jollyui.dev/default/date-picker
```

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

### JollyUI Basic Checkbox Example

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

A simple example demonstrating the default appearance and functionality of the JollyUI Checkbox component.

```html
<div class="flex items-center space-x-2">
  <input type="checkbox" id="checkbox-basic" />
  <label for="checkbox-basic" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
    Unsubscribe
  </label>
</div>
```

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

### Install Calendar with CLI

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

Installs the JollyUI Calendar component using the provided CLI command. This is the primary method for adding the component to your project.

```bash
npx shadcn@latest add https://jollyui.dev/default/calendar
```

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

### Install Toggle Button via CLI

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

This snippet shows the command to install the JollyUI Toggle Button component using npx.

```bash
npx shadcn@latest add https://jollyui.dev/default/toggle
```

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

### Install JollyUI Menu via CLI

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

This command installs the JollyUI Menu component using npx. It's a straightforward way to add the component to your project.

```bash
npx shadcn@latest add https://jollyui.dev/default/menu
```

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

### Install Tabs CLI

Source: https://www.jollyui.dev/docs/components/tabs

Installs the JollyUI Tabs component using the shadcn CLI. This command fetches the necessary files to integrate the Tabs component into your project.

```bash
npx shadcn@latest add https://jollyui.dev/default/tabs
```

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

### Install DateRangePicker with CLI

Source: https://www.jollyui.dev/docs/components/date-range-picker

This command installs the DateRangePicker component using the JollyUI CLI. It's a quick way to add the component to your project.

```bash
npx shadcn@latest add https://jollyui.dev/default/date-picker
```

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

### Install SearchField via CLI

Source: https://www.jollyui.dev/docs/components/searchfield

This command installs the JollyUI SearchField component using npx. It fetches the default configuration for the search field.

```bash
npx shadcn@latest add https://jollyui.dev/default/searchfield
```

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

### Install RadioGroup with CLI

Source: https://www.jollyui.dev/docs/components/radio-group

Instructions for installing the JollyUI RadioGroup component using the command-line interface (CLI). This command fetches the default radio group configuration.

```bash
npx shadcn@latest add https://jollyui.dev/default/radio-group
```

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

### Install JollyUI Modal via CLI

Source: https://www.jollyui.dev/docs/components/modal

This command installs the JollyUI Modal component using the shadcn CLI. It fetches the default configuration for the dialog component.

```bash
npx shadcn@latest add https://jollyui.dev/default/dialog
```

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

### Install DateField using CLI

Source: https://www.jollyui.dev/docs/components/datefield

This command installs the DateField component using the JollyUI CLI. It fetches the necessary files to integrate the component into your project.

```bash
npx shadcn@latest add https://jollyui.dev/default/datefield
```

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

### Select with Links Example

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

An example showcasing the Select component used for navigation, allowing users to select project-related actions like 'Create new' or specific project phases.

```javascript
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@/components/ui/select";

export function SelectLinks() {
  return (
    <Select>
      <SelectTrigger className="w-[280px]">
        <SelectValue placeholder="Select an item" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="new">Create new…</SelectItem>
        <SelectItem value="proposal">Proposal</SelectItem>
        <SelectItem value="budget">Budget</SelectItem>
        <SelectItem value="onboarding">Onboarding</SelectItem>
      </SelectContent>
    </Select>
  );
}
```

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

### Basic Calendar Example

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

A fundamental example of the Calendar component, displaying a single month and allowing date selection. This serves as a starting point for integrating the calendar into applications.

```jsx
## September 2025
S| M| T| W| T| F| S  
---|---|---|---|---|---|---
31| 1| 2| 3| 4| 5| 6  
7| 8| 9| 10| 11| 12| 13  
14| 15| 16| 17| 18| 19| 20  
21| 22| 23| 24| 25| 26| 27  
28| 29| 30| 1| 2| 3| 4  
```

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

### JollyUI Toolbar Basic Example

Source: https://www.jollyui.dev/docs/components/toolbar

A basic example demonstrating the usage of the JollyUI Toolbar component. This code likely involves importing and rendering the Toolbar component with some interactive elements.

```javascript
// Example code for basic toolbar usage would go here.
// This might involve importing the Toolbar component and adding buttons or other controls.
```

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

### Basic RadioGroup Example

Source: https://www.jollyui.dev/docs/components/radio-group

A fundamental example demonstrating the usage of the RadioGroup component. It displays a selection of pet options (Dog, Cat, Dragon) for the user to choose from.

```jsx
<div>
  <div className="space-y-2">
    <h2 className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
      Favorite pet
    </h2>
    <div className="flex items-center space-x-2">
      <RadioGroupItem id="r1" />
      <Label htmlFor="r1">Dog</Label>
    </div>
    <div className="flex items-center space-x-2">
      <RadioGroupItem id="r2" />
      <Label htmlFor="r2">Cat</Label>
    </div>
    <div className="flex items-center space-x-2">
      <RadioGroupItem id="r3" disabled />
      <Label htmlFor="r3">Dragon</Label>
    </div>
  </div>
</div>
```

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

### Basic Progress Bar Example

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

Demonstrates a simple implementation of the progress bar component, showing a loading state with a percentage.

```javascript
// Assuming JollyProgressBar is imported and available
<JollyProgressBar label="Loading..." value={80} />
```

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

### Basic Tabs Example

Source: https://www.jollyui.dev/docs/components/tabs

Demonstrates the basic implementation of the Tabs component. It includes sample content for different tab panels.

```jsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

function TabsDemo() {
  return (
    <Tabs defaultValue="default" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="default">Default</TabsTrigger>
        <TabsTrigger value="new-york">New York</TabsTrigger>
      </TabsList>
      <TabsContent value="default">Founding of Rome
Monarchy and Republic
Empire</TabsContent>
      <TabsContent value="new-york">Arma virumque cano, Troiae qui primus ab oris.</TabsContent>
    </Tabs>
  )
}

export default TabsDemo
```

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

### DateField with Description and Validation

Source: https://www.jollyui.dev/docs/components/datefield

This example demonstrates using the DateField with a descriptive text and validation message, guiding the user on input requirements.

```jsx
import { DateField } from "jollyui";

<DateField 
  label="Appointment date"
  description="Please select a weekday between 9 AM and 5 PM."
  errorMessage="Invalid date selected."
/>;
```

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

### Basic Dropzone Example - JollyUI

Source: https://www.jollyui.dev/docs/components/dropzone

This example demonstrates a basic implementation of the Dropzone component. It provides a simple area where users can drag and drop files.

```jsx
<div>
  <p>Drop files here</p>
</div>
```

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

### Basic Popover Example - JollyUI

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

A fundamental example showcasing the basic implementation of the JollyUI Popover component. This demonstrates the core functionality and default styling.

```html
<div class="default new-york">
  <div class="settings">
    
  </div>
</div>
```

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

### Install GridList via CLI

Source: https://www.jollyui.dev/docs/components/grid-list

Installs the JollyUI GridList component using the shadcn CLI. This command fetches the necessary files to integrate the GridList into your project.

```bash
npx shadcn@latest add https://jollyui.dev/default/grid-list
```

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

### Install JollyUI Checkbox via CLI

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

This command installs the JollyUI Checkbox component using the shadcn CLI. Ensure you have Node.js and npm/npx installed.

```bash
npx shadcn@latest add https://jollyui.dev/default/checkbox
```

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

### Install Dropzone via CLI - JollyUI

Source: https://www.jollyui.dev/docs/components/dropzone

This snippet shows the command to install the Dropzone component using the JollyUI CLI. It's a straightforward command to add the component to your project.

```bash
npx shadcn@latest add https://jollyui.dev/default/dropzone
```

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

### Install DisclosureGroup using CLI

Source: https://www.jollyui.dev/docs/components/disclosure-group

This command installs the JollyUI DisclosureGroup component using the shadcn CLI. Ensure you have Node.js and npm/npx installed.

```bash
npx shadcn@latest add https://jollyui.dev/default/disclosure
```

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

### Popover Dialog Example

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

Demonstrates the implementation of a popover dialog using the JollyUI Dialog component. Popovers typically display contextual information or actions.

```javascript
// Assuming JollyUI is imported and configured
// Example structure for a popover dialog
<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <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>
    <DialogFooter>
      <PopoverClose asChild>
        <Button type="button" variant="secondary">Cancel</Button>
      </PopoverClose>
      <Button type="submit">Continue</Button>
    </DialogFooter>
  </PopoverContent>
</Popover>
```

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

### JollyUI Modal Sheet Example

Source: https://www.jollyui.dev/docs/components/modal

An example of using the JollyUI Modal component as a 'Sheet', which typically slides in from the side or bottom, often used for forms or settings. This example uses the 'new-york' style.

```javascript
// Assuming JollyUI and necessary React components are imported
// Example structure for a sheet trigger
<Button onClick={() => openSheet('editProfile')}>Edit Profile</Button>

// Sheet component usage (often a variant of Modal)
<Sheet isOpen={isSheetOpen} onClose={closeSheet}>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit Profile</SheetTitle>
      <SheetDescription>Update your profile information.</SheetDescription>
    </SheetHeader>
    <SheetBody>
      {/* Form elements for profile editing */}
      <TextField label="Name" />
      <TextField label="Email" />
    </SheetBody>
    <SheetFooter>
      <Button onClick={closeSheet}>Save</Button>
      <Button onClick={closeSheet}>Cancel</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>
```

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

### JollyUI Disabled Checkbox Example

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

An example of a disabled JollyUI Checkbox, which cannot be interacted with by the user.

```html
<div class="flex items-center space-x-2">
  <input type="checkbox" id="checkbox-disabled" disabled />
  <label for="checkbox-disabled" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
    Subscribe
  </label>
</div>
```

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

### Install Progress Component via CLI

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

This snippet shows the command to add the JollyUI progress component to your project using npx.

```bash
npx shadcn@latest add https://jollyui.dev/default/progress
```

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

### Small Toggle Button Example

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

Provides an example of the Toggle Button in a smaller size variant.

```jsx
// Code for Small Toggle Button would go here
```

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

### Install JollyUI Color Primitives CLI

Source: https://www.jollyui.dev/docs/components/color-primitives

This snippet shows the command to install JollyUI color primitives using npx. It's a common way to add UI components to a project.

```bash
npx shadcn@latest add https://jollyui.dev/default/color
```

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

### Read-only JollyUI CheckboxGroup Example

Source: https://www.jollyui.dev/docs/components/checkbox-group

This example shows a read-only JollyUI CheckboxGroup, where the checkboxes are displayed but cannot be interacted with.

```html
<div class="flex flex-col gap-2">
  <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Favorite sports</label>
  <div class="flex items-center gap-2">
    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
      <input type="checkbox" readonly class="h-4 w-4 border-primary text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-70">
      Soccer
    </label>
    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
      <input type="checkbox" readonly class="h-4 w-4 border-primary text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-70">
      Baseball
    </label>
    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
      <input type="checkbox" readonly class="h-4 w-4 border-primary text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-70">
      Basketball
    </label>
  </div>
</div>
```

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

### Install JollyUI Switch via CLI

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

Instructions for installing the JollyUI Switch component using the command-line interface (CLI). This typically involves a command to add the component to your project.

```bash
npx shadcn@latest add https://jollyui.dev/default/switch
```

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

### Add JollyUI Button Component using CLI

Source: https://www.jollyui.dev/docs/installation

Command to add the JollyUI Button component to your project using the shadcn/ui CLI. This simplifies the process of integrating components.

```bash
npx shadcn@latest add https://jollyui.dev/default/button
```

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

### RadioGroup Orientation Example

Source: https://www.jollyui.dev/docs/components/radio-group

An example showcasing the RadioGroup component with a different orientation. The options are displayed horizontally instead of vertically.

```jsx
<div>
  <div className="space-y-2">
    <h2 className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
      Favorite avatar
    </h2>
    <RadioGroup defaultValue="}=(" className="flex items-center space-x-2">
      <div>
        <RadioGroupItem id="r1" value="}=(" />
        <Label htmlFor="r1">Wizard</Label>
      </div>
      <div>
        <RadioGroupItem id="r2" value="=(" />
        <Label htmlFor="r2">Dragon</Label>
      </div>
    </RadioGroup>
  </div>
</div>
```

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

### Links GridList Example

Source: https://www.jollyui.dev/docs/components/grid-list

Demonstrates how to use GridList to display a list of links, allowing for navigation to different resources.

```html
<div>
  <div>
    <div>Adobe</div>
  </div>
  <div>
    <div>Apple</div>
  </div>
  <div>
    <div>Google</div>
  </div>
  <div>
    <div>Microsoft</div>
  </div>
</div>
```

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

### Vertical JollyUI Slider Example

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

This example showcases the vertical orientation for the JollyUI Slider, providing an alternative layout for selection.

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

function VerticalSlider() {
  return (
    <div className="h-96">
      <Slider orientation="vertical" defaultValue={[50]} />
    </div>
  );
}

export default VerticalSlider;
```

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

### Basic DateField Example

Source: https://www.jollyui.dev/docs/components/datefield

A simple example of the DateField component, showcasing its default appearance and functionality for entering a birth date.

```jsx
import { DateField } from "jollyui";

<DateField label="Birth date" />;
```

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

### Install CheckboxGroup using CLI

Source: https://www.jollyui.dev/docs/components/checkbox-group

This command installs the JollyUI CheckboxGroup component using npx. It fetches the default new-york variant.

```bash
npx shadcn@latest add https://jollyui.dev/default/checkbox
```

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

### JollyUI ComboBox Description Example

Source: https://www.jollyui.dev/docs/components/combobox

This example shows how to add a description to the JollyUI ComboBox to provide additional context or instructions to the user. It includes a label and descriptive text.

```javascript
import {
  Combobox,
  ComboboxInput,
  ComboboxList,
  ComboboxOption,
  ComboboxPopover,
} from "@jolly-ui/combobox";

function DescribedCombobox() {
  let options = [
    { id: "dog", name: "Dog" },
    { id: "cat", name: "Cat" },
    { id: "rabbit", name: "Rabbit" },
  ];

  return (
    <Combobox label="Favorite Animal" description="Please select an animal.">
      <ComboboxInput />
      <ComboboxPopover>
        <ComboboxList items={options}>
          {item => (
            <ComboboxOption key={item.id}>{item.name}</ComboboxOption>
          )}
        </ComboboxList>
      </ComboboxPopover>
    </Combobox>
  );
}
```

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

### TextField Multi-line Example

Source: https://www.jollyui.dev/docs/components/textfield

An example of a multi-line TextField, suitable for longer text inputs like comments, using the `textArea` prop.

```jsx
import { TextField } from "jollyui";

function Example() {
  return (
    <TextField label="Comment" textArea />
  );
}
```

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

### Install JollyUI ComboBox using CLI

Source: https://www.jollyui.dev/docs/components/combobox

This command installs the JollyUI ComboBox component using npx shadcn. It's a quick way to add the component to your project.

```bash
npx shadcn@latest add https://jollyui.dev/default/combobox
```

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

### JollyUI Menu Sections Dynamic Example

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

An example of a JollyUI Menu with dynamically generated sections, allowing for flexible content organization.

```tsx
import { Menu, MenuTrigger, MenuItem, Section, Header } from "@jollyui/menu";

const sections = [
  { id: "s1", name: "Section 1", items: [{ id: "i1", name: "Item 1.1" }, { id: "i2", name: "Item 1.2" }] },
  { id: "s2", name: "Section 2", items: [{ id: "i3", name: "Item 2.1" }, { id: "i4", name: "Item 2.2" }] },
];

export function DynamicSectionsMenu() {
  return (
    <Menu>
      <MenuTrigger>Window</MenuTrigger>
      {sections.map((section) => (
        <Section key={section.id}>
          <Header>{section.name}</Header>
          {section.items.map((item) => (
            <MenuItem key={item.id}>{item.name}</MenuItem>
          ))}
        </Section>
      ))}
    </Menu>
  );
}
```

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

### Disabled JollyUI CheckboxGroup Example

Source: https://www.jollyui.dev/docs/components/checkbox-group

This example shows how to disable the entire JollyUI CheckboxGroup using the `isDisabled` prop, preventing any selections.

```html
<div class="flex flex-col gap-2">
  <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">Favorite sports</label>
  <div class="flex items-center gap-2">
    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
      <input type="checkbox" disabled class="h-4 w-4 border-primary text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-70">
      Soccer
    </label>
    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
      <input type="checkbox" disabled class="h-4 w-4 border-primary text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-70">
      Baseball
    </label>
    <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
      <input type="checkbox" disabled class="h-4 w-4 border-primary text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-70">
      Basketball
    </label>
  </div>
</div>
```

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

### JollyUI Validation Checkbox Example

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

Shows an example of a JollyUI Checkbox that includes validation, likely indicating a required or conditional selection.

```html
<div class="flex items-center space-x-2">
  <input type="checkbox" id="checkbox-validation" />
  <label for="checkbox-validation" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
    Subscribe
  </label>
</div>
```

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

### Button Component Examples

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

Demonstrates various visual styles and states of the JollyUI Button component, including primary, secondary, destructive, outline, ghost, link, icon, and loading states. These examples showcase the component's flexibility in design and functionality.

```javascript
// Primary Button Example (Conceptual)
// Assumes a Button component with appropriate props for primary styling
<Button variant="primary">Click Me</Button>
```

```javascript
// Secondary Button Example (Conceptual)
// Assumes a Button component with appropriate props for secondary styling
<Button variant="secondary">Click Me</Button>
```

```javascript
// Destructive Button Example (Conceptual)
// Assumes a Button component with appropriate props for destructive styling
<Button variant="destructive">Delete</Button>
```

```javascript
// Outline Button Example (Conceptual)
// Assumes a Button component with appropriate props for outline styling
<Button variant="outline">Learn More</Button>
```

```javascript
// Ghost Button Example (Conceptual)
// Assumes a Button component with appropriate props for ghost styling
<Button variant="ghost">Cancel</Button>
```

```javascript
// Link Button Example (Conceptual)
// Assumes a Link component styled to look like a button
<Link href="/some-page" variant="link-as-button">Go to Page</Link>
```

```javascript
// Button with Icon Example (Conceptual)
// Assumes a Button component that accepts an icon prop
<Button><Icon /> With Icon</Button>
```

```javascript
// Button with Text and Icon Example (Conceptual)
// Assumes a Button component that accepts text and an icon
<Button>Login with Email <EmailIcon /></Button>
```

```javascript
// Loading Button Example (Conceptual)
// Assumes a Button component with a loading state prop
<Button isLoading={true}>Please wait</Button>
```

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

### Dynamic Tabs Example

Source: https://www.jollyui.dev/docs/components/tabs

Illustrates how to create and manage tabs dynamically. Users can add or remove tabs, and the content updates accordingly.

```jsx
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

function DynamicTabsDemo() {
  return (
    <Tabs defaultValue="tab1" className="w-[400px]">
      <TabsList>
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
        <TabsTrigger value="tab3">Tab 3</TabsTrigger>
        <Button variant="outline" size="sm">+ Add tab</Button>
        <Button variant="outline" size="sm">Remove tab</Button>
      </TabsList>
      <TabsContent value="tab1">Tab body 1</TabsContent>
      <TabsContent value="tab2">Tab body 2</TabsContent>
      <TabsContent value="tab3">Tab body 3</TabsContent>
    </Tabs>
  )
}

export default DynamicTabsDemo
```
Tokens:
Raw