Kitchen Sink

Explore all available components, styles, and design elements.

Custom Icons

Dynamic SVG icon loading from assets/icons directory. Simply add SVG files to the icons folder and reference them by name.

persona
astronaut
rocket
logo
profile
logout
project
workspace
settings

S3 Bucket Upload Demo

Upload files to private and public S3 buckets and see them displayed below.

Private Bucket Upload
Files uploaded to AWS_S3_BUCKET_NAME (private bucket)
Public Bucket Upload
Files uploaded to AWS_S3_Public_Bucket_Name (public bucket)

Calendar Demo

Explore how FullCalendar integrates with our design system using sample project events.

Event Types

Create recurring background events to experiment with FullCalendar's scheduling capabilities.

Project Reporting
Weekly • Monday 9:00 AMStarts Feb 23, 2026, 9:00 AMOngoing
Accounting
Weekly • Wednesday 2:00 PMStarts Feb 18, 2026, 2:00 PMOngoing

Nuxt Images

Examples of NuxtImg component with various configurations and responsive behavior.

Basic Image Examples

Logo Image

Rocketship Template Logo

Logo with fixed dimensions (200x200)

Apple Icon

Apple Icon

SVG icon with fixed dimensions (64x64)

Google Icon

Google Icon

SVG icon with fixed dimensions (64x64)

Responsive Images

Responsive Logo

Responsive Logo

Responsive logo with different sizes for mobile/desktop

Image with Loading States

Lazy Loading

Lazy Loaded Logo

Image with lazy loading enabled

Eager Loading

Eager Loaded Apple Icon

Image with eager loading (loads immediately)

Image with Custom Classes

Rounded Image

Rounded Logo

Image with rounded corners

Bordered Image

Bordered Google Icon

Image with custom border

Image in Cards

Logo in Card
Logo Card
Logo displayed in a Quasar card
Apple Icon in Card
Apple Icon Card
Apple icon displayed in a Quasar card
Google Icon in Card
Google Icon Card
Google icon displayed in a Quasar card

Individual Component Testing Routes

Click on any component below to test it in isolation on its own dedicated route:

EditableStatus FAQAccordion ItemShortcode KanbanCard ProjectAvatar ActivityFeed SelectionChecklist StatusComponent TagsComponent

UserAvatar

John Doe
John Doe
john.doe@example.com

UserAvatar Icon Only

Lisa Chen

UserAvatar With Slots

John Doe
John Doe
john.doe@example.com
Mike Johnson
Mike Johnson
mike.johnson@example.com
Lisa Chen
Lisa Chen
lisa.chen@example.com

ItemShortcodeTitle Component

ROC-TASK

ItemShortcodeTitle With High Priority

LAU-MILE
High Priority

ActionMenu Component

ActionMenu With Custom Class

EditableStatus Component

EditableStatusWithData Component

FAQAccordion Component

ItemShortcode Component

To Do

TaskShortcode Component

LAU-001

KanbanCard Component

AvatarComponent

AvatarComponent Icon Only

Rocketship

RecentActivityFeed Component

SelectionChecklist Component

StatusComponent

In Progress

StatusComponent Indicator Only

StatusComponent With Custom Classes

Pending

TagsComponent

TagsComponent With Custom Classes

urgent
frontend

Typography

Typography Scale

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body 1

Body 2

Caption

Overline

text-subtitle1
Subtitle 1
text-subtitle2
Subtitle 2
text-body1
Body 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
text-body2
Body 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque, possimus nihil molestias sapiente necessitatibus dolor saepe inventore, soluta id accusantium voluptas beatae.
text-caption
Caption text
text-overline
Overline

Font Weights

text-weight-thin
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
text-weight-light
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
text-weight-regular
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
text-weight-medium
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
text-weight-bold
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
text-weight-bolder
Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Font Family

Inter Font Family

Primary font family: 'Inter', sans-serif

Inter is loaded from Google Fonts with weights 400, 600, 700, and 800. Button font weight is set to 600 (semi-bold).

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

The quick brown fox jumps over the lazy dog.

