https://github.com/jefferson1104/design-system-lab-reactjs
This project is a design system, where I developed a layout in the Figma tool using some UI/UX practices. In the development of the application I used React.js as the main library and storybook.
https://github.com/jefferson1104/design-system-lab-reactjs
radix-ui reactjs storybook tailwindcss typescript vite
Last synced: about 2 months ago
JSON representation
This project is a design system, where I developed a layout in the Figma tool using some UI/UX practices. In the development of the application I used React.js as the main library and storybook.
- Host: GitHub
- URL: https://github.com/jefferson1104/design-system-lab-reactjs
- Owner: jefferson1104
- Created: 2022-10-17T02:44:40.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-03T17:54:43.000Z (over 2 years ago)
- Last Synced: 2025-03-01T00:12:32.977Z (10 months ago)
- Topics: radix-ui, reactjs, storybook, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage: https://jefferson1104.github.io/design-system-lab-reactjs/
- Size: 6.11 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Design System with React.js
### About project
This project is a design system, where I developed a layout in the **Figma** tool using some **UI/UX** practices. In the development of the application I used **React.js** as the main library and **storybook**, I also used **TailWind CSS** which is a CSS structure based on utilities with several classes to create any design. Another important and interesting library I used was **Radix UI**, with primitive, accessible and unstyled components to create high quality design systems.
### Run project
```bash
# Clone this repository
$ git clone https://github.com/jefferson1104/design-system-lab-reactjs.git
# Access the project folder
$ cd design-system-lab-reactjs
# Install dependencies
$ yarn install
# Run storybook
$ yarn storybook
# Run page example
$ yarn dev
```
### Notes
- [Figma project](https://www.figma.com/file/vIrOIaV598GdhrAOoFnbZE/Ignite-Lab-Design-System)
- [notes on library configurations and installations](NOTES.md)
### Screenshots
