Glin UI

https://glinui.com/docs
Admin
Glin UI provides a comprehensive set of UI components and design tokens, offering guidance on setup,...
Tokens:183,042
Snippets:2,179
Trust Score:4.9
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install Switch via Registry

Source: https://glinui.com/docs/components/base/switch

Install the switch component using the GLINR CLI from the registry.

```bash
pnpm dlx @glinui/cli@latest add switch
```

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

### Install Kbd Component (Registry)

Source: https://glinui.com/docs/components/base/kbd

Install the Kbd component using the GLINR CLI from the registry.

```bash
pnpm dlx @glinui/cli@latest add kbd
```

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

### Kbd Component Usage Example

Source: https://glinui.com/docs/components/base/kbd

Example demonstrating how to use the Kbd component to display keyboard shortcuts.

```APIDOC
## Usage Example

```javascript
import { Kbd } from "@glinui/ui"

export function Demo() {
  return (
    <div className="flex items-center gap-2 text-sm">
      <span>Open command palette:</span>
      <Kbd>cmd</Kbd>
      <Kbd>K</Kbd>
    </div>
  )
}
```
```

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

### Install Popover via Registry

Source: https://glinui.com/docs/components/base/popover

Install the Popover component using the GLINR CLI from the registry.

```bash
pnpm dlx @glinui/cli@latest add popover
```

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

### File Tree Example

Source: https://glinui.com/docs/components/radix/tree

Example of how to use the Tree component to display a project file structure.

```APIDOC
## File Tree Example

```jsx
import { Tree } from "@glinui/ui"

export function Demo() {
  return (
    <Tree
      variant="outline"
      nodes={[
        {
          label: "src",
          children: [
            {
              label: "components",
              children: [
                { label: "button.tsx", href: "#" },
                { label: "input.tsx", href: "#" }
              ]
            },
            { label: "index.ts", href: "#" }
          ]
        },
        { label: "package.json", href: "#" }
      ]}
    />
  )
}
```
```

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

### Install Table Component via Registry

Source: https://glinui.com/docs/components/base/table

Install the Table component using the GLIN UI CLI from the registry.

```bash
pnpm dlx @glinui/cli@latest add table
```

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

### Install Card via Registry

Source: https://glinui.com/docs/components/base/card

Install the Card component using the GlinUI CLI via the registry for copy-paste control.

```bash
pnpm dlx @glinui/cli@latest add card
```

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

### Install Counter with dlx

Source: https://glinui.com/docs/components/base/counter

Install the Counter component using the Glin UI CLI with pnpm dlx.

```bash
pnpm dlx @glinui/cli@latest add counter
```

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

### Install Tooltip via CLI

Source: https://glinui.com/docs/components/base/tooltip

Install the tooltip component using the GLINR CLI for copy-paste control.

```bash
pnpm dlx @glinui/cli@latest add tooltip
```

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

### Popover Usage Example

Source: https://glinui.com/docs/components/radix/popover

Example of how to use the Popover component.

```APIDOC
## Usage

Open popover
Collapse

```javascript
import { Popover, PopoverTrigger, PopoverContent } from "@glinui/ui"

export function Demo() {
  return (
    <Popover>
      <PopoverTrigger>Open popover</PopoverTrigger>
      <PopoverContent>
        <div className="space-y-2">
          <h4 className="font-medium text-sm">Dimensions</h4>
          <p className="text-sm text-neutral-500">Set the dimensions for the layer.</p>
        </div>
      </PopoverContent>
    </Popover>
  )
}
```
```

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

### Install Select Component with DLX

Source: https://glinui.com/docs/components/base/select

Install the Select component using PNPM DLX for copy-paste control from the registry.

```bash
pnpm dlx @glinui/cli@latest add select
```

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

### Tooltip Usage Example

Source: https://glinui.com/docs/components/tooltip

Basic example of how to use the Tooltip component.

```APIDOC
## Usage Example
```tsx
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "@glinui/ui"

function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Hover me</TooltipTrigger>
        <TooltipContent>Add to library</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}
