Maka UI

Appearance

Primeiros passos ​

Maka UI é a biblioteca de componentes oficial do HalfByte Design System, construída com Vue 3, Panda CSS e Ark UI.

Instalação ​

bash
# npm
npm install @halfbyte/maka

# bun
bun add @halfbyte/maka

# pnpm
pnpm add @halfbyte/maka

Pré-requisito: A lib é publicada no GitHub Packages (@halfbyte). Configure o .npmrc do seu projeto:

@halfbyte:registry=https://npm.pkg.github.com

Configuração ​

Importe os estilos uma única vez no entry point da sua aplicação:

ts
// main.ts
import { createApp } from 'vue'
import '@halfbyte/maka/styles'
import App from './App.vue'

createApp(App).mount('#app')

Fontes ​

Maka UI usa Space Grotesk (display) e Plus Jakarta Sans (corpo). Adicione ao seu index.html:

html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
  rel="stylesheet"
/>

Uso básico ​

Importe os componentes diretamente — tree-shakeable por padrão:

vue
<script setup lang="ts">
import { Button, Input, Badge } from '@halfbyte/maka'
</script>

<template>
  <Input label="Nome" placeholder="Digite seu nome..." />
  <Button variant="primary">Enviar</Button>
  <Badge variant="blue">Novo</Badge>
</template>

Próximos passos ​