https://github.com/andersondev96/05-design-system
Design System utilizando React.js, abordando elementos essenciais, como cores, tipografia, botões e muito mais
https://github.com/andersondev96/05-design-system
design-system radix-ui react storybook
Last synced: 10 months ago
JSON representation
Design System utilizando React.js, abordando elementos essenciais, como cores, tipografia, botões e muito mais
- Host: GitHub
- URL: https://github.com/andersondev96/05-design-system
- Owner: andersondev96
- Created: 2024-10-22T00:21:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-22T18:59:39.000Z (over 1 year ago)
- Last Synced: 2025-06-01T09:32:59.026Z (about 1 year ago)
- Topics: design-system, radix-ui, react, storybook
- Language: TypeScript
- Homepage: https://andersondev96.github.io/05-design-system
- Size: 2.57 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Design System - StoryBook
Neste projeto é criado um Design System utilizando React.js, abordando elementos essenciais, como cores, tipografia, botões e muito mais. A documentação é apresentada no **Storybook**, e o sistema está disponível como um pacote **npm**, permitindo a sua integração em qualquer projeto front-end.
🔗 Link do projeto: [Design System - Storybook](https://andersondev96.github.io/05-design-system)
---
### 📌 Índice
- [💻 Capturas de tela](#-capturas-de-tela)
- [🚀 Componentes](#-componentes)
- [🧑💻 Tecnologias utilizadas](#-tecnologias-utilizadas)
- [🎨 Layout do projeto](#-layout-do-projeto)
- [⚙ Como executar o projeto](#-como-executar-o-projeto)
- [🌍 Como utilizar os componentes](#-como-utilizar-os-componentes)
- [🤝 Como contribuir](#-como-contribuir)
- [👥 Autor](#-autor)
## 💻 Capturas de tela
---
# 🚀 Componentes
- [ ] Text
- [ ] Heading
- [ ] Box / Card
- [ ] Button
- [ ] TextInput
- [ ] Textarea
- [ ] Checkbox
- [ ] Avatar
- [ ] MultiStep
- [ ] Toast
- [ ] Tooltip
---
## 🧑💻 Tecnologias utilizadas
Ao longo do desenvolvimento do projeto foram utilizadas as seguintes tecnologias:
[](https://storybook.js.org/)
[](https://www.typescriptlang.org/)
[](https://react.dev/)
[](https://www.radix-ui.com/)
---
## 🎨 Layout do projeto
Confira o layout do projeto no Figma.
- [Layout do projeto](https://www.figma.com/design/NYfrAhWNH0cyrUXjBt2XJL/Ignite-Call?node-id=0-1&t=flsUTrlo4XcKR8eD-1)
## ⚙ Como executar o projeto
Siga os seguintes passos para executar o projeto localmente:
1. Para executar o projeto, primeiro clone esse repositório:
```
git clone https://github.com/andersondev96/05-design-system
```
2. Acesse a pasta *05-design-system*:
```
cd 05-design-system
```
3. Instale as dependências:
```
npm install
```
4. Execute o projeto:
```
npm run dev
```
A aplicação está disponível em: [http://localhost:6006](http://localhost:6006)
## 🌍 Como utilizar os componentes
Para utilizar os componentes em seu projeto, siga os passos abaixo:
1. Acesse o pacote no **npm**: [@anderson-ignite-ui](https://www.npmjs.com/package/@anderson-ignite-ui/react)
2. Instale a biblioteca no seu projeto:
```
npm i @anderson-ignite-ui/react
```
3. Importe e utilize os componentes em seu código. Veja o exemplo do componente ``.
```ts
import { Button } from '@anderson-ignite-ui/react';
Send
```
> Consulte a documentação completa do projeto para mais detalhes sobre utilizar outros componentes.
## 🤝 Como contribuir
1. Faça um fork do repositório.
2. Crie uma nova branch com as suas alterações:
```
git checkout -b my-feature
```
3. Salve as suas alterações e crie uma mensagem de commit, dizendo o que você fez:
```
git commit -m "feature: My new feature"
```
4. Envie as suas alterações:
```
git push origin my-feature
```
## 👥 Autor
**Anderson Fernandes Ferreira**
[](https://instagram.com/anderson_ff13)
[](mailto:andersonfferreira96@gmail.com.br)
[](https://www.linkedin.com/in/anderson-fernandes96/)