Color Palette

⚠️ Color System Cleanup Required

Issues: Too many colors, duplicates, and poor naming conventions.

  • Exact duplicates: Priority Lowest = Graybrown, Priority Low = Dark Graybrown, Priority Medium = Yellow, Priority Highest = Red
  • Poor naming: Color names like "red", "blue" should be functional like "error-primary", "info-primary"
  • Too many similar grays: Multiple gray variants that could be consolidated

💡 Recommendation: Use functional naming (e.g., $error-primary instead of $red) for better maintainability and semantic meaning.

Brand Colors

Primary

$primary

#107bea

Secondary

$secondary

#243b55

Accent

$accent

#1976d2

Dark

$dark

#1d1d1d

Dark page

$dark-page

#121212

Semantic Colors

Positive

$positive

#63ba3b

Negative

$negative

#ef4444

Info

$info

#4cafe8

Warning

$warning

#f1cc59

Custom Colors

Soft black

$soft-black

#161b25

Soft gray

$soft-gray

#f6f7f9

Mid gray

$mid-gray

#6f7277

Graybrown

$graybrown

#8e8e8e

Darkgraybrown

$darkgraybrown

#656565

Border

$border

#e8ebed

Grey 13

$grey-13

#d1d5db

Grey 8

$grey-8

#6b7280

Blue petra 10

$blue-petra-10

#dbeafe

Priority Colors

Priority lowest

$priority-lowest

#8e8e8e

Priority low

$priority-low

#656565

Priority medium

$priority-medium

#f1cc59

Priority high

$priority-high

rgba(239, 68, 68, 0.8)

Priority highest

$priority-highest

#ef4444

Figma Named Colors

Yellow

$yellow

#f1cc59

Red

$red

#ef4444

Blue

$blue

#4cafe8

Green

$green

#63ba3b

Disable text

$disable-text

#b4b4b4

New grey

$new-grey

#f8f8f8

Brand Gradient System

Primary Brand Gradient

Gradient Start

var(--q-primary)

Gradient End

var(--q-secondary)

Gradient Variations

Diagonal Gradient (135deg)

background: linear-gradient(135deg, var(--q-primary) 0%, var(--q-secondary) 100%)

Horizontal Gradient

background: linear-gradient(to right, var(--q-primary) 0%, var(--q-secondary) 100%)

Vertical Gradient

background: linear-gradient(to bottom, var(--q-primary) 0%, var(--q-secondary) 100%)

Button Components

Button Colors

Primary

Secondary

Accent

Positive

Negative

Info

Warning

Dark

Button Sizes

Extra Small (xs)

Small (sm)

Medium (md)

Large (lg)

Extra Large (xl)

Button Styles

Standard

Rounded

Square

Button States

Normal

Loading

Disabled

Dense

Form Inputs

Text Inputs

Input Types

Input States

Select & Options

Checkboxes & Radio Buttons

Checkboxes

Radio Buttons

Textarea & File

Cards & Layout Components

Card Styles

Default Card

This is a default card with shadow and rounded corners.

Flat Card

This is a flat card without shadow or elevation.

Bordered Card

This is a bordered card with a visible border.

Flat Bordered

This is a flat card with border but no shadow.

Card Sections

Card Header

This card has a colored header section and a regular content section.

Card with Image

This card includes an image at the top and content below.

Layout Components

Separators

Content above separator

Content below separator

Content with spaced separator

Content with colored separator

Expansion Panel

Timeline

  • Today
    Event One
    This is the first event in our timeline.
  • Yesterday
    Event Two
    This is the second event with different color.
  • Last Week
    Event Three
    This is the third event in the timeline.

Spacing & Layout

Spacing Examples

Quasar Padding Classes:

q-pa-xs (4px)
q-pa-sm (8px)
q-pa-md (16px)
q-pa-lg (24px)
q-pa-xl (48px)

Quasar Margin Classes:

q-ma-xs (4px)
q-ma-sm (8px)
q-ma-md (16px)
q-ma-lg (24px)
q-ma-xl (48px)