antoniogoeminne/browk-ui-kit

Browk UI KIT - This code is about a design system with ui components to a website. 🎨

Welcome to this code! Here, I've brought a design system 🎨 from Figma to life. 🧟

Features

In this project, I've utilized these tools ⛏️:

• 🏎️ Next.js - Fast by default, with configurations optimized for performance (with the App Directory).
• 💅 Tailwind CSS - A utility-first CSS framework for rapid UI development.
• ✨ ESLint and Prettier - For clean, consistent, and error-free code.
• 🛠️ TypeScript - For type safety.
• 🚀 Vercel - To deploy the project.
• 💯 Perfect Lighthouse score - Because performance matters.
• 🧪 Jest and React Testing Library - For rock-solid unit and integration tests.
• 📖 Storybook - Create, test, and showcase your components.
• 🍝 Absolute imports - No more spaghetti imports.
• 🎨 Radix UI - Headless UI components for endless customization.
• 🟪 CVA - Create a consistent, reusable, and atomic design system.

How to navigate this project

You can navigate to src/ui, where all the components, their tests, and stories are located.

If I had more time, I would change this

• There is an issue with Radix UI, and accessibility is at 92% in Lighthouse. While this is a good number, replacing buttons with normal radio and switches could achieve a 100% score.
• I'd like to create some examples using the components to better showcase them.

browk-ui-kit's Issues

setup initial