shadcn

Shadcn Best Practices for React Projects

Component Usage

• Adding missing components: If a component is missing, always add it via the CLI tool like so: npx -y shadcn@latest add button. Replace button with the component you're trying to add.
• Importing Components: Import Shadcn components from their designated files as set up by the Shadcn CLI. For example:

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

• Props Handling: Pass props according to the component’s documented API, ensuring all required props are provided. Use TypeScript to enforce type safety for props and event handlers.
• Composition: Utilize the asChild prop (where supported) to compose components with custom elements or other components, maintaining Shadcn’s functionality. Example:

  <Button asChild><a href="/link">Link Button</a></Button>
  

Customization

• Tailwind CSS Styling: Customize components using Tailwind CSS utility classes directly in the className prop. For example:

  <Button className="bg-green-600 hover:bg-green-700">Click Me</Button>
  

• Wrapper Components: For reusable or complex customizations, create wrapper components instead of modifying Shadcn source files. This preserves update compatibility. Example:

  const CustomButton = ({ children, ...props }: ButtonProps) => (
    <Button {...props} className="my-custom-style">{children}</Button>
  );
  

• Preserve Originals: Avoid editing Shadcn component files directly to simplify updates via the CLI.

Type Safety

• Prop Interfaces: Define TypeScript interfaces for custom components that extend Shadcn’s props. For example:

  interface CustomButtonProps extends ButtonProps {
    customLabel: string;
  }
  

• Type Inference: Rely on TypeScript’s type inference for Shadcn components where possible, reducing redundant type definitions.
• Strict Typing: Ensure all custom components and their props are fully typed to catch errors at compile time.