Appearance
Components
BaklaVue provides a comprehensive Vue 3 UI kit that brings the Baklava Design System to your Vue applications. Every component is fully typed, composable, and built with Vue 3 best practices—giving you a native, delightful development experience.
Why BaklaVue?
Each component wraps Baklava's battle-tested web components under the hood, so you get enterprise-grade accessibility, theming, and design consistency—with Vue-native APIs like v-model, slots, and reactive props.
Overview
| Category | Count | Purpose |
|---|---|---|
| Form | 9 | Inputs, selects, buttons, toggles, file upload, and date picking |
| Feedback | 7 | Alerts, badges, chips, tags, notifications, spinners, and skeleton loaders |
| Layout | 7 | Dialogs, drawers, dropdowns, tooltips, accordions, tabs, steppers |
| Navigation | 4 | Links, pagination, split buttons, scroll-to-top |
| Data | 3 | Tables, icons, and images |
31 components in total—ready to build beautiful, consistent interfaces.
Form Components
Build forms and collect user input with purpose-built components. All form components support v-model, validation states, and full TypeScript inference.
| Component | Description |
|---|---|
| Button | Primary, secondary, tertiary variants • Multiple kinds (default, neutral, success, danger) • Sizes, icons, loading state |
| Input | Text input with label, help text, validation • Types: text, email, password, number • Loading and disabled states |
| Checkbox | Single and grouped checkboxes • Indeterminate state • Custom slots and preferences |
| Radio | Radio button groups with full v-model support |
| Switch | Toggle switch for boolean settings • Multiple sizes |
| Select | Single and multi-select dropdowns • Options via props or slots |
| Textarea | Multi-line text input with validation |
| File Upload | Drag-and-drop file upload with validation, preview, and file list |
| Datepicker | Date selection with calendar popover |
Feedback Components
Communicate status, guide users, and show progress. These components help you build clear, responsive feedback patterns.
| Component | Description |
|---|---|
| Alert | Inline alerts for success, warning, error, info • Closable and programmatic control |
| Badge | Compact status indicators (e.g. counts, labels) |
| Banner | Full-width top-of-page banner for announcements • Closable with localStorage persistence |
| Chip | Notification badge on icons/avatars • Position, colors, sizes, standalone mode |
| Tag | Labels with optional close button • Selectable and customizable icons |
| Notification | Toast-style notifications • Use composable useNotification for programmatic control |
| Skeleton | Animated placeholder for content loading • Text, rectangle, circle variants |
| Spinner | Loading spinner with size and variant options |
Layout Components
Structure your UI with overlays, panels, and navigation patterns. Full control over open/close behavior and animations.
| Component | Description |
|---|---|
| Dialog | Modal dialogs with header, footer, caption • Programmatic open/close |
| Drawer | Side drawer for navigation or forms • Left/right placement |
| Dropdown | Dropdown menus with items, groups, and slots |
| Tooltip | Contextual tooltips with placement control |
| Accordion | Collapsible sections • Single or multiple open |
| Tab | Tab navigation with slot-based panels |
| Stepper | Step indicator for wizards and multi-step flows |
Navigation Components
Help users move through your app and trigger actions.
| Component | Description |
|---|---|
| Link | Internal and external links • Standalone and inline variants |
| Pagination | Page navigation with jumper and select controls |
| ScrollToTop | Floating button to scroll back to top • Configurable threshold and position |
| Split Button | Primary action with secondary dropdown options |
Data Display
Render data and assets with consistent styling.
| Component | Description |
|---|---|
| Table | Data tables with sorting, pagination, loading states • Custom cell slots |
| Icon | Icon component with size and color props |
| Image | Performance-focused image with lazy loading, skeleton placeholder, and error fallback |
Quick Start
Import and Use
Import components individually (recommended for tree-shaking):
vue
<template>
<div class="form-example">
<BvInput v-model="email" label="Email" type="email" />
<BvButton variant="primary" @click="handleSubmit">Submit</BvButton>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { BvButton, BvInput } from "@baklavue/ui";
const email = ref("");
const handleSubmit = () => {
console.log("Submitted:", email.value);
};
</script>Or import everything:
typescript
import * as BaklaVue from "@baklavue/ui";TypeScript
All components ship with full type definitions. Use inferred props or import types:
typescript
import type { ButtonProps } from "@baklavue/ui";
const props: ButtonProps = {
variant: "primary",
size: "medium",
};Next Steps
- Browse components — Each component has examples, API docs, and live demos
- API Reference — Full programmatic API
- Getting Started — Project setup and configuration
- Design Tokens — Customize colors, spacing, typography