Native Webkomponenten fürmoderne Benutzeroberflächen
Flexibel. Barrierefrei. Webkomponenten.
Placer Toolkit /ˈplakɐ ˈtuːlkɪt/ ist eine Open‐Source‐Bibliothek für Webkomponenten, mit der du Websites mit jedem Framework – oder ganz ohne – erstellen kannst.
Vollständig nativ
Placer Toolkit basiert auf Webstandards und funktioniert in jedem Framework – oder ganz ohne. Keine Bindung, keine Kompromisse.
Barrierefrei
Barrierefreiheit ist bei uns Standard – in allen Komponenten eingebaut. Für jeden funktioniert’s, überall.
Datenschutz ohne Stress
Keine Tracker, keine Cookies, keine Sorgen. Lokal gehostet und DSGVO‐konform. Privatsphäre by Design.
Flexibel
Komponenten lassen sich einfach neu gestalten, anpassen und auf dein Design abstimmen. Deine Website, deine Regeln.
Global einsatzbereit
Mit 75 Locales direkt einsatzbereit und beliebig erweiterbar. Deine Website spricht jede Sprache.
Minimaler Overhead
Keine unnötigen Abhängigkeiten, kein Ballast. Nur das, was du wirklich brauchst. Schlank, schnell, wartbar.
Egal ob du React, Vue, Angular, Svelte, ein anderes Framework oder gar kein Framework verwendest – Placer Toolkit integriert sich nahtlos. Keine proprietären Runtimes, keine versteckten Abhängigkeiten – nur die Werkzeuge, die du brauchst, genau dort, wo du sie brauchst.
<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>15,49 €</span> </div>
<pc-button appearance="primary" slot="footer"> In den Warenkorb </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>15,49 €</span> </div>
<pc-button appearance="primary" slot="footer"> In den Warenkorb </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>15,49 €</span> </div>
<pc-button appearance="primary" slot="footer"> In den Warenkorb </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>15,49 €</span> </div>
<pc-button appearance="primary" slot="footer"> In den Warenkorb </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>15,49 €</span> </div>
<pc-button appearance="primary" slot="footer"> In den Warenkorb </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 verwandelt komplexes Styling in eine Reihe von Konfigurationsanpassungen. Personalisiere deine gesamte Ästhetik im Handumdrehen über CSS‐Variablen oder nutze unsere hochwertigen, integrierten Designs und Farbpaletten, um in Minuten vom Prototypen zur Produktion zu gelangen.
Placer Toolkit kommt mit Font Awesome und stellt dir über 2 100 kostenlose Icons direkt zur Verfügung. Wenn dein Design mehr benötigt, verknüpfe einfach dein Pro‐ der Pro+‐Kit – oder nutze alternativ eine beliebige Icon‐Bibliothek deiner Wahl.
Leg los mit Placer Toolkit
Gestalte deine Benutzeroberfläche mit hochwertigen Webkomponenten – barrierefrei, frameworkagnostisch und leicht zu restylen.