Vendor Components

External packages wrapped and styled to match the design system.

What Goes Here

Vendor components wrap external npm packages that shadcn doesn't provide. The wrapper applies consistent styling and simplifies the API for your project.

Examples: Calendar (react-day-picker), DataTable (TanStack Table), RichTextEditor (Tiptap)

Components

0 components

No vendor components yet. Create your first one in components/vendors/

Wrapping a Vendor Package

1
Install the package
```
pnpm add react-day-picker
```
2
Create the wrapper
Add to components/vendors/calendar.tsx

Add the header

/**
 * CATALYST - Calendar Component
 *
 * @source react-day-picker v9.x
 * @customised Yes
 *   - Styled to match design system
 *   - Simplified props API
 */

Apply design system styling

import { DayPicker } from "react-day-picker"

export function Calendar({ ...props }) {
  return (
    <DayPicker
      className="border-border rounded-lg border p-3"
      classNames={{
        day: "h-9 w-9 text-sm font-medium",
        selected: "bg-primary text-primary-foreground",
        // ... apply design tokens
      }}
      {...props}
    />
  )
}

Common Packages to Wrap

react-day-picker

Calendar / Date Picker

@tanstack/react-table

Advanced Data Tables

@tiptap/react

Rich Text Editor

recharts

Charts & Graphs

react-dropzone

File Upload

cmdk

Command Palette

Guidelines

Do

• Apply design system tokens
• Simplify the API for your needs
• Document the source package
• Handle common config internally

Don't

• Use packages directly in pages
• Copy-paste default styles
• Over-abstract the API
• Ignore package updates