Each component page includes an overview, installation instructions, usage examples, a complete props table, customization notes, accessibility guidance, browser support, and related components.

Use this catalog to compare free and premium React components, evaluate fit for your product surfaces, and choose the fastest installation path for your stack.

Components render directly in your app. Here is a live Button preview and usage snippet.

import { Button } from '@/components/ui/button'

export function Actions(){
  return (
    <div className="flex gap-2">
      <Button variant="default">Save</Button>
      <Button variant="secondary">Cancel</Button>
      <Button variant="ghost">More</Button>
    </div>
  )
}

• Preview
• Installation
• Usage with at least 3 examples
• Props table with types
• Customization guide
• Accessibility notes
• Browser support
• Related components

• Choose free components when you need fast adoption and direct source review in docs
• Choose premium components for advanced visuals, richer interactions, and gated bundle delivery
• Check dependency lists before installing into performance-sensitive routes
• Prioritize accessibility and theming fit, not just visual style, when selecting UI building blocks