Component Showcase
All 53 shadcn-vue components installed in this project
Typography
Styles for headings, paragraphs, lists, and inline text elements
Taxing Laughter: The Joke Tax Chronicles
Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day, his advisors came to him with a problem: the kingdom was running out of money.
The King's Plan
The king thought long and hard, and finally came up with a brilliant plan: he would tax the jokes in the kingdom.
"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
The Joke Tax
The king's subjects were not amused. They grumbled and complained, but the king was firm:
- 1st level of puns: 5 gold coins
- 2nd level of jokes: 10 gold coins
- 3rd level of one-liners: 20 gold coins
As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused to let the king's foolishness get him down: a court jester named Jokester.
Jokester's Revolt
Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester.
And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started laughing, they couldn't stop.
The People's Rebellion
The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the entire kingdom was in on the joke.
| King's Treasury | People's happiness |
|---|---|
| Empty | Overflowing |
| Modest | Satisfied |
| Full | Ecstatic |
The king, seeing how much happier his subjects were, googled for a cause. The moral of the story is: never underestimate the power of a good laugh and always be careful of bad ideas.
Basic Inputs & Controls
Buttons, inputs, toggles, and form primitives
Button
Trigger actions and events. Supports multiple variants and sizes.
Badge
Small status indicators and labels for categorization.
Avatar
User profile images with fallback initials.
Input
Standard text input field for forms and data entry.
Textarea
Multi-line text input for longer content.
Label
Accessible text labels for form controls.
Checkbox
Toggle individual options on or off.
Switch
Toggle control for binary on/off settings.
Slider
Select a numeric value by dragging a handle.
Toggle
A two-state button that can be toggled on or off.
Toggle Group
A group of toggles with single or multiple selection.
Radio Group
Select a single option from mutually exclusive choices.
Number Field
Numeric input with increment and decrement buttons.
Separator
Visual divider between content sections.
Skeleton
Animated placeholder shown while content is loading.
Progress
Displays completion status of a task.
Data Display
Cards, tables, calendars, and content containers
Card
Flexible container for grouping related content.
Daily Summary
March 8, 2026 -- Project overview
Table
Structured data display with header, body, and rows.
| Date | Order ID | Company | Quantity | Total ($) |
|---|---|---|---|---|
| 2026-03-08 | ORD-7712 | Acme Corp | 385 | 527.40 |
| 2026-03-07 | ORD-3301 | Globex | 412 | 601.15 |
| 2026-03-07 | ORD-9045 | Initech | 298 | 389.22 |
Accordion
Collapsible content sections. Supports single or multiple expanded items.
Tabs
Tabbed interface for switching between views.
Project-wide metrics overview with daily totals.
Alert
Informational banners with default and destructive variants.
Upload Complete
Processing Error
Alert Dialog
Modal confirmation that requires user acknowledgement.
Hover Card
Popover card that appears on hover.
Calendar
Date picker calendar with navigation.
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Range Calendar
Date range selector for picking start and end dates.
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Scroll Area
Custom scrollable container with styled scrollbar.
Breadcrumb
Navigation breadcrumb trail.
Pagination
Page navigation with prev/next and numbered items.
Stepper
Multi-step progress indicator.
Select your data file
Parse and verify format
Apply transformations
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.
Validation 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 metrics with gradient fill.
Line Chart
Same 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
Revenue by category.
Carousel
Embla-powered carousel with navigation arrows.
Project Dashboard
Track all your projects in one place
6 Integrations
React, Vue, Angular, Svelte, Solid, Qwik
Smart Alerts
10 automated notification rules
Analytics
Automated reporting and insights
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).