registry/ui/label.tsx
import type { FC, JSX } from 'hono/jsx'
import { cn } from '@/lib/utils'
type LabelProps = JSX.IntrinsicElements['label']
export const Label: FC<LabelProps> = ({
class: className,
children,
...props
}) => (
<label
data-slot="label"
class={cn(
'flex items-center gap-2 text-sm leading-none font-medium select-none',
'group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50',
'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
className
)}
{...props}
>
{children}
</label>
)
Installation
1
Initialize your project
First time only. Sets up config and installs base dependencies.
npx @kiwa-ui/cli init2
Add the component
This will install the component and any dependencies it needs.
npx @kiwa-ui/cli add label1
Add the source file
Add this file to your project.
registry/ui/label.tsx
import type { FC, JSX } from 'hono/jsx'
import { cn } from '@/lib/utils'
type LabelProps = JSX.IntrinsicElements['label']
export const Label: FC<LabelProps> = ({
class: className,
children,
...props
}) => (
<label
data-slot="label"
class={cn(
'flex items-center gap-2 text-sm leading-none font-medium select-none',
'group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50',
'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
className
)}
{...props}
>
{children}
</label>
)
Usage
import { Label } from '@/components/ui/label'
<Label for='email'>Email address</Label>