```
```

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

### Install Separator via Registry CLI

Source: https://glinui.com/docs/components/base/separator

Install the Separator component using the GLINUI CLI from the registry.

```bash
pnpm dlx @glinui/cli@latest add separator
```

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

### Install Tree Component via Registry

Source: https://glinui.com/docs/components/base/tree

Install the Tree component using the GLINUI CLI via the registry.

```bash
pnpm dlx @glinui/cli@latest add tree
```

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

### Install Separator Component

Source: https://glinui.com/docs/components/radix/separator

Install the Separator component using either a package manager or the registry CLI.

```bash
pnpm add @glinui/ui @glinui/tokens
```

```bash
pnpm dlx @glinui/cli@latest add separator
```

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

### Install Chip Component

Source: https://glinui.com/docs/components/chip

Install the Chip component using either the package manager or the registry CLI. The package manager installs shared ownership, while the registry CLI provides copy-paste control.

```bash
pnpm add @glinui/ui @glinui/tokens
```

```bash
pnpm dlx @glinui/cli@latest add chip
```

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

### Separator Usage Examples

Source: https://glinui.com/docs/components/radix/separator

Examples demonstrating how to use the Separator component with different configurations.

```APIDOC
## Usage Examples

### Default Separator
```javascript
import { Separator } from "@glinui/ui"

export function Demo() {
  return (
    <div className="space-y-4">
      <p className="text-sm">Section A</p>
      <Separator />
      <p className="text-sm">Section B</p>
    </div>
  )
}
```

### Gradient Separator
```javascript
import { Separator } from "@glinui/ui"

export function Demo() {
  return (
    <div className="space-y-4">
      <p className="text-sm">Section A</p>
      <Separator variant="gradient" />
      <p className="text-sm">Section B</p>
    </div>
  )
}
```

### Separator with Label
```javascript
import { Separator } from "@glinui/ui"

export function Demo() {
  return (
    <div className="space-y-4">
      <p className="text-sm">Login with email</p>
      <Separator label="OR" />
      <p className="text-sm">Continue with provider</p>
    </div>
  )
}
```

### Dashed Separator
```javascript
import { Separator } from "@glinui/ui"

export function Demo() {
  return (
    <div className="space-y-4">
      <p className="text-sm">Section A</p>
      <Separator variant="dashed" />
      <p className="text-sm">Section B</p>
    </div>
  )
}
```

### Dotted Separator
```javascript
import { Separator } from "@glinui/ui"

export function Demo() {
  return (
    <div className="space-y-4">
      <p className="text-sm">Section A</p>
      <Separator variant="dotted" />
      <p className="text-sm">Section B</p>
    </div>
  )
}
```
```

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

### Install Link Component via Registry

Source: https://glinui.com/docs/components/base/link

Install the Link component using the GLINR CLI from the registry for copy-paste control.

```bash
pnpm dlx @glinui/cli@latest add link
```

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

### Install Input Component via Registry

Source: https://glinui.com/docs/components/base/input

Use the GLINR CLI to add the input component from the registry.

```bash
pnpm dlx @glinui/cli@latest add input
```

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

### Install Animated Gradient Component

Source: https://glinui.com/docs/components/animated-gradient

Install the necessary packages for the Animated Gradient component using pnpm.

```bash
pnpm add @glinui/ui @glinui/tokens
```

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

### Install Button via Registry CLI

Source: https://glinui.com/docs/components/base/button

Add the button component using the GLINUI CLI from the registry.

```bash
pnpm dlx @glinui/cli@latest add button
```

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

### Link Component Usage Example

Source: https://glinui.com/docs/components/radix/link

Example demonstrating the usage of the Link component with different variants.

```APIDOC
## Usage Example

```javascript
import { Link } from "@glinui/ui"

export function Demo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Link href="#">Default</Link>
      <Link href="#" variant="glass">Glass</Link>
      <Link href="#" variant="outline">Outline</Link>
      <Link href="#" variant="ghost">Ghost</Link>
    </div>
  )
}
```
```

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

### File Tree Example

