> Source: https://laravilt.com/docs/frontend/introduction

# Frontend

Vue 3 components and utilities for building admin panels.

## Technology Stack

| Technology | Description |
|------------|-------------|
| Vue 3 | Composition API with `<script setup>` |
| TypeScript | Full type safety |
| Inertia.js | SPA-like experience |
| Tailwind CSS | Utility-first styling |
| Reka UI | Accessible primitives |
| Lucide Icons | Icon set |

## Installation

```bash
npm install @laravilt/support
```

## Documentation

### UI Components

- [Introduction](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/introduction) - All UI components
- [Button](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/button) - Button variants
- [Dialog](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/dialog) - Modal dialogs
- [Sheet](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/sheet) - Slide-out panels
- [Card](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/card) - Content cards
- [Badge](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/badge) - Status badges
- [Alert](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/alert) - Alert messages
- [Avatar](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/avatar) - User avatars
- [Dropdown](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/dropdown) - Dropdown menus
- [Tabs](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/tabs) - Tab navigation
- [Tooltip](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/tooltip) - Tooltips

### Form Components

- [Introduction](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/forms/introduction) - Form components
- [Input](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/forms/input) - Text inputs
- [Select](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/forms/select) - Select dropdowns
- [Checkbox](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/forms/checkbox) - Checkboxes
- [Switch](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/forms/switch) - Toggle switches

### Chart Components

- [Introduction](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/charts/introduction) - Chart components
- [Line Chart](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/charts/line) - Line charts
- [Bar Chart](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/charts/bar) - Bar charts
- [Pie Chart](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/charts/pie) - Pie charts

## Quick Example

```vue
<script setup lang="ts">
import { Button } from '@laravilt/support'
import { Badge } from '@laravilt/support'
</script>

<template>
    <Button variant="primary">
        Click Me
        <Badge>New</Badge>
    </Button>
</template>
```

## Related

- [Styling](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/styling) - Tailwind CSS
- [Layouts](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/layouts) - Page layouts
- [Utilities](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/utilities) - Helper functions