An example of a Polymorphic React Component Library with TypeScript & Tailwind CSS.

🚧🚧🚧 This repository is under development. 🚧🚧🚧

Technologies

• React
• TypeScript
• Tailwind CSS
• Vite
• Storybook

Key points:

Badge as an a tag?

We can do that through Polymorphism. Polymorphism stands for "multiple forms". In our case, we want to render the Badge into multiple forms - a tag, div, etc.

We can do that with:

• as prop - allows us to replace rendered HTML elements in a React component from the outside by passing them in as props

• TypeScript - to define the needed types and allowed props based on the as prop

Styling?

• Theme Provider => cleaner templates

Good Practices:

• Multiple props over Single - use multiple props for defining the outlook of a component
• Documentation + Examples