Native web components for
modern interfaces
Flexible. Accessible. Web Components.
What is Placer Toolkit?
Placer Toolkit is an open‐source web component library that lets you build websites with any framework—or with none at all.
Entirely native
Built with web standards, Placer Toolkit works in any framework—or none at all. No locking in, no compromises.
Fully accessible
Designed with a11y, i18n (71 locales out-of-the-box) and strong DX in mind. Everyone can use it, everywhere.
Flexible
Easily restyle, customise and adapt components to match your design. Your website, your rules.
Why use Placer Toolkit?
Compared to other component toolkits, Placer Toolkit is built upon native web components, which results in concise, highly semantic code. This comparison shows the equivalent functionality in a CSS‐based toolkit like Bootstrap and the web component‐based toolkit Placer Toolkit, demonstrating a massive reduction in code complexity and improved readability.
<!-- Bootstrap -->
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="modal-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="modal-label">Dialog</h1>
<button
class="btn-close"
type="button"
aria-label="Close"
data-bs-dismiss="modal"
></button>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="modal-footer">
<button
class="btn btn-secondary"
type="button"
data-bs-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
<button class="btn btn-secondary" type="button" data-bs-toggle="modal" data-bs-target="#modal">
Open dialog
</button><!-- Placer Toolkit -->
<pc-dialog label="Dialog" id="dialog">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<pc-button variant="plain" slot="footer" data-dialog="close">
Close
</pc-button>
</pc-dialog>
<pc-button data-dialog="open dialog">
Open dialog
</pc-button><!-- Bootstrap -->
<div class="form-check">
<input class="form-check-input" id="option-1" type="checkbox" value="" />
<label class="form-check-label" for="option-1">Option 1</label>
</div>
<div class="form-check">
<input
class="form-check-input"
id="option-2"
type="checkbox"
value=""
checked
/>
<label class="form-check-label" for="option-2">Option 2</label>
</div>
<div class="form-check">
<input class="form-check-input" id="option-3" type="checkbox" value="" />
<label class="form-check-label" for="option-3">Option 3</label>
</div><!-- Placer Toolkit -->
<div class="checkboxes">
<pc-checkbox>Option 1</pc-checkbox>
<pc-checkbox checked>Option 2</pc-checkbox>
<pc-checkbox>Option 3</pc-checkbox>
</div>
<style>
.checkboxes pc-checkbox {
display: block;
}
</style><!-- Bootstrap -->
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">Secondary</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-danger" type="button">Danger</button><!-- Placer Toolkit -->
<pc-button appearance="neutral">Neutral</pc-button>
<pc-button appearance="primary">Primary</pc-button>
<pc-button appearance="success">Success</pc-button>
<pc-button appearance="warning">Warning</pc-button>
<pc-button appearance="danger">Danger</pc-button><!-- Bootstrap -->
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading…</span>
</div><!-- Placer Toolkit -->
<pc-spinner></pc-spinner>Theme showcase
The Placer Toolkit styling system is based on 18 unique combinations derived from: three distinct themes, three versatile colour palettes and two crisp colour schemes. Use this interactive showcase to instantly preview the aesthetic potential of the toolkit.
Special thanks
Placer Toolkit is built with the help of these excellent open‐source libraries, which provide support for various project functions.
Our site is 100 % cookie‐free! We value your privacy, which is why we don’t store any cookies or personal information related to you.
Your browser history is safe from crumbs, and your data is protected, aligning with modern privacy standards like the GDPR. Enjoy your visit without a single digital cookie in sight! 🍪🚫
View our Privacy Policy for more information.