Source: https://glinui.com/docs/components/radix/tree

Displays a project file structure with folders and linked files. Requires importing the Tree component.

```tsx
import { Tree } from "@glinui/ui"

export function Demo() {
  return (
    <Tree
      variant="outline"
      nodes={[
        {
          label: "src",
          children: [
            {
              label: "components",
              children: [
                { label: "button.tsx", href: "#" },
                { label: "input.tsx", href: "#" }
              ]
            },
            { label: "index.ts", href: "#" }
          ]
        },
        { label: "package.json", href: "#" }
      ]}
    />
  )
}
```

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

### Install Slider via Registry

Source: https://glinui.com/docs/components/base/slider

Install the Slider component using the GLINUI CLI via pnpm dlx.

```bash
pnpm dlx @glinui/cli@latest add slider
```

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

### Skeleton Usage Example

Source: https://glinui.com/docs/components/radix/skeleton

Demonstrates the basic usage of the Skeleton component for creating loading placeholder surfaces.

```APIDOC
## Usage Example

### Loading Pattern

```jsx
import { Skeleton } from "@glinui/ui"

export function Demo() {
  return (
    <div className="space-y-3">
      <Skeleton className="h-32 w-full rounded-xl" />
      <Skeleton className="h-4 w-3/4" />
      <Skeleton className="h-4 w-1/2" />
    </div>
  )
}
```
```

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

### Install Skeleton via Registry CLI

Source: https://glinui.com/docs/components/base/skeleton

Use the GLINR CLI to add the Skeleton component directly from the registry.

```bash
pnpm dlx @glinui/cli@latest add skeleton
```

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

### Install Text Component with dlx

Source: https://glinui.com/docs/components/base/text

Install the Text component using the pnpm dlx command for registry control.

```bash
pnpm dlx @glinui/cli@latest add text
```

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

### Install Hover Card via CLI

Source: https://glinui.com/docs/components/base/hover-card

Use the GLINR CLI to add the hover-card component.

```bash
pnpm dlx @glinui/cli@latest add hover-card
```

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

### Install Animated Gradient Component

Source: https://glinui.com/docs/directory

Use this command to install the Animated Gradient component. It creates an animated color-shifting gradient background with several preset options.

```bash
pnpm dlx @glinui/cli@latest add animated-gradient
```

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

### Install Dropdown Menu via CLI

Source: https://glinui.com/docs/components/base/dropdown-menu

Use the GLINUI CLI to add the Dropdown Menu component to your project.

```bash
pnpm dlx @glinui/cli@latest add dropdown-menu
```

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

### Install Status Dot via Registry

Source: https://glinui.com/docs/components/base/status-dot

Install the Status Dot component using the GLINR CLI from the registry for copy-paste control.

```bash
pnpm dlx @glinui/cli@latest add status-dot
```

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

### Install Chip Component via DLX

Source: https://glinui.com/docs/components/base/chip

Install the Chip component using the GLINR CLI with PNPM DLX.

```bash
pnpm dlx @glinui/cli@latest add chip
```

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

### Install Textarea Component with Registry

Source: https://glinui.com/docs/components/base/textarea

Install the Textarea component using the registry with pnpm dlx. This method is for copy-paste control.

```bash
pnpm dlx @glinui/cli@latest add textarea
```

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

### Install Radio Group via Registry

Source: https://glinui.com/docs/components/base/radio-group

Install the Radio Group component using the GLINUI CLI via registry.

```bash
pnpm dlx @glinui/cli@latest add radio-group
```

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

### Install Tabs Component via Registry CLI

Source: https://glinui.com/docs/components/base/tabs

Install the Tabs component using the GLINUI CLI from the registry. This method offers copy-paste control.

```bash
pnpm dlx @glinui/cli@latest add tabs
```

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

### Install Code Component via Registry CLI

Source: https://glinui.com/docs/components/base/code

Use the GlinUI CLI to add the Code component to your project via the registry.

```bash
pnpm dlx @glinui/cli@latest add code
```

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

### Install Modal via CLI Registry

