In the previous lessons, you've learned about the 

 codebase and how to set up the development environment.

In this lesson, you'll learn how to contribute to the 

The best places to find contribution opportunities are github issues and github discussions.

Contributions can be anything from fixing a typo in the documentation to adding a new feature to the library.

GitHub issues are a great place to start. You can look for things to fix or clarify issues.

You will see a list of issues that you can filter by labels, projects, and milestones:

A good first contribution could be adding labels to issues that don't have them or helping clarify issues that require investigation.

Issues should mostly include bugs or problems that need to be fixed. Feature requests belong to discussions.

If someone else is working on issues, so it's a good idea to comment before you start working on it.

Another thing to note is that sometimes people will create issues that are not actual. They might be asking a question or requesting a feature. It can be very helpful for maintainers to get help clarifying if an issue is a bug in the library or belongs to a stack overflow.

, as you've learned in the first module. It's possible that an actual issue in 

 is a bug in one of those libraries, and 

 will have little control over the implementation.

 is a good example of an issue you can try and solve:

A developer reported a Screen flash when the drawer opens and closes on iPhone 15 in Safari. Another developer replied with a video and source code for the issue - so you can clone the code and try to reproduce the issue.

Discussions are another place to look for things you can help library maintainers.

Discussions can include feature requests, questions, and ideas for the library. They are a great place to engage with the community and get ideas for pull requests.

There's an idea of adding Add a color picker component. You can comment on the discussion, ask for more details, or even start working on the feature.

These are all just examples of ideas and discussions in the 

 repository. I encourage you to explore the repository and find something that interests you.

Add the color picker component to shadcn/ui, and make a pull request.
It doesn't mean it'll be merged, but it's a good example of how to make a pull request.

Please do not add a color picker pull request to 

 without first discussing it with the maintainers. Take this as an example of what making a pull request might look like.

You should already have the repository forked and cloned to your local machine. Please refer to the previous lessons if you haven't done that yet.

---
title: Contributing to Shadcn UI
description: Learn how to contribute to the shadcn/ui codebase
privateVideoUrl: https://stream.mux.com/5ZUxPXCFAMcUOyqjUuqWsPBCD9rsx4UHwscWqejjMy00.m3u8
---

In the previous lessons, you've learned about the `shadcn/ui` codebase and how to set up the development environment.

In this lesson, you'll learn how to contribute to the `shadcn/ui` codebase.

## Where To Find Contribution Opportunities

The best places to find contribution opportunities are github issues and github discussions.

Contributions can be anything from fixing a typo in the documentation to adding a new feature to the library.

### Issues

GitHub issues are a great place to start. You can look for things to fix or clarify issues.

