Skip to main content
The Design System Dashboard includes 16 Vue components organized using atomic design methodology. Each component is built with TypeScript and designed for reusability and composition.

​
Component Architecture

Components are organized into five categories based on their complexity and purpose:
  • Atoms - Basic building blocks (buttons, pills, cards)
  • Molecules - Simple component combinations (badges, dropdowns, modals)
  • Organisms - Complex UI patterns (status badges, danger modals)
  • Data Components - Data-specific components (headers, action buttons, uploads)
  • Layouts - Page structure components (sidebar, navbar, containers)

​
Atoms

Basic, indivisible UI elements that serve as the foundation of the design system.

Pill

Avatar badge with customizable colors, variants, and close functionality

Button Navigation

Navigation button with icon support and routing capabilities

Button Avatar Dropdown

Button with avatar and dropdown indicator for user menus

Card Inner

Basic card container with customizable classes and component types

​
Molecules

Combinations of atoms that form functional UI components.

Badge

Configurable badge with style variants and dynamic theming

Card

Full-featured card with header, body, and footer slots

Dropdown Avatar

User dropdown menu with profile information and action items

Modal

Flexible modal dialog with form support and customizable actions

​
Organisms

Complex components composed of multiple molecules and atoms.

Badge Status

Status badge with predefined states (TODO, IN_PROGRESS, FINISHED, etc.)

Modal Danger

Specialized modal for destructive actions with error styling

​
Data Components

Components designed to handle specific data operations and presentations.

Action Buttons

Primary and secondary action button group with flexible configuration

Card Header

Card header with title, subtitle, and action slot

Upload Avatar

Image upload component with preview for user avatars

​
Layouts

Structural components that define page layout and navigation.

Dashboard Container

Main dashboard layout with sidebar and panel structure

Navbar

Top navigation bar with search, links, and user menu

Sidebar

Collapsible sidebar navigation with logo and menu items

​
Usage Pattern

All components follow consistent patterns:
  • TypeScript Support - Full type definitions for props and emits
  • Slots - Flexible content insertion points
  • Events - Semantic event naming with on- prefix
  • Nuxt UI Integration - Built on top of Nuxt UI components
  • Tailwind CSS - Utility-first styling with customization options

​
Getting Started

To use any component in your Nuxt application: 
<template>
  <APill 
    label="John Doe" 
    color="primary" 
    @on-close="handleClose" 
  />
</template>
Explore individual component pages for detailed prop documentation, usage examples, and best practices.

Build docs developers (and LLMs) love

Get started for freeTalk to us