Component Library

A showcase of all UI components based on Tailwind UI patterns, adapted for Commissio.

Buttons

Various button styles for different actions and contexts.

Variants

Sizes

States

Full Width

Badges

Status indicators and labels for categorization.

Colors

Gray Red Yellow Green Blue Indigo Purple Pink Brand

With Dot Indicator

Active Pending Declined

Shapes

Rounded Pill

Sizes

Small Medium Large

Avatars

User profile images with various sizes and states.

Sizes

With Initials

JD AB CK

Placeholder

With Status

Cards

Content containers for grouping related information.

Default Card

This is a default card with standard styling.

Elevated Card

This card has a shadow for elevation effect.

Outlined Card

This card has a border outline.

Filled Card

This card has a filled background.

Inputs

Text input fields with various states and addons.

Choose a unique username

Password must be at least 8 characters

https://
USD

Selects

Dropdown select fields for choosing options.

Current account status

Please select a category

Checkboxes

Checkbox inputs for boolean selections.

Get notified about new features and updates.

This option cannot be changed.

Toggles

Switch controls for on/off settings.

Enable notifications Receive push notifications for new messages.
Dark mode

Sizes

Small toggle
Medium toggle
Large toggle

Alerts

Feedback messages for user actions and system states.

Notifications

Toast-style notifications for transient messages.

New message

You have a new commission request from a client.

Successfully saved!

Your profile has been updated.

Payment failed

Please check your payment details and try again.

Modals

Dialog windows for focused interactions.

Confirm Action

Are you sure you want to perform this action? This cannot be undone.

Large Modal Example

This is a larger modal that can contain more content. It's useful for forms, detailed information, or complex interactions.

Additional content area

Empty States

Placeholder content for empty lists and sections.

No projects

Get started by creating a new project.

New Project

No messages

When you receive messages, they will appear here.

Tables

Data tables for displaying structured information.

Name Status Role Email
John Doe
 Active Artist [email protected]
JS
Jane Smith
 Pending Commissioner [email protected]
Anonymous User
 Inactive Viewer —