Support className prop on shadcn components

[akselleirv]

The shadcn components don't accept a className prop, so there's no way to override or extend their styling from the spec.

For example, the Card component wraps children in <CardContent className="flex flex-col gap-3">. That forced gap-3 breaks compact layouts like stat cards — but there's no escape hatch to override it without creating a full custom component.

Suggestion

Add an optional className: z.string().nullable() to each shadcn component's props schema and forward it to the root element via cn():

// catalog.ts
Card: {
  props: z.object({
    // ...existing props
    className: z.string().nullable(),
  }),
}

// components.tsx
Card: ({ props, children }) => (
  <Card className={cn(existingClasses, props.className)}>
    ...
  </Card>
)

This matches how shadcn/ui itself works — every component accepts className. It would let users fine-tune layout without needing to rewrite entire components.

[IntranetFactory]

I'm having a similar requirement, but I'm wondering how to ensure that the tailwind class names generated at runtime are included in the tailwind css generated at build time.