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 { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
For form fields, use the Field component which includes built-in label, description, and error handling.
Installation
pnpm dlx shadcn@latest add label
Usage
import { Label } from "@/components/ui/label"<Label htmlFor="email">Your email address</Label>Label in Field
For form fields, use the Field component which
includes built-in FieldLabel, FieldDescription, and FieldError components.
<Field>
<FieldLabel htmlFor="email">Your email address</FieldLabel>
<Input id="email" />
</Field>import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {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 UI Label documentation for more information.
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