Source: https://glinui.com/docs/components/base/modal

Use the GLINUI CLI to add the modal component from the registry.

```bash
pnpm dlx @glinui/cli@latest add modal
```

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

### Install Checkbox via Registry

Source: https://glinui.com/docs/components/base/checkbox

Use the GLINUI CLI to add the checkbox component from the registry.

```bash
pnpm dlx @glinui/cli@latest add checkbox
```

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

### Install Heading Component via Registry

Source: https://glinui.com/docs/components/base/heading

Use the GLINR CLI to add the heading component from the registry.

```bash
pnpm dlx @glinui/cli@latest add heading
```

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

### Install Command Component via Registry

Source: https://glinui.com/docs/components/base/command

Add the Command component to your project using the GLINUI CLI via the registry.

```bash
pnpm dlx @glinui/cli@latest add command
```

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

### Install Sheet via Registry CLI

Source: https://glinui.com/docs/components/base/sheet

Add the Sheet component to your project using the @glinui/cli from the registry.

```bash
pnpm dlx @glinui/cli@latest add sheet
```

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

### Link Usage Example

Source: https://glinui.com/docs/components/base/link

Demonstrates how to use the Link component with different variants.

```APIDOC
## Link Usage Example

This example shows how to use the Link component with various predefined variants.

```javascript
import { Link } from "@glinui/ui"

export function Demo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Link href="#">Default</Link>
      <Link href="#" variant="glass">Glass</Link>
      <Link href="#" variant="outline">Outline</Link>
      <Link href="#" variant="ghost">Ghost</Link>
    </div>
  )
}
```
```

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

### Label Usage Example

Source: https://glinui.com/docs/components/radix/label

Demonstrates how to use the Label component in conjunction with an Input component.

```APIDOC
## Usage Example

```typescript
import { Input, Label } from "@glinui/ui"

export function Demo() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email address</Label>
      <Input id="email" type="email" placeholder="name@example.com" />
    </div>
  )
}
```
```

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

### Install Alert Dialog via Registry

Source: https://glinui.com/docs/components/base/alert-dialog

Use this command to add the Alert Dialog component using the GlinUI CLI from the registry.

```bash
pnpm dlx @glinui/cli@latest add alert-dialog
```

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

### Fast Rotation Example

Source: https://glinui.com/docs/components/word-rotate

Shows how to configure the WordRotate component for a faster rotation effect by adjusting the duration.

```APIDOC
## Fast Rotation

Lower `duration` for a rapid, high-energy cycling effect.

```jsx
"use client"
import { WordRotate } from "@glinui/ui"

export function WordRotateFastDemo() {
  return (
    <div className="flex items-center justify-center p-8">
      <h2 className="text-3xl font-bold">
        Powered by{" "}
        <WordRotate
          words={["speed", "precision", "glass", "motion"]}
          duration={1500}
          className="text-accent"
        />
      </h2>
    </div>
  )
}
```
```

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

### Install Icon Frame via Registry CLI

Source: https://glinui.com/docs/components/base/icon-frame

Use the GLINR CLI to add the icon-frame component from the registry.

```bash
pnpm dlx @glinui/cli@latest add icon-frame
```

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

### Install Data Table via Registry

Source: https://glinui.com/docs/components/base/data-table

Use the Glin UI CLI to add the Data Table component to your project.

```bash
pnpm dlx @glinui/cli@latest add data-table
```

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

### Start Next.js Development Server

Source: https://glinui.com/docs/getting-started

Run the Next.js development server using pnpm to see your application with Glin UI components in action.

```bash
pnpm dev
```

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

### Glass Variant Tree Example

Source: https://glinui.com/docs/components/radix/tree

Example showcasing the Tree component with the 'glass' variant for a distinct visual style.

```APIDOC
## Glass Variant Tree Example

```jsx
import { Tree } from "@glinui/ui"

export function Demo() {
  return (
    <Tree
      variant="glass"
      nodes={[
        {
          label: "Navigation",
          children: [
            { label: "Home", href: "#" },
            { label: "About", href: "#" },
            { label: "Contact", href: "#" }
          ]
        }
      ]}
    />
  )
}
```
```

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

