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
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!
Checkbox
Test Checkbox!
Color Picker
Copy Button
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:
Skeleton
None
Sheen
Pulse
Spinner
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
Tree and Tree Item
Item 1 Item 2
Item A Item B Item C Item 3
Visually Hidden
Hidden text
Dialog
Cancel New User