Documentation

Getting Started

Learn how to install and use Ztana components in your project.

Installation

Install the core package:

pnpm add @ztana/core

Or using npm:

npm install @ztana/core

Framework-Specific Packages

For framework-specific wrappers with better DX:

React

pnpm add @ztana/react

Vue

pnpm add @ztana/vue

Svelte

pnpm add @ztana/svelte

Usage

Import the auto-init script to automatically register all components:

<script type="module">
  import '@ztana/core/auto-init';
</script>

<z-button variant="primary">Click me</z-button>

Import components from the React package:

import { ZButton } from '@ztana/react';

function App() {
  return <ZButton variant="primary">Click me</ZButton>;
}

Import components from the Vue package:

<script setup>
import { ZButton } from '@ztana/vue';
</script>

<template>
  <ZButton variant="primary">Click me</ZButton>
</template>

Use the Vite plugin for automatic setup:

// astro.config.mjs
import ztana from '@ztana/vite';

export default defineConfig({
  integrations: [vue()],
  vite: {
    plugins: [ztana()]
  }
});

Theming

Create a ztana.theme.ts file in your project root:

// ztana.theme.ts
export default {
  brand: {
    primary: '#6366f1',
    secondary: '#8b5cf6',
    accent: '#ec4899',
  },
  typography: {
    fontFamily: 'Inter, system-ui, sans-serif',
  },
};

Or override CSS variables directly:

:root {
  --ztana-color-primary: #6366f1;
  --ztana-color-secondary: #8b5cf6;
  --ztana-font-family-sans: 'Inter', sans-serif;
}

Next Steps

Browse Components

View on GitHub

Tab 1 Content

Tab 2 Content

Tab 3 Content