### Tree with Badges Example

Source: https://glinui.com/docs/components/radix/tree

Example demonstrating the use of badges to annotate tree nodes with status or type information.

```APIDOC
## Tree with Badges Example

```jsx
import { Tree } from "@glinui/ui"

export function Demo() {
  return (
    <Tree
      variant="default"
      nodes={[
        {
          label: "Components",
          children: [
            { label: "button.tsx", href: "#" },
            { label: "button.test.tsx", href: "#", badge: "test", badgeVariant: "success" }
          ]
        },
        {
          label: "Hooks",
          children: [
            { label: "use-liquid-glass.tsx", href: "#", badge: "new", badgeVariant: "warning" }
          ]
        }
      ]}
    />
  )
}
```
```

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

### Add Spotlight Component using CLI

Source: https://glinui.com/docs/components/spotlight

Use the GLINUI CLI to add the Spotlight component to your project.

```bash
pnpm dlx @glinui/cli@latest add spotlight
```

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

### Cool Tones Example

Source: https://glinui.com/docs/components/light-leak

An example showcasing the use of the `colors` and `intensity` props to create a light leak with cool tones.

```APIDOC
## Cool Tones Example

```javascript
import { LightLeak } from "@glinui/ui"
export function LightLeakCoolDemo() {
return (
  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl bg-neutral-950">
    <LightLeak colors={["#06b6d4", "#3b82f6", "#8b5cf6"]} intensity={0.4} />
    <span className="relative z-10 text-2xl font-bold text-white">Cool Leak</span>
  </div>
)
}
```
```

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

### Basic Usage

Source: https://glinui.com/docs/components/light-leak

Demonstrates how to use the LightLeak component by placing it inside a container with relative positioning.

```APIDOC
## Basic Usage

Place `LightLeak` inside a relative container. The warm gradient overlays drift across the surface.

```javascript
import { LightLeak } from "@glinui/ui"

export function LightLeakDemo() {
return (
  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl bg-neutral-950">
    <LightLeak />
    <span className="relative z-10 text-3xl font-bold text-white">Light Leak</span>
  </div>
)
}
```
```

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

### File Tree Example

Source: https://glinui.com/docs/components/base/tree

Displays a project file structure with folders and linked files. Use this for visualizing hierarchical data like file systems.

```typescript
import { Tree } from "@glinui/ui"

export function Demo() {
  return (
    <Tree
      variant="outline"
      nodes={[
        {
          label: "src",
          children: [
            {
              label: "components",
              children: [
                { label: "button.tsx", href: "#" },
                { label: "input.tsx", href: "#" }
              ]
            },
            { label: "index.ts", href: "#" }
          ]
        },
        { label: "package.json", href: "#" }
      ]}    />
  )
}
```

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

### Basic Usage

Source: https://glinui.com/docs/components/kbd

Demonstrates the basic usage of the Kbd component to render a single key.

```APIDOC
## Basic Usage

`Kbd` renders a semantic `<kbd>` element styled as a keyboard key cap.

### Example

```jsx
import { Kbd } from "@glinui/ui"

export function KbdBasicDemo() {
  return <Kbd>⌘</Kbd>
}
```
```

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

### Basic Select Usage

Source: https://glinui.com/docs/components/base/select

Demonstrates the basic implementation of the Select component with a placeholder and options.

```APIDOC
## Basic Select

### Description
This example shows how to use the Select component with a placeholder and a list of options.

### Usage
```javascript
import { Select } from "@glinui/ui"

export function Demo() {
  return (
    <Select
      placeholder="Pick a framework"
      options={[
        { value: "react", label: "React" },
        { value: "vue", label: "Vue" },
        { value: "svelte", label: "Svelte" }
      ]}
    />
  )
}
```
```

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

### Cool Tones Light Leak Example

Source: https://glinui.com/docs/components/light-leak

Customizes the LightLeak component with specific cool-toned colors and a reduced intensity. This example showcases color and intensity customization.

