This document outlines the process of contributing a new component to Chakra UI, the things we look for in your solution and how to get your component into the Chakra UI’s core codebase.

Here’s a quick overview of the steps:

• Research existing solutions deeply
• Create an RFC for the component
• Present progress: (Video format works better)
• Create the UI design for the component in Figma
• Present progress: (Video format works better)
• Create and present first prototype of component
• Present progress: (Video format works better)
• Accessibility considerations and testing
• Theming considerations (variants, parts, etc)
• Form considerations
• Present progress: (Video format works better)
• Scaffold package in Chakra UI
• Upon approval, create PR for review
• Write tests, documentation and stories for the component

Recommended structure

• use-select.ts: The react hook that describes the logic for the select component. It should be headless (not include UI style properties) and return the props needed to build a custom select.