Skip to main content Design tokens Components Style utilities

Placer Toolkit

The go‐to web component library for the web! 🛠️

  • Works with any framework you like 🧩
  • Works with CDNs 🚛
  • Fully customisable with CSS 🎨
  • Full dark mode support 🌛
  • Built with accessibility in mind ♿️
  • Open‐source 🔓
  • With localisation and more coming soon! 🔮
Get started View on GitHub
Animation Avatar Badge Button Button Group Callout Card Checkbox Comparer Copy Button Details Dialog Divider Drawer Dropdown Icon Icon Button Input Menu QR Code Radio Group Rating Resize Observer Select Spinner Switch Tab Group Tag Tooltip
Primary Success Neutral Warning Danger
Default Primary Success Warning Danger Text
Left Centre Right This is super informative
You can tell by how pretty the callout is. A placeholder image with grey background and dark grey text in resolution 300 by 200 pixels Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Buy More info
Small Medium Large
Colour version of kittens in a basket looking around. Greyscale version of kittens in a basket looking around. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Close Open dialog Lorem ipsum dolor sit amet, consectetur adipiscing elit. Close Open drawer Dropdown Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Checkbox Disabled Prefix Suffix
Undo Redo Cut Copy Paste Find Find… Find previous Find next Transformations Make uppercase Make lowercase Capitalise

Option 1 Option 2 Option 3
Resize this box and watch the console ↘️
Option 1 Option 2 Option 3 Option 4 Option 5 Option 6
Small Medium Large
General Custom Advanced Disabled This is the general tab panel. This is the custom tab panel. This is the advanced tab panel. This is a disabled tab panel. Primary Success Neutral Warning Danger

Special thanks

Lit
Shoelace
Astro
Floating UI
Custom Elements Manifest
Pagefind