Native web components formodern 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
Accessibility is our standard—built into every component. It works for everyone, everywhere.
Hassle‐free privacy
No trackers, no cookies, no worries. Locally hosted and 100 % GDPR‐compliant. Privacy by design.
Flexible
Easily restyle, customise and adapt components to match your design. Your website, your rules.
Globally ready
With 71 locales out‐of‐the‐box and the ability to add more any time. Your website speaks every language.
Minimal overhead
No unnecessary dependencies, no bloat. Only what you actually need. Lean, fast, maintainable.
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="bg-light min-vh-100">
<nav
class="navbar bg-white border-bottom px-3 d-flex justify-content-between align-items-center"
>
<div>
<img
src="https://placer-toolkit.vercel.app/brand/logo.svg"
width="36"
height="36"
alt="Placer Toolkit logo"
/>
</div>
<div class="dropdown">
<button
class="btn btn-sm btn-link text-decoration-none dropdown-toggle rounded-pill d-flex align-items-center gap-2 border"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Sign in
</button>
<ul class="dropdown-menu dropdown-menu-end shadow-sm">
<li>
<a
class="dropdown-item d-flex align-items-center gap-2"
href="#"
>
<i class="bi bi-person-plus"></i>
Add user
</a>
</li>
<li>
<a
class="dropdown-item d-flex align-items-center gap-2"
href="#"
>
<i class="bi bi-trash"></i>
Delete account
</a>
</li>
</ul>
</div>
<div>
<button
class="btn btn-sm btn-outline-danger rounded-pill"
aria-label="Report"
>
<i class="bi bi-flag-fill"></i>
</button>
</div>
</nav>
<main
class="container-fluid d-flex justify-content-center align-items-center p-4"
>
<div class="card border-0 shadow-sm p-4 w-100">
<h1 class="h3 text-center mb-4">Sign in</h1>
<form>
<div class="mb-3">
<label class="form-label small fw-medium">E‐mail</label>
<div class="input-group">
<span
class="input-group-text bg-transparent border-end-0"
>
<i class="bi bi-envelope-fill"></i>
</span>
<input
type="email"
class="form-control border-start-0"
placeholder="example@email.com"
/>
</div>
</div>
<div class="mb-4">
<label class="form-label small fw-medium">Password</label>
<div class="input-group">
<span
class="input-group-text bg-transparent border-end-0"
>
<i class="bi bi-key-fill"></i>
</span>
<input
type="password"
class="form-control border-start-0"
/>
</div>
<div class="mt-2 text-end">
<a class="small text-decoration-none" href="#">
Forgot your password?
</a>
</div>
</div>
<div class="d-grid">
<button
type="submit"
class="btn btn-primary d-flex align-items-center justify-content-center gap-2"
>
<i class="bi bi-box-arrow-in-right"></i>
Sign in
</button>
</div>
</form>
</div>
</main>
</div>
<style>
.navbar {
block-size: 3.5rem;
}
.navbar div:first-child img {
translate: 0 0.125rem;
}
main .card {
max-inline-style: 30rem;
border-radius: 1.5rem;
}
</style><!-- Placer Toolkit -->
<nav class="navigation-bar pc-split">
<div>
<img
src="https://placer-toolkit.vercel.app/brand/logo.svg"
width="36"
height="36"
alt="Placer Toolkit logo"
/>
</div>
<div>
<pc-dropdown size="small">
<pc-button
class="sign-in-dropdown"
size="small"
variant="plain"
slot="trigger"
pill
>
Sign in
<pc-icon
library="default"
icon-style="solid"
name="chevron-down"
slot="suffix"
></pc-icon>
</pc-button>
<pc-dropdown-item>
<pc-icon
library="default"
icon-style="solid"
name="user-plus"
slot="icon"
></pc-icon>
Add user
</pc-dropdown-item>
<pc-dropdown-item appearance="danger">
<pc-icon
library="default"
icon-style="solid"
name="trash"
slot="icon"
></pc-icon>
Delete account
</pc-dropdown-item>
</pc-dropdown>
</div>
<div>
<pc-button size="small" appearance="danger" variant="plain" pill>
<pc-icon
library="default"
icon-style="solid"
name="flag"
label="Report"
></pc-icon>
</pc-button>
</div>
</nav>
<main class="main-content">
<form class="pc-stack">
<h1>Sign in</h1>
<pc-input label="E‐mail" type="email" placeholder="example@email.com">
<pc-icon
library="default"
icon-style="solid"
name="envelope"
slot="prefix"
></pc-icon>
</pc-input>
<pc-input label="Password" type="password" password-toggle>
<pc-icon
library="default"
icon-style="solid"
name="key"
slot="prefix"
></pc-icon>
<a href="#" slot="hint">Forgot your password?</a>
</pc-input>
<pc-button appearance="primary">
<pc-icon
library="default"
icon-style="solid"
name="arrow-right-to-bracket"
slot="prefix"
></pc-icon>
Sign in
</pc-button>
</form>
</main>
<style>
.navigation-bar {
display: flex;
align-items: center;
padding-inline: var(--pc-spacing-m);
block-size: 3.5rem;
background-color: var(--pc-color-surface-raised);
border-block-end: var(--pc-border-width-s) var(--pc-border-style)
var(--pc-color-surface-border);
}
.navigation-bar div:first-child img {
translate: 0 0.125rem;
}
.main-content {
inline-size: 100%;
background-color: var(--pc-color-surface-default);
}
.main-content form {
padding: var(--pc-spacing-l);
max-inline-size: 95%;
inline-size: 30rem;
background-color: var(--pc-color-surface-raised);
border-radius: var(--pc-border-radius-xl);
box-shadow: var(--pc-shadow-m);
}
.main-content form h1 {
font-size: var(--pc-font-size-xl);
text-align: center;
}
</style>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.