Витрина на компонентите
Всички 53 shadcn-vue компонента, инсталирани в този проект
Основни полета и контроли
Бутони, полета, превключватели и примитиви за форми
Button
Задейства действия и събития. Поддържа множество варианти и размери.
Badge
Малки индикатори за статус и етикети за категоризация.
Avatar
Профилни изображения на потребители с инициали при липса.
Input
Стандартно текстово поле за форми и въвеждане на данни.
Textarea
Многоредово текстово поле за по-дълго съдържание.
Label
Достъпни текстови етикети за контроли във форми.
Checkbox
Включване или изключване на отделни опции.
Switch
Превключвател за двоични настройки вкл./изкл.
Slider
Изберете числова стойност чрез плъзгане на манипулатора.
Toggle
Бутон с две състояния, който може да се включва или изключва.
Toggle Group
Група превключватели с единичен или множествен избор.
Radio Group
Изберете една опция от взаимно изключващи се възможности.
Number Field
Числово поле с бутони за увеличаване и намаляване.
Separator
Визуален разделител между секции със съдържание.
Skeleton
Анимиран заместител, показван докато съдържанието се зарежда.
Progress
Показва статуса на изпълнение на дадена задача.
Показване на данни
Карти, таблици, календари и контейнери за съдържание
Card
Гъвкав контейнер за групиране на свързано съдържание.
Дневна справка за гориво
8 март 2026 -- Преглед на автопарка
Table
Структурирано показване на данни със заглавие, тяло и редове. Кликнете заглавие на колона, за да сортирате.
| 2026-03-08 | CB 7712 KA | AS24 | 385.2 | 527.40 |
| 2026-03-07 | CB 3301 PM | OMV | 412.8 | 601.15 |
| 2026-03-07 | CB 9045 XH | Lukoil BG | 298.0 | 389.22 |
Последни транзакции за гориво -- март 2026
Accordion
Свиваеми секции със съдържание. Поддържа единичен или множествен разгънат елемент.
Tabs
Интерфейс с раздели за превключване между изгледи.
Преглед на разхода на гориво за целия автопарк с дневни суми.
Alert
Информационни банери със стандартен и деструктивен вариант.
Качването завърши
Грешка при обработка
Alert Dialog
Модално потвърждение, което изисква потвърждение от потребителя.
Hover Card
Изскачаща карта, която се появява при посочване.
Calendar
Календар за избор на дата с навигация.
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
30 | 31 | 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 1 | 2 | 3 |
Range Calendar
Селектор за период за избор на начална и крайна дата.
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
30 | 31 | 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 1 | 2 | 3 |
Scroll Area
Персонализиран скролируем контейнер със стилизиран скролбар.
Breadcrumb
Навигационна пътека от трохи.
Pagination
Page navigation with prev/next and numbered items.
Stepper
Multi-step progress indicator.
Select provider CSV/XLSX
Parse and check columns
Apply rules engine
Tags Input
Multi-value input for adding and removing tags.
Pin Input
Segmented OTP/PIN code input.
Overlays & Navigation
Dialogs, menus, popovers, and selection components
Dialog
A modal window over page content with overlay.
Drawer
Panel that slides up from the bottom.
Sheet
Panel that slides from screen edge. Supports all 4 sides.
Dropdown Menu
Menu with items, separators, labels, and keyboard shortcuts.
Context Menu
Menu triggered by right-clicking an element.
Right-click hereMenubar
Horizontal menu bar with dropdown sub-menus.
Popover
Floating panel adjacent to the trigger element.
Tooltip
Small floating label on hover for additional context.
Command
Searchable command palette for quick actions.
Combobox
Searchable dropdown with selectable options.
Select
Native-like dropdown with grouped options.
Collapsible
Expandable/collapsible section.
Anomaly Rules (3 active)
Sonner (Toast Notifications)
Lightweight toast notifications. toast() is auto-imported.
Charts & Visualization
Area, line, bar, donut charts, carousel, and resizable panels
Area Chart
Monthly fuel consumption with gradient fill.
Line Chart
Same fuel data rendered as lines.
Bar Chart -- Grouped
Grouped bar comparison per month.
Bar Chart -- Stacked
Stacked bars to show total volume per month.
Donut Chart
Fuel spend by provider.
Carousel
Embla-powered carousel with navigation arrows.
Fleet Overview
270 trucks across Europe
6 Fuel Providers
AS24, Q8, OMV, Shell, Lukoil, UTA
Anomaly Detection
10 automated detection rules
Cost Savings
Automated VAT & excise deduction
Resizable Panels
Drag-to-resize layout with grip handle.
Custom Layout Components
App-level components (not rendered inline -- depend on auth state).
Header.vue
Sticky app header with logo, nav links, auth-aware profile dropdown, mobile hamburger via Sheet.
Footer.vue
Four-column footer with branding, links, and newsletter subscribe form.
ProfileAvatar.vue
Circular avatar with upload overlay. Props: path, size. Uploads to Supabase storage (2MB max).