🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

design-system-zeroz

Package Overview
Dependencies
Maintainers
1
Versions
199
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

design-system-zeroz

0.3.46
latest
npm
Version published
Weekly downloads
425
20.74%
Maintainers
1
Weekly downloads
 
Created
Source

Design System Zeroz

O Design System Zeroz é um conjunto de componentes reutilizáveis para construir interfaces de usuário consistentes e bonitas. Este pacote npm permite que você aproveite os componentes disponíveis em nossa biblioteca e os integre facilmente em seus projetos.

Storybook

Para visualizar todos os componentes e suas variantes, você pode acessar nosso Storybook. Lá você encontrará uma documentação detalhada de cada componente, bem como exemplos de uso e personalização.

Acesse o Storybook do Design System Zeroz.

Next.js

Comece criando um novo projeto Next.js usando create-next-app:

npx create-next-app@latest

Em seguida, serão solicitados os seguintes prompts:

1 What is your project named?  my-app
2 Would you like to use TypeScript?  No / Yes
3 Would you like to use ESLint?  No / Yes
4 Would you like to use Tailwind CSS?  No / Yes
5 Would you like to use `src/` directory?  No / Yes
6 Would you like to use App Router? (recommended)  No / Yes
7 Would you like to customize the default import alias (@/*)?  No / Yes

Adicionando as Cores da Marca

Para aplicar as cores da marca do Design System Zeroz em seus projetos, certifique-se de adicionar o atributo data-company com o valor "zeroz" à tag HTML em seus arquivos. Isso garantirá que os estilos correspondentes sejam aplicados corretamente.

Adicione o seguinte trecho à sua tag HTML:

<html lang="en" data-company="zeroz" />

Como Baixar

Para instalar o Design System Zeroz em seu projeto, você pode utilizar o npm ou o yarn.

npm

npm install design-system-zeroz @latest

yarn

yarn add design-system-zeroz @latest

Como Usar

Após a instalação, você pode importar os componentes diretamente em seus arquivos JavaScript ou TypeScript e começar a usá-los em seu projeto.

Exemplo de Uso

import React from "react";
import "design-system-zeroz/dist/index.esm.css";
import "design-system-zeroz/src/scss/tokens/tokens.scss";
import { Button } from "design-system-zeroz";

export default function Home() {
  return <Button size="md" label="Clique aqui!" variant="primary" />;
}

Lembre-se de importar "design-system-zeroz/src/scss/tokens/tokens.scss" e "design-system-zeroz/dist/index.esm.css" para ter as estilizações dos componentes.

Contribuindo

Fique à vontade para contribuir com o Design System Zeroz! Se você encontrar problemas, bugs ou tiver sugestões de melhorias, por favor, abra uma issue em nosso repositório no GitHub.

Licença

Este projeto é licenciado sob a Licença MIT. Consulte o arquivo LICENSE para obter mais detalhes.

Esperamos que o Design System Zeroz seja útil para o seu projeto. Se tiver alguma dúvida ou precisar de suporte, sinta-se à vontade para entrar em contato conosco.

Keywords

Design System

FAQs

Package last updated on 02 May 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

MCP Community Begins Work on Official MCP Metaregistry

Security News

MCP Community Begins Work on Official MCP Metaregistry

The MCP community is launching an official registry to standardize AI tool discovery and let agents dynamically find and install MCP servers.

By Sarah Gooding  -  May 09, 2025