Shadow Panda
Shadow Panda
Component
Label

Label

Renders an accessible label associated with controls.

shadcn/uiRadix UIAPI Reference

Installation

Install the following dependencies

npm i @radix-ui/react-label

Copy and paste the following code into your project

components/ui/label/index.tsx
import { styled, type HTMLStyledProps } from '@shadow-panda/styled-system/jsx'
import { label } from '@shadow-panda/styled-system/recipes'
 
export const Label = styled('label', label)
export type LabelProps = HTMLStyledProps<typeof Label>

Update the import paths to match your project setup

Usage

import { Label } from '@/components/ui/label'
<Label htmlFor="email">Your email address</Label>
InputMenubar