https://github.com/antoniogoeminne/browk-ui-kit

Browk UI KIT - This code is about a design system with ui components to a website. 🎨
https://github.com/antoniogoeminne/browk-ui-kit

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/antoniogoeminne/browk-ui-kit
• Owner: antonioGoeminne
• Created: 2024-01-31T19:58:40.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-03-08T13:15:23.000Z (8 months ago)
• Last Synced: 2024-03-08T14:33:36.165Z (8 months ago)
• Language: TypeScript
• Homepage: https://browk-ui-kit-rho.vercel.app
• Size: 939 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
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](https://nextjs.org/)** - Fast by default, with configurations optimized for performance (with the **App Directory**).

- 💅 **[Tailwind CSS](https://tailwindcss.com/)** - A utility-first CSS framework for rapid UI development.

- ✨ **[ESLint](https://eslint.org/)** and **[Prettier](https://prettier.io/)** - For clean, consistent, and error-free code.

- 🛠️ **[TypeScript](https://www.typescriptlang.org/)** - For type safety.

- 🚀 **[Vercel](https://vercel.com)** - To deploy the project.

- 💯 **Perfect Lighthouse score** - Because performance matters.

- 🧪 **[Jest](https://jestjs.io/)** and **[React Testing Library](https://testing-library.com/react)** - For rock-solid unit and integration tests.

- 📖 **[Storybook](https://storybook.js.org/)** - Create, test, and showcase your components.

- 🍝 **[Absolute imports](https://nextjs.org/docs/advanced-features/module-path-aliases)** - No more spaghetti imports.

- 🎨 **[Radix UI](https://www.radix-ui.com/)** - Headless UI components for endless customization.

- 🟪 **[CVA](http://cva.style/)** - 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.