Sira-UI Test Experiments Playground

Colors

bw-50
bw-100
bw-200
bw-300
bw-400
bw-500
bw-600
bw-700
bw-800
bw-900
bw-1000
bw-1100
info-50
info-100
info-200
info-300
info-400
info-500
info-600
info-700
info-800
info-900
info-1000
info-1100
success-50
success-100
success-200
success-300
success-400
success-500
success-600
success-700
success-800
success-900
success-1000
success-1100
warn-50
warn-100
warn-200
warn-300
warn-400
warn-500
warn-600
warn-700
warn-800
warn-900
warn-1000
warn-1100
danger-50
danger-100
danger-200
danger-300
danger-400
danger-500
danger-600
danger-700
danger-800
danger-900
danger-1000
danger-1100

Button

Colors

Outline

Ghost

Light

Sizes

Group

Loading

Compact

Others

Avatar

Shape

avatar
avatar

Ring

avatar
avatar
avatar
avatar
avatar

Size

avatar
avatar
avatar
avatar
avatar

Group

avatar
avatar
avatar
avatar
avatar

Text

RV
RV
+000
Some Things Cool

Badge

Shape

badge
cornered
square

Solid

BW
info
success
warn
danger

Outline

BW
info
success
warn
danger

Light

BW
info
success
warn
danger

Size

size-xs
size-sm
size-md
size-lg
size-xl
size-xs
size-sm
size-md
size-lg
size-xl
size-xs
size-sm
size-md
size-lg
size-xl

Slot

Left Icon Badge

Input

Colors

Solid

Outline

Size

Slot

Username

Others

Loader

Type

Color

Size

Switch

Colors

bordered

ghost

Size

Shape

Disabled

Custom content

Tabs

Colors

Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3

ghost

Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3

bordered

Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3

ghost + bordered

Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3

pill

Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3

boxed

Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3

dir

Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3

Accordion

Colors

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo

Bordered

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo

Focusable

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo

Force open

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quo

Prompt

Type

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

Colors

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

Shape

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod

Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet

Size

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat aspernatur inventore eius deleniti reprehenderit? Numquam commodi totam mollitia quod
Lorem ipsum dolor sit amet

Breadcrumbs

Color

Force active

Checkbox

Color

Size

Colored

Disabled

Drawer

Position

Your content

Your content

Your content

Your content

Your content

Your content

Your content

Dropdown

Position

Profile Account settings Subscriptions
Profile Account settings Subscriptions
Profile Account settings Subscriptions
Profile Account settings Subscriptions
Profile Account settings Subscriptions
Profile Account settings Subscriptions
Profile Account settings Subscriptions
Profile Account settings Subscriptions
Profile Account settings Subscriptions
Profile Account settings Subscriptions
Profile Account settings Subscriptions
Profile Account settings Subscriptions

Color

Profile Account settings Subscriptions
Profile Account settings Subscriptions
Profile Account settings Subscriptions
Profile Account settings Subscriptions

Others

Profile Account settings Subscriptions
Profile Settings Account settings Subscriptions
Profile Settings Account settings Subscriptions
Profile Settings Account settings Subscriptions

Left Icon Item

Modal

Default

Radio

Color

Colored

Size

Select

Default

Solid

Ghost

Size

Other

Table

Color

Type

Left Icon

 Description Amount
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red
Type Where Description Amount
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red
Type Where Description Amount
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red
Type Where Description Amount
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red
Type Where Description Amount
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red

Bordered

Type Where Description Amount
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red
Type Where Description Amount
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red
Type Where Description Amount
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red
Type Where Description Amount
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red
Type Where Description Amount
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red

Zebra

Type Where Description Amount
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red
Type Where Description Amount
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red

Compact

Type Where Description Amount
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red
Type Where Description Amount
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red

Tooltip

Position

Color

Others

Link

Color

link link with bw link with info link with success link with warn link with danger

Ghost

link link with bw link with info link with success link with warn link with danger

Steps

horizontal

Register
Choose plan
Purchase
Receive Product
Register
Choose plan
Purchase
Receive Product

vertical

Register
Choose plan
Purchase
Receive Product
Register
Choose plan
Purchase
Receive Product

shape

Register
Choose plan
Purchase
Receive Product
Register
Choose plan
Purchase
Receive Product

Content

Checked
Empty
Star
circle
emoji

Divider

horizontal

Divider
Loading

vertical

Divider
Loading

Popover

Position

Popover content.
Popover content. With right place!
Popover content. With right place!
Popover content. With right place!
Popover content. With right place!
Popover content. With right place!
Popover content. With right place!
Popover content. With right place!
Popover content. With right place!
Popover content. With right place!
Popover content. With right place!
Popover content. With right place!
Popover content. With right place!

Color

Popover content.
Popover content.
Popover content.
Popover content.
Popover content.

Others

Popover content.
Popover content.

Progress

Color

Colored

Size

Indeterminate

Skeleton

Wave

Static

Pulse

Image

Layout