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

# Frontend Documentation

Vue 3 components for building admin panels with Laravilt.

## Technology Stack

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

## Installation

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

---

## Documentation

### [UI Components](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/introduction)

Standalone UI components for any Vue project.

| Component | Description |
|-----------|-------------|
| [Button](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/button) | Button variants and sizes |
| [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) | Hover tooltips |

### [Form Components](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/forms/introduction)

Form input components with validation.

| Component | Description |
|-----------|-------------|
| [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](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/charts/introduction)

Dashboard chart components.

| Component | Description |
|-----------|-------------|
| LineChart | Line/area charts |
| BarChart | Bar charts |
| PieChart | Pie/doughnut charts |
| StatsCard | Statistics cards |

---

## Quick Start

### Import Components

```typescript
// UI Components
import { Button, Dialog, Card, Badge } from '@laravilt/support'

// Form Components
import { Input, Select, Checkbox, Switch } from '@laravilt/support'

// Chart Components
import { LineChart, BarChart, StatsCard } from '@laravilt/schemas'
```

### Example Page

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { Card, CardHeader, CardTitle, CardContent } from '@laravilt/support'
import { Button } from '@laravilt/support'
import { Input, Label } from '@laravilt/support'

const name = ref('')
</script>

<template>
    <Card>
        <CardHeader>
            <CardTitle>Create User</CardTitle>
        </CardHeader>
        <CardContent>
            <form class="space-y-4">
                <div class="grid gap-2">
                    <Label>Name</Label>
                    <Input v-model="name" placeholder="Enter name" />
                </div>
                <Button type="submit">Create</Button>
            </form>
        </CardContent>
    </Card>
</template>
```

---

## Vue Package Mapping

| PHP Package | Vue Package |
|-------------|-------------|
| `laravilt/forms` | `@laravilt/forms` |
| `laravilt/tables` | `@laravilt/tables` |
| `laravilt/schemas` | `@laravilt/schemas` |
| `laravilt/widgets` | `@laravilt/widgets` |
| `laravilt/infolists` | `@laravilt/infolists` |
| `laravilt/notifications` | `@laravilt/notifications` |
| `laravilt/actions` | `@laravilt/actions` |
| `laravilt/support` | `@laravilt/support` |

---

## Related Documentation

- [Introduction](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/introduction) - Frontend overview
- [Styling](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/styling) - Tailwind CSS configuration
- [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
- [App Components](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/components) - Application components (NavMain, Page, Form, Table)

## Support

- [Discord Community](https://discord.gg/gyRhbVUXEZ)
- [GitHub Issues](https://github.com/laravilt/laravilt/issues)