@sysnet-cz/sysnet-gov-ui

Oficiální Vue 3 knihovna komponent pro ekosystém SYSNET, implementující Gov.cz Design System (GDS) 4.

🎨 O projektu

@sysnet-cz/sysnet-gov-ui je specializovaná knihovna Vue 3 komponent navržená pro vývoj moderních, přístupných a vizuálně konzistentních aplikací ve státní správě ČR.

Knihovna slouží jako Single Source of Truth pro vizuální styl všech projektů SYSNET (SEVESO, DCO, CRŽP atd.) a poskytuje typově bezpečné (TypeScript) prostředí pro rychlou tvorbu rozhraní.

Klíčové vlastnosti:

• Vue 3 native: Plná podpora Composition API a <script setup>.
• TypeScript First: Kompletní typové definice pro všechny komponenty a jejich props.
• GDS 4 Core: Postaveno na oficiálních Web Components design systému Gov.cz.
• Manažerské řízení vizuálu: Centrální správa design tokenů synchronizovaná s projektem sysnet-gov-django.

📚 Dokumentace

• 📈 Manažerské shrnutí — Strategické výhody sjednoceného UI.
• 🛠️ Technická specifikace — Stack, build proces a integrace.
• 💻 Vývojářská příručka — Použití komponent ve Vue aplikacích.
• ⚙️ Administrace a publikace — Správa NPM balíčku a CI/CD.
• 🧩 Katalog komponent — Interaktivní přehled prvků.

⚡ Rychlý start

1. Instalace

npm install @sysnet-cz/sysnet-gov-ui

2. Registrace v main.ts

import { createApp } from 'vue'
import App from './App.vue'
import GovUi from '@sysnet-cz/sysnet-gov-ui'
import '@sysnet-cz/sysnet-gov-ui/dist/style.css'

const app = createApp(App)
app.use(GovUi)
app.mount('#app')

3. Použití v komponentě

<template>
  <GovMasterLayout title="Portál občana">
    <GovHeading tag="h1">Vítejte</GovHeading>
    <GovButton variant="primary" @click="doSomething">
      Začít pracovat
    </GovButton>
  </GovMasterLayout>
</template>

🤝 Vývoj a podpora

• GitHub: SYSNET-CZ/sysnet-gov-ui
• NPM Org: @sysnet-cz
• Kontakt: [email protected]

© 2026 SYSNET s.r.o. | Standardizace UI státní správy.