Add UI Component

Add a new component to @basilic/ui for use across all frontend apps.

Overview

Components are shared via @basilic/ui package and can be used in any frontend app.

Step 1: Add Component

Add your component to packages/ui/components/:

// packages/ui/components/my-component.tsx
import { cn } from '@basilic/ui/lib/utils'

export interface MyComponentProps {
  className?: string
  children: React.ReactNode
}

export function MyComponent({ className, children }: MyComponentProps) {
  return (
    <div className={cn('rounded-lg border p-4', className)}>
      {children}
    </div>
  )
}

Step 2: Export Component

Export from packages/ui/components/index.ts:

export { MyComponent } from './my-component'
export type { MyComponentProps } from './my-component'

Step 3: Use in Apps

Import and use in any frontend app:

// apps/web/app/page.tsx
import { MyComponent } from '@basilic/ui/components'

export default function Page() {
  return (
    <MyComponent>
      Content here
    </MyComponent>
  )
}

Using Shadcn Components

To add a Shadcn component:

Use the shadcn CLI (via MCP server)
Copy component to packages/ui/components/
Export from index
Use across apps

Best Practices

Use Tailwind CSS for styling
Follow mobile-first design
Export types with components
Use cn() utility for className merging
Keep components focused and reusable

Frontend Stack - UI architecture
ShadcnUI Rules - Component patterns