nocturna-ui

🦇 Nocturna UI

Primitivos góticos e brutalistas forjados para a web que não teme a escuridão.

A Nocturna UI é uma biblioteca de componentes React focada em interfaces de alto contraste e DX (Developer Experience) superior.

Na versão v0.1.0, apresentamos a System Props Engine e os Layout Primitives, eliminando a necessidade de arquivos CSS externos para a maioria dos casos de uso.

✨ Novidades da v0.1.0

• System Props Engine: Controle margens (m, p), cores (bg, color), tipografia e layout diretamente nas props dos componentes.
• Layout Primitives: Novos componentes Box, Stack, HStack, VStack, Grid e SimpleGrid.
• Polymorphic Components: Use a prop as para alterar a tag HTML semântica (ex: as="section", as="a") mantendo os estilos.
• Engine de Design Tokens: Integração profunda com tokens de espaçamento e cores do tema Cyber Goth.

🔮 Documentação & Playground

Explore o grimório digital com exemplos interativos:

👉 Acessar Documentação (Playground)

🌑 Instalação

npm install nocturna-ui

Exemplo Rápido

import { Button, Card, VStack, Text, Badge } from "nocturna-ui";

export const App = () => (
  <Card title="Status do Sistema" variant="secondary" w="350px">
    <VStack gap={4}>
      <Text color="zinc-400">Todos os sistemas operacionais.</Text>

      <HStack justify="between" w="full">
        <Badge variant="primary">v0.1.0</Badge>
        <Badge variant="secondary" styleType="solid">
          ONLINE
        </Badge>
      </HStack>

      <Button variant="accent" w="full" mt={4}>
        Executar Diagnóstico
      </Button>
    </VStack>
  </Card>
);

📜 Uso via CDN

Para prototipagem rápida sem bundlers:

<script src="https://unpkg.com/nocturna-ui@0.1.0/dist/index.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/nocturna-ui@0.1.0/dist/style.css" />

Veja o exemplo completo aqui.

🤝 Contribuição

Forks e Pull Requests são bem-vindos. Consulte o guia de contribuição para começar.

Licença ISC • Criado por Ruan Oliveira Sena