UI

PreviousNext

Primitive UI components for building custom designer controls and actions.

Action

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

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

import { Button } from "@shadcn/designer/ui"
 
function ActionButton() {
  return <Button variant="outline" size="sm">Click me</Button>
}

Input

import { Input } from "@shadcn/designer/ui"
 
function TextInput() {
  return <Input placeholder="Enter text..." />
}

InputNumber

Number input with increment/decrement controls.

import { InputNumber } from "@shadcn/designer/ui"
 
function NumberInput() {
  return <InputNumber min={0} max={100} step={1} />
}

Select

import { Select } from "@shadcn/designer/ui"
 
function Dropdown() {
  return (
    <Select>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
    </Select>
  )
}

Textarea

import { Textarea } from "@shadcn/designer/ui"
 
function MultilineInput() {
  return <Textarea placeholder="Enter text..." />
}

Checkbox

import { Checkbox } from "@shadcn/designer/ui"
 
function CheckboxInput() {
  return <Checkbox>Enable feature</Checkbox>
}

Slider

import { Slider } from "@shadcn/designer/ui"
 
function RangeSlider() {
  return <Slider min={0} max={100} step={1} />
}

ColorPicker

import { ColorPicker } from "@shadcn/designer/ui"
 
function ColorSelector() {
  return <ColorPicker value="#ff0000" onValueChange={setColor} />
}

Tabs

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

import { Dialog } from "@shadcn/designer/ui"
 
function ModalDialog() {
  return (
    <Dialog>
      <DialogTrigger>Open</DialogTrigger>
      <DialogContent>
        <DialogTitle>Title</DialogTitle>
        <DialogDescription>Description</DialogDescription>
      </DialogContent>
    </Dialog>
  )
}

Popover

import { Popover } from "@shadcn/designer/ui"
 
function PopoverContent() {
  return (
    <Popover>
      <PopoverTrigger>Open</PopoverTrigger>
      <PopoverContent>Popover content</PopoverContent>
    </Popover>
  )
}

DropdownMenu

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

import { Tooltip } from "@shadcn/designer/ui"
 
function HelpTooltip() {
  return (
    <Tooltip>
      <TooltipTrigger>Hover me</TooltipTrigger>
      <TooltipContent>Helpful information</TooltipContent>
    </Tooltip>
  )
}

Toggle

import { Toggle } from "@shadcn/designer/ui"
 
function ToggleSwitch() {
  return <Toggle>Toggle me</Toggle>
}

ToggleGroup

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.

import { Skeleton } from "@shadcn/designer/ui"
 
function LoadingState() {
  return <Skeleton className="h-4 w-20" />
}
ToolbarOther