Native web componentsfor modern interfaces

Flexible. Accessible. Web Components.

npm

Yarn

pnpm

Bun

$ npm install placer-toolkit

$ yarn add placer-toolkit

$ pnpm add placer-toolkit

$ bun add placer-toolkit

Get started

What is Placer Toolkit?

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 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?

Read intent, not implementation. Traditional toolkits hide your logic inside a “class jungle”. Placer Toolkit uses semantic web components to make your markup readable again. Fewer lines, zero noise—just clean, expressive code that tells you exactly what it does.

  <!-- Bootstrap -->
<main
    class="container-fluid d-flex justify-content-center align-items-center p-4 bg-light min-vh-100"
>
    <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>

<style>
    main .card {
        max-inline-style: 30rem;
        border-radius: 1.5rem;
    }
</style> 

  <!-- Placer Toolkit -->
<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>
    .main-content {
        inline-size: 100%;
        background-color: var(--pc-color-surface-lowered);
    }

    .main-content form {
        padding: var(--pc-spacing-l);
        max-inline-size: 95%;
        inline-size: 30rem;
        background-color: var(--pc-color-surface-default);
        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.

Before

After

Default

Utility

Serene

Default

Vibrant

Muted

Light

Dark

Default

Utility