Contributing to shadcn: Building a Reusable Chat UI with Sidebar and Input Form

Contributing to shadcn: Building a Reusable Chat UI with Sidebar and Input Form

I have been using Shadcn UI for a long time. Most of my React/Next.js projects are built with it. I even recommended using Shadcn for a project at my company, and it turned out to be a great choice! What I love about Shadcn is its clean design, customizable components, and readily available screens like login and dashboard. Since it’s built with Tailwind CSS, customizing components is super easy. Interestingly, if you’ve used V0, you might have noticed that it also relies on Shadcn for page creation.

Why I Contributed to Shadcn

Since I use Shadcn frequently for both personal and work projects, I often visit the website. There’s a Blocks section that provides commonly used UI screens with code snippets. A few days ago, I noticed that they now allow open-source contributions, enabling users to add new blocks.

At that time, I was working on a chat-based UI, a layout that is increasingly common in AI applications. So, I thought, why not build a screen similar to ChatGPT or any AI chat platform? This meant creating a sidebar for chat history and a chat input form—a structure that many developers would find useful. Plus, I’ve always wanted to contribute more to open-source projects like this.

Building the Chat UI Block

Shadcn provides detailed instructions for contributing new blocks, which you can find in their official documentation: Shadcn Blocks Contribution Guide.

But here are the some extra essential steps I followed:

  1. Fork the repository to your GitHub account.
  2. Clone the forked repository to your local machine.
  3. Run pnpm build before pnpm registry:build (since sometimes, the latter might not work without the prior build).

For the complete step-by-step guide, refer to the official Shadcn documentation linked above.

The chat screen I built is minimal but widely used for chat-based applications. I hope my Pull Request (PR) gets merged soon so that it becomes available on the Shadcn site. In the meantime, the code is already available in the PR, so anyone can use it.

I’m also open to refactoring and improving it further. I’d love to continue contributing to projects like this! If you have any feedback or suggestions, feel free to reach out to me through my contact form.

📌 PR Link: https://github.com/shadcn-ui/ui/pull/6896

#NextJS #Shadcn #OpenSource #React