Playground Testing

This is a test page to see how the components look and behave in a real-world scenario. All components shown here are from the Shoelace library and have been imported using the Astrolace Astro integration.

Icon

Icon Button

Tooltip

Hello!
Hover me

Button

Hello!

Button Group (with a badge!)

Hello! Hello! Hello! 2

Alert (In Darkmode!)

Hello!

Animated Image

Avatar

Breadcrumb

Google GitHub Current Page

Card

Hello!

Carousel

Checkbox

Test Checkbox!

Color Picker

Copy Button

Details

Hello!

Test

Formatters

Format Bytes

Format Date

Format Number

Input

Menu

First Test Label Test Item 1 Test Item 2 Second Test Label Test Item 3

Dropdown

Hello!
Test Item 1 Test Item 2 Test Item 3

Select and Option

Test Option 1 Test Option 2 Test Option 3

Progress Bar & Ring


Qr Code

Radios, Radio Buttons, and Groups

Test Radio 1 Test Radio 2 Test Radio 3
Test Radio 1 Test Radio 2 Test Radio 3

Range

Rating

Relative Time

Shoelace 2 release date:

Resize Observer

Resize me!

Skeleton

None Sheen Pulse

Spinner

Split Panel

Start
End

Switch

Tab, Tab Panel, and Tab Group

General Custom Advanced Disabled General content Custom content Advanced content Disabled content

Tag

Primary Success Neutral Warning Danger

Textarea

Test Textarea
This is a test textarea
test

Tree and Tree Item

Item 1 Item 2 Item A Item B Item C Item 3

Visually Hidden

Hidden text

Dialog

Cancel New User