https://github.com/dev-ley/design-system-alfabit

"Design System em construção com NextJs, Tailwind CSS e Storybook para componentes reutilizáveis."
https://github.com/dev-ley/design-system-alfabit

design-systems frontend nextjs reusable-components storybook tailwindcss typescript ui-components

Last synced: 4 days ago
JSON representation

"Design System em construção com NextJs, Tailwind CSS e Storybook para componentes reutilizáveis."

• Host: GitHub
• URL: https://github.com/dev-ley/design-system-alfabit
• Owner: dev-ley
• Created: 2024-11-19T15:01:28.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-11-19T15:27:26.000Z (3 months ago)
• Last Synced: 2024-12-14T02:36:54.997Z (about 2 months ago)
• Topics: design-systems, frontend, nextjs, reusable-components, storybook, tailwindcss, typescript, ui-components
• Language: TypeScript
• Homepage: https://design-system-alfabit-fa7b.vercel.app/
• Size: 3.5 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
NextJs: Eleve o nível da sua documentação no Storybook

# Alfabit

A Alfabit é uma inovadora empresa de tecnologia dedicada a fornecer soluções criativas e eficientes para seus clientes. Reconhecendo a importância do design consistente e intuitivo em todas as suas plataformas e produtos, a Alfabit decidiu investir em um design system de ponta.

## 🛠️ Instalação

```bash

$ npm install

$ //ou

$ yarn add

```

## 🔨 Projeto

O [Figma dessa aplicação você encontra aqui](https://www.figma.com/file/h86gUvqUXTKwgr6tVYinLT/React%3A-Design-System-com-Tailwind?type=design&node-id=0-1&t=GuaFV9cp30SS2di9-0).

## ✔️ Técnicas e tecnologias utilizadas

Se liga nessa lista de tudo que usamos nesse Projeto:

- `React`

- `Next js`

- `Tailwind CSS`

- `Storybook`

- `Class Variance Authority (cva)`

- `Headless UI`

- `classnames`

- `GitHub`

- `Figma`

- `Vercel`

E muito mais!

## 🛠️ Abrir e rodar o projeto

Após clonar ou baixar o projeto, instale as dependências, abra na sua IDE favorita (eu recomendo o VS Code) e digite no terminal `npm run storybook` e acesse a url mostrada no terminal.

## 📚 Mais informações

O design system da Alfabit é uma abordagem abrangente e estruturada que reúne diretrizes, padrões e componentes de design em um conjunto coeso. Essa iniciativa permite que a empresa crie produtos digitais com uma identidade visual unificada, oferecendo uma experiência do usuário excepcionalmente intuitiva e agradável.