Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Code Editor
- 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
- Visual Editor
- Typography
Get Started
import { BookmarkIcon } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"Installation
pnpm dlx openteam-ui@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 shadcn/ui, see the RTL configuration guide.
"use client"
import * as React from "react"API Reference
See the Radix Toggle documentation.
Deploy your openteam.ai 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