New Components

One of the most exciting ways to contribute is by adding new components to Kibo UI. Maybe you have a component that you built in your app that you think would be useful for others – for example, a Maps widget, an advanced Date Range Picker, or something very specific like a Org Chart component. Here are some guidelines for contributing a new component:

Fit & Scope

First, consider whether the component fits the scope of Kibo UI. Kibo’s philosophy is to provide composable building blocks that cover common or important use-cases for modern apps. If your component is extremely niche, it might not be a great fit. On the other hand, if it provides substantial functionality that a lot of apps could use (and isn’t already provided by base shadcn/ui), it could be a perfect addition.

Design Consistency

Ensure the component can integrate with the existing design system. Use the same CSS variable themes from shadcn, and follow accessibility practices. For example, if you create a Color Picker (which Kibo UI actually includes), make sure it works in dark mode and is keyboard accessible, etc., similar to other components.

Documentation

When you add a component, also prepare documentation for it. This means a Markdown file in the docs site (or wherever documentation resides) with an overview of the component, installation instructions (npx kibo-ui add ...), a list of features, example usage code, and a props table. Look at existing component docs for a template. Good documentation ensures users can actually discover and use your component!

Testing & Quality

If possible, include tests for your component logic. At minimum, test it manually within the docs. Check different screen sizes (responsive behavior), and different scenarios (for instance, if it’s a form element, how does it behave uncontrolled vs controlled if applicable). We want to maintain a high quality bar so that any component in Kibo UI can be trusted in production.

When your new component PR is opened, maintainers might review and give feedback. Be open to making changes – code review is a positive process to maintain quality and consistency. Once merged, you’ve officially added a piece to Kibo UI! 🎊