Native Webkomponenten fürmoderne Benutzeroberflächen
Flexibel. Barrierefrei. Webkomponenten.
Was ist Placer Toolkit?
Placer Toolkit 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 100 % 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 71 Locales direkt einsatzbereit und beliebig erweiterbar. Deine Anwendung spricht jede Sprache.
Minimaler Overhead
Keine unnötigen Abhängigkeiten, kein Ballast. Nur das, was du wirklich brauchst. Schlank, schnell, wartbar.
Warum solltest du Placer Toolkit wählen?
Dieser Vergleich zeigt die entsprechende Funktionalität in einem CSS‐basierten Toolkit wie Bootstrap und in einem webkomponentenbasierten Toolkit wie Placer Toolkit, was eine massive Reduzierung der Codekomplexität sowie eine verbesserte Lesbarkeit demonstriert.
<!-- 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"
>
Anmelden
</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>
Nutzer:in hinzufügen
</a>
</li>
<li>
<a
class="dropdown-item d-flex align-items-center gap-2"
href="#"
>
<i class="bi bi-trash"></i>
Account löschen
</a>
</li>
</ul>
</div>
<div>
<button
class="btn btn-sm btn-outline-danger rounded-pill"
aria-label="Melden"
>
<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">Anmelden</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="test@beispiel.de"
/>
</div>
</div>
<div class="mb-4">
<label class="form-label small fw-medium">Passwort</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="#">
Passwort vergessen?
</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>
Anmelden
</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
>
Anmelden
<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>
Nutzer:in hinzufügen
</pc-dropdown-item>
<pc-dropdown-item appearance="danger">
<pc-icon
library="default"
icon-style="solid"
name="trash"
slot="icon"
></pc-icon>
Account löschen
</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="Melden"
></pc-icon>
</pc-button>
</div>
</nav>
<main class="main-content">
<form class="pc-stack">
<h1>Anmelden</h1>
<pc-input label="E‐Mail" type="email" placeholder="test@beispiel.de">
<pc-icon
library="default"
icon-style="solid"
name="envelope"
slot="prefix"
></pc-icon>
</pc-input>
<pc-input label="Passwort" type="password" password-toggle>
<pc-icon
library="default"
icon-style="solid"
name="key"
slot="prefix"
></pc-icon>
<a href="#" slot="hint">Passwort vergessen?</a>
</pc-input>
<pc-button appearance="primary">
<pc-icon
library="default"
icon-style="solid"
name="arrow-right-to-bracket"
slot="prefix"
></pc-icon>
Anmelden
</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>Designvorschau
Das Styling-System von Placer Toolkit basiert auf 18 einzigartigen Kombinationen, die sich aus drei verschiedenen Designs, drei vielseitigen Farbpaletten und zwei klaren Farbschemata ergeben. Nutze diese interaktive Vorschau, um das gestalterische Potenzial des Toolkits sofort zu erkunden.
Open‐Source‐Unterstützung
Placer Toolkit wurde mithilfe dieser hervorragenden Open‐Source‐Bibliotheken entwickelt, die verschiedene Projektfunktionen unterstützen.
Unsere Website ist zu 100 % frei von Cookies! Wir legen großen Wert auf deine Privatsphäre und speichern daher keinerlei Cookies oder persönliche Informationen über dich.
Dein Browserverlauf bleibt sauber und deine Daten sind geschützt, ganz im Einklang mit modernen Datenschutzstandards wie der DSGVO. Genieße deinen Besuch ganz ohne digitale Cookies! 🍪🚫
Weitere Informationen findest du in unserer Datenschutzerklärung.