```jsx
import { LightLeak } from "@glinui/ui"
export function LightLeakCoolDemo() {
return (
  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl bg-neutral-950">
    <LightLeak colors={["#06b6d4", "#3b82f6", "#8b5cf6"]} intensity={0.4} />
    <span className="relative z-10 text-2xl font-bold text-white">Cool Leak</span>
  </div>
)
}
```

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

### Basic Command Palette Usage

Source: https://glinui.com/docs/components/base/command

Demonstrates a basic command palette with suggestions, input, and shortcuts. Ensure necessary components are imported.

```jsx
import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut } from "@glinui/ui"

export function Demo() {
  return (
    <Command className="max-w-md">
      <CommandInput placeholder="Type a command..." />
      <CommandList>
        <CommandEmpty>No results.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>Calendar<CommandShortcut>⌘K</CommandShortcut></CommandItem>
          <CommandItem>Search<CommandShortcut>⌘S</CommandShortcut></CommandItem>
          <CommandItem>Settings</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}
```

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

### Animated Example

Source: https://glinui.com/docs/components/chromatic-text

Set `duration` to enable continuous chromatic animation.

```APIDOC
## Animated Example

```jsx
import { ChromaticText } from "@glinui/ui"

export function ChromaticTextAnimatedDemo() {
  return (
    <div className="flex items-center justify-center p-8 bg-neutral-950 rounded-xl">
      <h2 className="text-4xl font-bold text-white">
        <ChromaticText duration={3} offset={3}>Glitch</ChromaticText>
      </h2>
    </div>
  )
}
```
```

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

### Button with Icon Example

Source: https://glinui.com/docs/components/button

Renders a button with text and an icon on the right.

```tsx
import { ArrowRight } from "lucide-react"
import { Button } from "@glinui/ui"

export function ButtonWithIconDemo() {
return (
  <Button variant="liquid" className="gap-2">
    Continue
    <ArrowRight className="size-4" />
  </Button>
)
}
```

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

### Disabled Textarea

Source: https://glinui.com/docs/components/textarea

Example of a disabled Textarea component, indicated by the 'disabled' attribute.

```typescript
import { Textarea } from "@glinui/ui"
export function TextareaDisabledDemo() {
return <Textarea aria-label="Disabled textarea" disabled placeholder="Cannot edit this field" />
}
```

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

### Custom Colors Example

Source: https://glinui.com/docs/components/chromatic-text

Customize the colors used for the chromatic aberration effect.

```APIDOC
## Custom Colors Example

```jsx
import { ChromaticText } from "@glinui/ui"

export function ChromaticTextColorsDemo() {
  return (
    <div className="flex items-center justify-center p-8 bg-neutral-950 rounded-xl">
      <h2 className="text-4xl font-bold text-white">
        <ChromaticText colors={["#06b6d4", "#f97316"]} offset={4}>Neon</ChromaticText>
      </h2>
    </div>
  )
}
```
```

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

### Basic Dropdown Menu Usage

Source: https://glinui.com/docs/components/base/dropdown-menu

Demonstrates the basic implementation of a Dropdown Menu with standard menu items. Ensure all necessary components are imported from '@glinui/ui'.

```typescript
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem } from "@glinui/ui"

export function Demo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Open menu</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Settings</DropdownMenuItem>
        <DropdownMenuItem>Logout</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

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

### Dotted Separator Usage

Source: https://glinui.com/docs/components/base/separator

Example of using the Separator component with a dotted style.

```APIDOC
## Dotted Separator

### Description

This example shows how to apply a dotted style to the Separator component.

### Code

```jsx
import { Separator } from "@glinui/ui"

export function Demo() {
  return (
    <div className="space-y-4">
      <p className="text-sm">Section A</p>
      <Separator variant="dotted" />
      <p className="text-sm">Section B</p>
    </div>
  )
}
```
```

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

### Dashed Separator Usage

Source: https://glinui.com/docs/components/base/separator

Example of using the Separator component with a dashed style.

```APIDOC
## Dashed Separator

