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

# UI Components

Standalone Vue 3 components that can be used in any project.

## Installation

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

## Available Components

| Component | Description | Import |
|-----------|-------------|--------|
| Button | Button variants | `@laravilt/support` |
| Dialog | Modal dialogs | `@laravilt/support` |
| Sheet | Slide-out panels | `@laravilt/support` |
| Card | Content cards | `@laravilt/support` |
| Badge | Status badges | `@laravilt/support` |
| Alert | Alert messages | `@laravilt/support` |
| Avatar | User avatars | `@laravilt/support` |
| Dropdown | Dropdown menus | `@laravilt/support` |
| Tabs | Tab navigation | `@laravilt/support` |
| Tooltip | Tooltips | `@laravilt/support` |
| Collapsible | Collapsible content | `@laravilt/support` |
| Breadcrumb | Navigation breadcrumbs | `@laravilt/support` |
| Spinner | Loading spinners | `@laravilt/support` |

## Quick Import

```typescript
// Individual imports
import { Button } from '@laravilt/support'
import { Dialog, DialogContent, DialogTrigger } from '@laravilt/support'
import { Card, CardHeader, CardContent } from '@laravilt/support'

// Or import all
import * as UI from '@laravilt/support'
```

## Component Categories

### Feedback

- [Alert](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/alert) - Display messages
- [Badge](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/badge) - Status indicators
- [Spinner](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/spinner) - Loading states
- [Tooltip](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/tooltip) - Hover hints

### Layout

- [Card](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/card) - Content containers
- [Collapsible](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/collapsible) - Expandable content
- [Tabs](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/tabs) - Tab panels

### Overlays

- [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
- [Dropdown](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/dropdown) - Dropdown menus

### Navigation

- [Breadcrumb](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/breadcrumb) - Page location
- [Tabs](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/tabs) - Tab navigation

### Data Display

- [Avatar](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/avatar) - User images
- [Badge](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/badge) - Labels

## Related

- [Button](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/button) - Button component
- [Dialog](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/dialog) - Dialog component
- [Card](https://github.com/laravilt/laravilt/blob/HEAD/docs/frontend/ui/card) - Card component