Native web componentsfor modern interfaces
Flexible. Accessible. Web Components.
Placer Toolkit /ˈplækər ˈtuːlkɪt/ 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 GDPR‐compliant. Privacy by design.
Flexible
Easily restyle, customise and adapt components to match your design. Your website, your rules.
Globally ready
With 75 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.
Whether you use React, Vue, Angular, Svelte, any other framework or no framework at all, Placer Toolkit integrates seamlessly. No proprietary runtimes, no hidden dependencies—just the tools you need, right where you need them.
<pc-card class="product-card"> <img src="https://placer-toolkit.vercel.app/images/holographic-logo-sticker.webp" slot="media" alt="" />
<div class="pc-split" slot="header"> <b>Holo Sticker Set</b> <span>$12,99</span> </div>
<pc-button appearance="primary" slot="footer"> Add to cart </pc-button></pc-card>
<style> .product-card { position: relative; margin: var(--pc-spacing-xl); inline-size: calc((100% / 3) * 2); }
.product-card::part(base) { border-radius: var(--pc-border-radius-xl); }
.product-card::part(header) { border: none; }
.product-card::part(body) { padding: 0; }
.product-card img { margin-block: var(--pc-spacing-xxl); margin-inline: auto; inline-size: 10rem; block-size: 10rem; filter: drop-shadow( var(--pc-shadow-offset-x-s) var(--pc-shadow-offset-y-s) var(--pc-shadow-blur-s) var(--pc-color-shadow) ); }
.product-card pc-button { inline-size: 100%; }</style>
const ProductCard = () => ( <pc-card className="product-card"> <img src="https://placer-toolkit.vercel.app/images/holographic-logo-sticker.webp" slot="media" alt="" />
<div className="pc-split" slot="header"> <b>Holo Sticker Set</b> <span>$12,99</span> </div>
<pc-button appearance="primary" slot="footer"> Add to cart </pc-button> </pc-card>
<style> .product-card { position: relative; margin: var(--pc-spacing-xl); inline-size: calc((100% / 3) * 2); }
.product-card::part(base) { border-radius: var(--pc-border-radius-xl); }
.product-card::part(header) { border: none; }
.product-card::part(body) { padding: 0; }
.product-card img { margin-block: var(--pc-spacing-xxl); margin-inline: auto; inline-size: 10rem; block-size: 10rem; filter: drop-shadow( var(--pc-shadow-offset-x-s) var(--pc-shadow-offset-y-s) var(--pc-shadow-blur-s) var(--pc-color-shadow) ); }
.product-card pc-button { inline-size: 100%; } </style>);<template> <pc-card class="product-card"> <img src="https://placer-toolkit.vercel.app/images/holographic-logo-sticker.webp" slot="media" alt="" />
<div class="pc-split" slot="header"> <b>Holo Sticker Set</b> <span>$12,99</span> </div>
<pc-button appearance="primary" slot="footer"> Add to cart </pc-button> </pc-card></template>
<style> .product-card { position: relative; margin: var(--pc-spacing-xl); inline-size: calc((100% / 3) * 2); }
.product-card::part(base) { border-radius: var(--pc-border-radius-xl); }
.product-card::part(header) { border: none; }
.product-card::part(body) { padding: 0; }
.product-card img { margin-block: var(--pc-spacing-xxl); margin-inline: auto; inline-size: 10rem; block-size: 10rem; filter: drop-shadow( var(--pc-shadow-offset-x-s) var(--pc-shadow-offset-y-s) var(--pc-shadow-blur-s) var(--pc-color-shadow) ); }
.product-card pc-button { inline-size: 100%; }</style>import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
@Component({ selector: "app-product-card", standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: ` <pc-card class="product-card"> <img src="https://placer-toolkit.vercel.app/images/holographic-logo-sticker.webp" slot="media" alt="" />
<div class="pc-split" slot="header"> <b>Holo Sticker Set</b> <span>$12,99</span> </div>
<pc-button appearance="primary" slot="footer"> Add to cart </pc-button> </pc-card> `, styles: [` .product-card { position: relative; margin: var(--pc-spacing-xl); inline-size: calc((100% / 3) * 2); }
.product-card::part(base) { border-radius: var(--pc-border-radius-xl); }
.product-card::part(header) { border: none; }
.product-card::part(body) { padding: 0; }
.product-card img { margin-block: var(--pc-spacing-xxl); margin-inline: auto; inline-size: 10rem; block-size: 10rem; filter: drop-shadow( var(--pc-shadow-offset-x-s) var(--pc-shadow-offset-y-s) var(--pc-shadow-blur-s) var(--pc-color-shadow) ); }
.product-card pc-button { inline-size: 100%; } `],})export class ProductComponent {}<pc-card class="product-card"> <img src="https://placer-toolkit.vercel.app/images/holographic-logo-sticker.webp" slot="media" alt="" />
<div class="pc-split" slot="header"> <b>Holo Sticker Set</b> <span>$12,99</span> </div>
<pc-button appearance="primary" slot="footer"> Add to cart </pc-button></pc-card>
<style> .product-card { position: relative; margin: var(--pc-spacing-xl); inline-size: calc((100% / 3) * 2); }
.product-card::part(base) { border-radius: var(--pc-border-radius-xl); }
.product-card::part(header) { border: none; }
.product-card::part(body) { padding: 0; }
.product-card img { margin-block: var(--pc-spacing-xxl); margin-inline: auto; inline-size: 10rem; block-size: 10rem; filter: drop-shadow( var(--pc-shadow-offset-x-s) var(--pc-shadow-offset-y-s) var(--pc-shadow-blur-s) var(--pc-color-shadow) ); }
.product-card pc-button { inline-size: 100%; }</style>Placer Toolkit turns complex styling into a series of configuration tweaks. Customise your entire aesthetic instantly via CSS variables, or leverage our high‐fidelity, built‐in themes and colour palettes to get from prototype to production in minutes.
Placer Toolkit ships with Font Awesome, putting 2 100+ free icons at your fingertips. If your design requires more, simply link your Pro or Pro+ Kit—or bypass the defaults and integrate any icon library you choose.
Start building with Placer Toolkit
Craft your interface with high‐quality web components designed to be accessible, framework‐agnostic and effortless to restyle.