### Description

This example shows how to apply a dashed style to the Separator component.

### Code

```jsx
import { Separator } from "@glinui/ui"

export function Demo() {
  return (
    <div className="space-y-4">
      <p className="text-sm">Section A</p>
      <Separator variant="dashed" />
      <p className="text-sm">Section B</p>
    </div>
  )
}
```
```

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

### Basic Kbd Usage

Source: https://glinui.com/docs/components/base/kbd

Demonstrates how to use the Kbd component to display keyboard shortcuts.

```typescript
import { Kbd } from "@glinui/ui"

export function Demo() {
  return (
    <div className="flex items-center gap-2 text-sm">
      <span>Open command palette:</span>
      <Kbd>cmd</Kbd>
      <Kbd>K</Kbd>
    </div>
  )
}
```

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

### Gradient Separator Usage

Source: https://glinui.com/docs/components/base/separator

Example of using the Separator component with a gradient variant.

```APIDOC
## Gradient Separator

### Description

This example shows how to apply a gradient style to the Separator component.

### Code

```jsx
import { Separator } from "@glinui/ui"

export function Demo() {
  return (
    <div className="space-y-4">
      <p className="text-sm">Section A</p>
      <Separator variant="gradient" />
      <p className="text-sm">Section B</p>
    </div>
  )
}
```
```

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

### Default Separator Usage

Source: https://glinui.com/docs/components/base/separator

Example of how to use the Separator component with its default settings.

```APIDOC
## Default Separator

### Description

This example demonstrates the basic usage of the Separator component.

### Code

```jsx
import { Separator } from "@glinui/ui"

export function Demo() {
  return (
    <div className="space-y-4">
      <p className="text-sm">Section A</p>
      <Separator />
      <p className="text-sm">Section B</p>
    </div>
  )
}
```
```

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

### Textarea with Placeholder

Source: https://glinui.com/docs/components/textarea

Example of a Textarea component configured with a specific aria-label and placeholder text.

```typescript
import { Textarea } from "@glinui/ui"
export function TextareaPlaceholderDemo() {
return <Textarea aria-label="Issue details" placeholder="Describe your issue in detail..." />
}
```

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

### Separator with Label Usage

Source: https://glinui.com/docs/components/base/separator

Example of using the Separator component with a centered text label.

```APIDOC
## Separator with Label

### Description

This example demonstrates how to display a text label centered on the Separator.

### Code

```jsx
import { Separator } from "@glinui/ui"

export function Demo() {
  return (
    <div className="space-y-4">
      <p className="text-sm">Login with email</p>
      <Separator label="OR" />
      <p className="text-sm">Continue with provider</p>
    </div>
  )
}
```
```

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

### Button Source Import

Source: https://glinui.com/docs/components/base/button

Example of how to import the Button component directly from the GLINUI UI package.

```jsx
import { Button } from "@glinui/ui"
```

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

### Link Component Usage Examples

Source: https://glinui.com/docs/components/base/link

Demonstrates how to use the Link component with different variants: Default, Glass, Outline, and Ghost. Ensure the Link component is imported from '@glinui/ui'.

```jsx
import { Link } from "@glinui/ui"

export function Demo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Link href="#">Default</Link>
      <Link href="#" variant="glass">Glass</Link>
      <Link href="#" variant="outline">Outline</Link>
      <Link href="#" variant="ghost">Ghost</Link>
    </div>
  )
}
```

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

### Button Group Example

Source: https://glinui.com/docs/components/button

Demonstrates a group of buttons styled as a single unit, often used for selection.

```tsx
import { Button } from "@glinui/ui"

export function ButtonGroupDemo() {
return (
  <div className="inline-flex items-center gap-1 rounded-full border border-border/60 bg-background/45 p-1">
    <Button size="sm" className="rounded-full">Day</Button>
    <Button size="sm" variant="ghost" className="rounded-full">Week</Button>
    <Button size="sm" variant="ghost" className="rounded-full">Month</Button>
  </div>
)
}
```
Tokens:
Raw