Navigate to the [`shadcn/ui` repository](https://github.com/shadcn-ui/ui) and click on the `Issues` tab:

![shadcn/ui issues](https://d2uusema5elisf.cloudfront.net/courses/building-sleek-web-applications-with-shadcn-ui/module_09/lesson_09.04/public/assets/issues.png)

You will see a list of issues that you can filter by labels, projects, and milestones:

![shadcn/ui issues list](https://d2uusema5elisf.cloudfront.net/courses/building-sleek-web-applications-with-shadcn-ui/module_09/lesson_09.04/public/assets/issues-list.png)

A good first contribution could be adding labels to issues that don't have them or helping clarify issues that require investigation.

Issues should mostly include bugs or problems that need to be fixed. Feature requests belong to discussions.

If someone else is working on issues, so it's a good idea to comment before you start working on it.

Another thing to note is that sometimes people will create issues that are not actual. They might be asking a question or requesting a feature. It can be very helpful for maintainers to get help clarifying if an issue is a bug in the library or belongs to a stack overflow.

Another thing to remember is that `shadcn/ui` is built on top of `Radix UI` and `Tailwind CSS`, as you've learned in the first module. It's possible that an actual issue in `shadcn/ui` is a bug in one of those libraries, and `shadcn/ui` will have little control over the implementation.

This [issue](https://github.com/shadcn-ui/ui/issues/2530) is a good example of an issue you can try and solve:

![./public/assets/issue-example.png](https://d2uusema5elisf.cloudfront.net/courses/building-sleek-web-applications-with-shadcn-ui/module_09/lesson_09.04/public/assets/good-first-issue.png)

A developer reported a Screen flash when the drawer opens and closes on iPhone 15 in Safari. Another developer replied with a video and source code for the issue - so you can clone the code and try to reproduce the issue.

### Discussions

Discussions are another place to look for things you can help library maintainers.

Navigate to the [`shadcn/ui` repository](https://github.com/shadcn-ui/ui) and click on the `Discussions` tab:

![discussions](https://d2uusema5elisf.cloudfront.net/courses/building-sleek-web-applications-with-shadcn-ui/module_09/lesson_09.04/public/assets/discussions.png)

Discussions are divided into categories:

![discussions categories](https://d2uusema5elisf.cloudfront.net/courses/building-sleek-web-applications-with-shadcn-ui/module_09/lesson_09.04/public/assets/discussion-categories.png)

Discussions can include feature requests, questions, and ideas for the library. They are a great place to engage with the community and get ideas for pull requests.

Here's an [example](https://github.com/shadcn-ui/ui/discussions/573) of a feature idea for the library:

![discussions example](https://d2uusema5elisf.cloudfront.net/courses/building-sleek-web-applications-with-shadcn-ui/module_09/lesson_09.04/public/assets/good-first-discussion.png)

There's an idea of adding Add a color picker component. You can comment on the discussion, ask for more details, or even start working on the feature.

These are all just examples of ideas and discussions in the `shadcn/ui` repository. I encourage you to explore the repository and find something that interests you.

## Making a Pull Request for a Color Picker

Add the color picker component to shadcn/ui, and make a pull request.
It doesn't mean it'll be merged, but it's a good example of how to make a pull request.

:::warning
Please do not add a color picker pull request to `shadcn/ui` without first discussing it with the maintainers. Take this as an example of what making a pull request might look like.
:::

You should already have the repository forked and cloned to your local machine. Please refer to the previous lessons if you haven't done that yet.

### Step 1 – Create a New Branch and Install Dependencies

The first step is to create a new branch for the color picker feature.

Navigate to the `ui` folder, and run the `git checkout` command:

```bash
git checkout -b color-picker
```

Next, install the [react-colorful](https://www.npmjs.com/package/react-colorful) package inside the `apps/wwww` folder:

```bash
cd apps/www
pnpm install react-colorful
```

### Step 2 – Create the Color Picker Component

Creating a new component in `shadcn/ui` required adding the component source and component example files for both styles.

Create a new file in `apps/www/registry/default/ui/color-picker.tsx` and `apps/www/registry/new-york/ui/color-picker.tsx`, and add the component code.

```javascript { actualFilename=../../code/shadcn-ui/color-picker.tsx endChar=1993 endLine=86 startChar=0 startLine=1 statedFilename=color-picker.tsx url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_09/lesson_09.04/.../code/shadcn-ui/color-picker.tsx }
import { Pipette } from "lucide-react";
import { HexColorPicker } from "react-colorful";

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/registry/default/ui/popover";

const defaultColors = [
  "#FF6900",
  "#FCB900",
  "#7BDCB5",
  "#00D084",
  "#8ED1FC",
  "#0693E3",
  "#ABB8C3",
  "#EB144C",
];

Eyal Cohen

Learn how to contribute to the shadcn/ui codebase

Contributing to Shadcn UI

In the previous lesson you've learned about the SHAD-CNI codebase and how to

In this lesson you will learn how to contribute to the SHAD-CNI codebase.

The best places to find contribution opportunities are GitHub issues and GitHub

Contributions can be anything from fixing a type point of documentation to

So the first thing is issues. Issues are a great place to start.

You can look for things to fix or to clarify.

Navigate to the repository and click on the issue tab.

And you will see a list of issues that you can filter by labels, projects and

For example, you can filter by the bug label.

This is everything that is not working. Sometimes you can help clarify.

So a good first contribution could be just adult people.

Or even fix the bug that you're describing.

A good first contribution could be adding labels to issues that doesn't have

the myth or helping clarify the issues that require investigation.

Issues should mostly include bugs or problems that need to be fixed.

Feature requests are belonging discussions.

If someone else is already working on an issue, it's a good idea to comment

Another thing to note is that sometimes people will create issues that are not

They might be asking questions or requesting a feature.

It can be very helpful to help maintainers and help clarifying if it's an issue

, a bug or belong to something like Stack Overflow.

Another thing to remember is that ChadsENUI is built on top of RadXUI and Tail

wind CSS as you've learned about in the first module.

It's possible that the actual issue in ChadsENUI is the bug in one of those

And ChadsENUI will have little control over the example.

Here's an example of a good idea that you may be able to solve.

When toggling the drawer, it flashes back and open and closed.

GitHub discussions are another place to look for things that you can help

Navigate to the repositories and click on the discussion stop.

Discussions can include feature requests, questions and ideas for the libraries

They are great place to engage with the community and even get ideas for pull

Here is an example of a feature idea for the library that I'm seeing like a few

You can comment on the discussion, ask for more details or even start working

These are all just examples of ideas and discussions in the ChadsENUI

I really encourage you to explore the repository and find something that

Let's make a pull request for the call-up speaker.

We can add a call-up speaker component and make a pull request.

It doesn't mean it will be merged, but it's a good example of how to make a

Please do not go and add now a call-up speaker pull request to ChadsENUI

without first discussing it with the maintainers.

This is just an example of what making a pull request might look like.

You should already have the repository for worked and cloned your local machine

and if you don't, please refer to the previous lesson.

The first step would be to create a new branch for the call-up speaker feature.

Open your terminal and navigate to the UI folder.

Then run the git checkout command with -b and call-up speaker arguments.

We now switch to a new branch call-up speaker.

It's a simple call-up speaker fully-apped.

Open the ChadsENUI source code and create a new component.

It requires adding the component source and the component example.

For both sides, we need to create a new file in apps/www/register.

Then inside the default folder, go to UI and create a new caller-picker.tsc

We are going to import the pipeta form React from Lucid React, which is the

Then we are going to import the hex caller-picker from React-colorful.

And import the popover content and popover trigger components from the registry

Then let's select a list of default colors that we want to allow users to

And export const color-picker, which is the actual function.

It will receive a caller, which is a string, and a non-change function.

As pops, it will receive the caller and the on-change properties.

The caller is a string and the on-change function is a function that returns

Then immediately return a div with a class name of flex, item center, and gap4.

Then for the popover trigger, we will render a simple caller component that

receives a caller and a wrapper property.

The caller component will be imported from the React-colorful component.

Let's see if the caller and on-click, and whether it's a wrapper or not.

So the wrapper is a boolean and the caller is a string.

And the on-click is a function that returns nothing and receives nothing.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript