Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Get Started
import { BookmarkIcon } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"Installation
pnpm dlx shadcn@latest add toggle
Usage
import { Toggle } from "@/components/ui/toggle"<Toggle>Toggle</Toggle>Examples
Outline
Use variant="outline" for an outline style.
import { BoldIcon, ItalicIcon } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"With Text
import { ItalicIcon } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"Size
Use the size prop to change the size of the toggle.
import { Toggle } from "@/components/ui/toggle"
export function ToggleSizes() {Disabled
import { Toggle } from "@/components/ui/toggle"
export function ToggleDisabled() {RTL
To enable RTL support in StyleDriven UI, see the RTL configuration guide.
"use client"
import * as React from "react"API Reference
See the Radix Toggle documentation.
Deploy your StyleDriven UI app on Vercel
Trusted by OpenAI, Sonos, Adobe, and more.
Vercel provides tools and infrastructure to deploy apps and features at scale.
Deploy to Vercel