## Action

Use the `Action` component to compose your own actions for consistent layouts and styles.

```tsx
import { Action, ActionControls, ActionLabel } from "@shadcn/designer/ui"

function CustomAction() {
  return (
    <Action orientation="vertical | horizontal">
      <ActionLabel htmlFor="width">Width</ActionLabel>
      <ActionControls>
        <InputNumber id="width" />
      </ActionControls>
    </Action>
  )
}
```

## Button

```tsx
import { Button } from "@shadcn/designer/ui"

function ActionButton() {
  return <Button variant="outline" size="sm">Click me</Button>
}
```

## InputGroup

Wrap inputs and addons to build compact control clusters with optional scrubbing support.

- `InputGroup` positions addons around the focused input with consistent padding.
- `InputGroupAddon` can enable scrubbing, pulling min/max/step from nearby `InputNumber` fields.
- Use the `enableScrubbing`, `sensitivity`, and `acceleration` props to tune pointer adjustments.

```tsx
import * as React from "react"
import {
  InputGroup,
  InputGroupAddon,
  InputNumber,
} from "@shadcn/designer/ui"

function SizeField() {
  return (
    <InputGroup>
      <InputGroupAddon>W</InputGroupAddon>
      <InputNumber min={0} defaultValue={1024} step={1} />
    </InputGroup>
  )
}
```

## Input

```tsx
import { Input } from "@shadcn/designer/ui"

function TextInput() {
  return <Input placeholder="Enter text..." />
}
```

## InputNumber

Number input with increment/decrement controls.

```tsx
import { InputNumber } from "@shadcn/designer/ui"

function NumberInput() {
  return <InputNumber min={0} max={100} step={1} />
}
```

## Select

```tsx
import { Select } from "@shadcn/designer/ui"

function Dropdown() {
  return (
    <Select>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
    </Select>
  )
}
```

## Textarea

```tsx
import { Textarea } from "@shadcn/designer/ui"

function MultilineInput() {
  return <Textarea placeholder="Enter text..." />
}
```

## Checkbox

```tsx
import { Checkbox } from "@shadcn/designer/ui"

function CheckboxInput() {
  return <Checkbox>Enable feature</Checkbox>
}
```

## Slider

```tsx
import { Slider } from "@shadcn/designer/ui"

function RangeSlider() {
  return <Slider min={0} max={100} step={1} />
}
```

## ColorPicker

```tsx
import { ColorPicker } from "@shadcn/designer/ui"

function ColorSelector() {
  return <ColorPicker value="#ff0000" onValueChange={setColor} />
}
```

## Tabs

```tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@shadcn/designer/ui"

function TabNavigation() {
  return (
    <Tabs defaultValue="tab1">
      <TabsList>
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">Content 1</TabsContent>
      <TabsContent value="tab2">Content 2</TabsContent>
    </Tabs>
  )
}
```

## Dialog

```tsx
import { Dialog } from "@shadcn/designer/ui"

function ModalDialog() {
  return (
    <Dialog>
      <DialogTrigger>Open</DialogTrigger>
      <DialogContent>
        <DialogTitle>Title</DialogTitle>
        <DialogDescription>Description</DialogDescription>
      </DialogContent>
    </Dialog>
  )
}
```

## Popover

```tsx
import { Popover } from "@shadcn/designer/ui"

function PopoverContent() {
  return (
    <Popover>
      <PopoverTrigger>Open</PopoverTrigger>
      <PopoverContent>Popover content</PopoverContent>
    </Popover>
  )
}
```

## DropdownMenu

```tsx
import { DropdownMenu } from "@shadcn/designer/ui"

function ContextDropdown() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Menu</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Item 1</DropdownMenuItem>
        <DropdownMenuItem>Item 2</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

## Tooltip

```tsx
import { Tooltip } from "@shadcn/designer/ui"

function HelpTooltip() {
  return (
    <Tooltip>
      <TooltipTrigger>Hover me</TooltipTrigger>
      <TooltipContent>Helpful information</TooltipContent>
    </Tooltip>
  )
}
```

## Toggle

```tsx
import { Toggle } from "@shadcn/designer/ui"

function ToggleSwitch() {
  return <Toggle>Toggle me</Toggle>
}
```

## ToggleGroup

```tsx
import { ToggleGroup } from "@shadcn/designer/ui"

function ToggleButtons() {
  return (
    <ToggleGroup type="single">
      <ToggleGroupItem value="left">Left</ToggleGroupItem>
      <ToggleGroupItem value="center">Center</ToggleGroupItem>
      <ToggleGroupItem value="right">Right</ToggleGroupItem>
    </ToggleGroup>
  )
}
```

## Skeleton

Loading placeholder component.

```tsx
import { Skeleton } from "@shadcn/designer/ui"

function LoadingState() {
  return <Skeleton className="h-4 w-20" />
}
```