Usage

Learn how to use d12-ui components in your React applications.

Basic Usage

Import and use d12-ui components in your React components:

import { Button, Card, Input } from 'd12-ui'

function MyComponent() {
  return (
    <Card className="p-6">
      <h2 className="text-2xl font-bold mb-4">Sign Up</h2>
      <div className="space-y-4">
        <Input placeholder="Enter your email" type="email" />
        <Input placeholder="Enter your password" type="password" />
        <Button className="w-full">Create Account</Button>
      </div>
    </Card>
  )
}

TypeScript Integration

d12-ui is built with TypeScript (72.9% of the codebase) and provides excellent type safety:

import { Button, type ButtonProps } from 'd12-ui'

interface CustomButtonProps extends ButtonProps {
  loading?: boolean
  variant?: 'primary' | 'secondary' | 'outline'
}

const CustomButton: React.FC<CustomButtonProps> = ({ 
  loading, 
  children, 
  variant = 'primary',
  ...props 
}) => {
  return (
    <Button 
      disabled={loading} 
      className={`btn-${variant}`}
      {...props}
    >
      {loading ? 'Loading...' : children}
    </Button>
  )
}

Styling with Tailwind

Combine d12-ui components with Tailwind CSS classes for custom styling:

<Button className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition hover:scale-105">
  Gradient Button
</Button>

Form Handling

Use d12-ui form components with popular form libraries:

import { useForm } from 'react-hook-form'
import { Button, Input, Label } from 'd12-ui'

interface FormData {
  name: string
  email: string
}

function ContactForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>()
  
  const onSubmit = (data: FormData) => {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <div>
        <Label htmlFor="name">Name</Label>
        <Input 
          id="name"
          {...register('name', { required: true })}
          className={errors.name ? 'border-red-500' : ''}
        />
      </div>
      <div>
        <Label htmlFor="email">Email</Label>
        <Input 
          id="email"
          type="email"
          {...register('email', { required: true })}
          className={errors.email ? 'border-red-500' : ''}
        />
      </div>
      <Button type="submit">Submit</Button>
    </form>
  )
}

Responsive Design

d12-ui components work seamlessly with Tailwind's responsive utilities:

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <Card className="p-4">
    <h3 className="text-lg font-semibold mb-2">Card 1</h3>
    <p className="text-muted-foreground">Content goes here</p>
  </Card>
  <Card className="p-4">
    <h3 className="text-lg font-semibold mb-2">Card 2</h3>
    <p className="text-muted-foreground">Content goes here</p>
  </Card>
  <Card className="p-4">
    <h3 className="text-lg font-semibold mb-2">Card 3</h3>
    <p className="text-muted-foreground">Content goes here</p>
  </Card>
</div>

Storybook Integration

d12-ui comes with Storybook support for component development and testing:

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-docs',
  ],
}