Using Components

Learn how to effectively use and customize components

Once you've installed the necessary dependencies, you can start using components in your project. Each component comes with clear documentation and examples.

Basic Usage

After copying a component to your project, import and use it like any other React component:

tsx

import { Button } from class="text-green-500">"@/components/ui/button"

export default function MyComponent() {
  return (
    <Button variant=class="text-green-500">"primary">
      Click me
    </Button>
  )
}

Props and Customization

Components accept props for customization. Check each component's documentation for available props:

tsx

<Button 
  variant=class="text-green-500">"secondary" 
  size=class="text-green-500">"lg"
  disabled={isLoading}
  onClick={handleClick}
>
  {isLoading ? class="text-green-500">"Loading..." : class="text-green-500">"Submit"}
</Button>

Composition

Components are designed to be composed together. You can nest components and combine them to create complex UIs:

tsx

import { Card, CardHeader, CardTitle, CardContent } from class="text-green-500">"@/components/ui/card"
import { Button } from class="text-green-500">"@/components/ui/button"

export default function FeatureCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Amazing Feature</CardTitle>
      </CardHeader>
      <CardContent>
        <p>Description of the feature...</p>
        <Button className=class="text-green-500">"mt-4">Learn More</Button>
      </CardContent>
    </Card>
  )
}

Styling Overrides

You can override component styles using Tailwind classes or custom CSS:

tsx

<Button 
  className=class="text-green-500">"bg-purple-600 hover:bg-purple-700 text-white px-8 py-3"
>
  Custom Styled Button
</Button>

Warning

When overriding styles, be mindful of accessibility considerations like color contrast and focus states.

Accessibility Considerations

All components are built with accessibility in mind, but you should:

Provide meaningful labels for interactive elements
Ensure sufficient color contrast
Maintain proper focus management
Test with screen readers

Performance Tips

To optimize performance:

Only import components you actually use
Use React.memo for expensive components
Implement virtualization for large lists
Code-split when appropriate

Tip

Since components are copied directly into your project, you can optimize them specifically for your use case.

Documentation