Interactive demos and documentation for VitePress components. This page serves as the inventory and entry point for all custom and third-party components.
Components built specifically for this project, inspired by Nuxt UI patterns.
Pre-built accessible components from shadcn-vue.
Currently installed and available for use:
| Component | Import | Use Case |
|---|---|---|
| Badge | @/components/ui/badge | Status indicators, tags |
| Button | @/components/ui/button | Actions, CTAs, links |
| Card | @/components/ui/card | Content containers (Card, CardHeader, CardTitle, CardContent, CardFooter) |
| Input | @/components/ui/input | Text input fields |
| Select | @/components/ui/select | Dropdown selection (Select, SelectTrigger, SelectContent, SelectItem, etc.) |
Key components available via pnpm dlx shadcn-vue@latest add <name>:
| Component | Purpose | Priority |
|---|---|---|
dialog | Modal dialogs, confirmations | High |
accordion | Collapsible content sections | High |
tabs | Tabbed content organization | High |
table | Data tables with sorting | Medium |
dropdown-menu | Context menus, action menus | Medium |
tooltip | Hover information | Medium |
alert | Alert messages | Medium |
avatar | User/author avatars | Low |
breadcrumb | Navigation breadcrumbs | Low |
collapsible | Single collapsible section | Low |
popover | Floating content panels | Low |
sheet | Side panel overlays | Low |
skeleton | Loading states (we have custom) | - |
toast / sonner | Notifications | Low |
accordion, alert, alert-dialog, aspect-ratio, avatar, badge, breadcrumb, button, button-group, calendar, card, carousel, checkbox, collapsible, combobox, command, context-menu, data-table, dialog, drawer, dropdown-menu, form, hover-card, input, label, menubar, navigation-menu, number-field, pagination, pin-input, popover, progress, radio-group, range-calendar, resizable, scroll-area, select, separator, sheet, skeleton, slider, sonner, switch, table, tabs, tags-input, textarea, toast, toggle, toggle-group, tooltip
Reusable logic extracted into composables:
| Composable | Purpose | Tests |
|---|---|---|
useContentDetail | Metadata formatting, URL building for detail pages | ✓ |
useFilterOptions | Extract unique filter options from content | ✓ |
useFuzzySearch | Fuzzy text matching with Fuse.js | ✓ |
| Component | Category | Demo |
|---|---|---|
| PageSection | Layout | /test-page-section |
| FeatureItem | Layout | /test-page-section |
| FeatureList | Layout | /test-page-section |
| Skeleton | Layout | /test-page-section |
| Placeholder | Layout | /test-page-section |
| LogoGrid | Display | /test-logos |
| LogoMarquee | Display | /test-logos |
| BrandIcon | Display | /icon-test |
| ContentCard | Content | /content/ |
| ContentFilters | Content | /content/ |
| ContentDetail | Content | /content/ |
| ContentHero | Content | - |
| PillarBadge | Content | /content/ |
| ActionButtons | Content | - |
| FilterSelect | Content | - |
| MetadataPill | Content | - |
| MetadataStrip | Content | - |
| File | Purpose |
|---|---|
lib/utils.ts | cn() class merging utility |
lib/metadata.ts | Metadata building helpers |
lib/loader-utils.ts | Pocketbase data loading utilities |
logos/types.ts | Shared LogoItem interface |
logos/LogoItemRenderer.vue | Shared logo rendering |
Components to build (inspired by Nuxt UI):
| Component | Purpose | Status |
|---|---|---|
| BlogPost | Blog card with image, date, authors | TODO |
| BlogPosts | Grid wrapper for blog posts | TODO |
| Kbd | Keyboard shortcut display | TODO |
| User | Author avatar + name | TODO |
