Trying to be too clever

You know those moments where you have an idea so brilliant you feel like Steve Jobs? Launching our component library felt like that. Novel, high risk, and a radically different approach to what was on the market. If it worked out, it'd be incredible.

Unfortunately, it didn't. We ended up with a weird mess and had to spend the last week rewriting everything.

For context: we're building Autumn, pricing and billing software. Part of our offering is frontend components for things like a pricing table, paywalls etc. You can read more about them here.

Mistake 1

We decided to launch our components as a shadcn package instead of plain React. Our components approach was inspired by Clerk, but I always thought they looked out of place and wanted users to own them. Shadcn had launched registry functionality so people could share and download components, and Supabase launched one too, so it seemed promising.

Unfortunately only half our users use shadcn, but the others wanted components and couldn't use them. More importantly, we were iterating quickly on the underlying API that controls the component content. Since the components weren't synced to our SDK, every update we made broke integrations. We should have kept it simple with React to start, then expanded to shadcn once stable.

Mistake 2

We launched a separate open source pricing component library called pricecn. We thought it would go viral like React Email by Resend. We designed it so pricecn users could easily migrate to using Autumn components later later, and so made the Autumn component library have the pricecn library as a dependency.

Pricecn didn't take off. People liked generating pricing cards from JSON, but it's hard enough to promote one project, let alone two. Having Autumn components depend on pricecn ones was just a confusing experience for users, as each component came with several files in different folders.

Mistake 3

We launched with 3 different styles: classic, clean and dev. I thought this would grow adoption since people could pick what suits them.

Again, people liked the concept but it made maintenance hell. Every issue meant jumping into 3 component files, so we kept putting off fixes until it became unusable.

What we have now

1. We launched a React library as the core experience.

2. We only kept the "classic" style and simplified it.

3. We cut the dependency on pricecn.

We kept the shadcn components since people liked owning them when they worked, and now our API is a little more stable, it's working better.

Maybe we're still trying too hard to be clever but here's the cool part: instead of maintaining two sets, our shadcn library automatically replicates from our React ones so they always stay synced. Here's the script that syncs them whenever we npm run dev:

https://github.com/useautumn/autumn-js/blob/main/package/scripts/sync-registry.ts

To be honest we have no idea how that script works but it does. Thanks Claude Code!