Packaging shadcn-ui components into a library

[nareshbhatia]

shadcn-ui workflow works very well for a single app, but has anyone tried to package these components into a library? I am trying to create a standard component library for my organization which can be shared across multiple apps. Any tips would be much appreciated.

One approach I have tried is to run the tailwind cli on the app + the library to create the final CSS for the entire app.

Another approach I can think of is to package the CSS for the library in it's own bundle, but not sure how I would share the theme with the app (in order to build on top of the library components).

[georgeeburt]

To create a component library that can be reused across multiple apps, you could bundle the components and Tailwind CSS into a single package. This way, the app can either import the bundled CSS or extend the Tailwind config to customise it. Another approach is to expose your theme variables so the consuming app can adjust the styles as needed.

If you’re using Tailwind, it’s generally cleaner to bundle the library’s CSS separately rather than running the Tailwind CLI for each app.

[nareshbhatia]

One question about bundling the library's CSS: since the app also wants to use Tailwind for its styling, wouldn't the utility classes get duplicated? For example, both the library and the app will have their own versions of p-0, p-1, etc. Or should the library use a prefix?

An example of your approach would be really helpful.

[georgeeburt]

Good catch on the potential CSS duplication. Yeah, using a prefix is definitely the way to go here - it's exactly what I should have mentioned in my first response. Here's how I'd handle this:

For the library components:

// tailwind.config.js
module.exports = {
  prefix: 'lib-',  // All utility classes will be prefixed
  theme: {
    extend: {
      // your theme stuff
    }
  }
}

Then in your actual components:

export const Button = () => {
  return (
    <button className="lib-px-4 lib-py-2 lib-bg-primary">
      Click me
    </button>
  )
}

The consuming app can use regular unprefixed Tailwind classes and they won't clash with your library's styles. Your library's CSS bundle will only include the prefixed utilities actually used by your components.

One gotcha though - if you're using the shadcn-ui style of class variants (like className={cn("base classes", className)}), make sure to document that consumers should use the prefixed classes when overriding styles.

[nareshbhatia]

Yep, all makes sense. Thank you.