Design System
Design System
Design System
Design System
bg-gray-50
bg-gray-100
bg-gray-200
bg-gray-300
bg-gray-400
bg-gray-500
bg-gray-600
bg-gray-700
bg-gray-800
bg-gray-900
bg-primary
bg-primary-100
bg-primary-200
bg-primary-300
bg-primary-400
bg-primary-500
bg-primary-600
bg-primary-700
bg-primary-800
bg-primary-900
bg-primary-950
Classes like oled:bg-oled or oled:bg-oled-200 can be used. The standard classes can also be used for oled.
bg-oled
bg-oled-100
bg-oled-200
bg-oled-300
bg-oled-400
bg-oled-500
bg-oled-600
Classes and styles
Click any buttons to increment the count
Buttons
Count: 0
The classes are custom made
Normal Buttons
Button Icons
Icon buttons with different styles:
<button class="btn icon-left btn-primary">
<Icon name="akar-icons:arrow-left" class="size-6" />
Button
</button>
<button class="btn icon-right btn-primary">
Button
<Icon name="akar-icons:arrow-right" class="size-6" />
</button>
btn
btn btn-primary
btn btn-secondary
btn btn-success
btn btn-danger
btn btn-warning
btn btn-info
btn btn-light
btn btn-dark
Icons
We use Nuxt icons
<button class="btn btn-icon">
<Icon name="akar-icons:arrow-left" class="size-6" />
</button>
Components
Buttons
Modal
Toast
Media Viewer
Color Picker
Live Preview
v-model Value
{
"r": 21,
"g": 128,
"b": 251,
"a": 1
}Separated media viewer
Service Cards
Service 1
This is a description
Read More
Service 2
This is a description
Read More
Service Dropdown
Select a Service
Please select a service from the list.
Widgets
Regular
41
This is a description for the regular widget.
Toggle Widget
This is a description for the toggle widget.
Disabled Toggle Widget
Card Action
This is a description for the card action widget.
Slot Widget
Custom content can be placed here.
UI Tags
Code puncher
Message Box
This is a comment message box.
This is a comment message box.
This is a comment message box.
24 Hour Time Line
Date and Time picker
Selected: Thu Dec 11 2025 12:14:59 GMT+0100 (Central European Standard Time)
Stripe
Logs
Repair created
Created on: 12/11/2025, 12:00:00 AM
Received
Created on: 12/11/2025, 12:00:00 AM
Diagnosing
Created on: 12/11/2025, 12:00:00 AM
Diagnosed issue
Part ordered
System
No additional details provided.
Admin User
Added 3 images.
Drag and drop
Drag and drop files here or click to select
Drag & drop files here or browse
0 files
Drag and drop files here or click to select
Drag & drop files here or browse
0 files
Multiple files allowed
Drag and drop files here or click to select
Drag & drop files here or browse
0 files
Badges
Repair
Statuses:
Priorities:
Urgencies:
Backup Statuses:
Parts
Stock Statuses:
Condition Statuses:
User
Loading animations
Expandable Card
Graph
Widget
Card designs
Base styled card
Card Title
This is a simple card description to showcase the base styled card design.
Basic Card
Profile Card
ITGOIT Card
Additional content can go here.
Tabs
Tabs Location
UI Style
Tabs Current Style
Content for Tab 1
This is the content area for Tab 1.
Content for Tab 1
This is the content area for Tab 1.
Data Display Handlers
No data display components have been created yet.
Other
UA parser
Toggle User Agent
IP Address Fetcher
Toggle IP Address