Get Started · WCKD UI

At a glance

Build a ZIP with the Package Builder: core plus only the add-ons you need right now.
Load wckd-ui.css, then wckd-ui-components.css, then your theme.css. Load wckd-ui.js once before </body> (use defer).
Treat core files as vendored; keep tokens and product CSS in theme.css.
Ship one semantic shell, then layer utilities. Confirm layout end-to-end before adding JS.
Add one documented wckd-* pattern, then test desktop, mobile, and keyboard.
On existing sites: back up, then either regenerate the package or merge a single add-on file pair by hand.

1) Download WCKD UI

Pick core plus optional components, accept the terms, and download a ZIP. Regenerate any time your scope grows.

Optional components

The downloadable kit is core CSS, the shared component stylesheet, and one bootstrap script, plus whichever add-ons you tick above—all at release v2.2.2. Treat those files as vendored: when you want upstream fixes, download a fresh package (or pull the repo) and replace the same core paths; keep brand and layout in theme.css and your templates.

Include WCKD UI core v2.2.2

Core required: Every add-on component depends on core files (wckd-ui.css, wckd-ui-components.css, and wckd-ui.js). Uncheck this only if your project already loads the core kit.

Minify CSS + JS in downloaded package. I agree to the terms of use for this package output.

2) Load core assets

Order matters: both core stylesheets, then theme.css, then a single deferred script before </body>.

<!-- In <head>: core first, your overrides last -->
<link rel="stylesheet" href="./wckd-ui.css" />
<link rel="stylesheet" href="./wckd-ui-components.css" />
<link rel="stylesheet" href="./theme.css" />

<!-- Before </body>: one script, defer so HTML is parsed first -->
<script src="./wckd-ui.js" defer></script>

Keep wckd-ui.css and wckd-ui-components.css vendor-clean when you can. Put product tokens and small overrides in theme.css so upstream drops stay easy to merge.

Include wckd-ui.js only once. It boots documented wckd-* roots and publishes scroll helpers on document.body (see Animation and scroll effects) so you can style progress and direction without extra listeners.

3) Create your page baseline

Start with a semantic shell: .wckd-page, header, main, optional aside, footer. Same vocabulary for everyone before you add wckd-* behavior.

<!-- Minimal page: shell regions + same stylesheet order as step 2 -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>WCKD UI Page</title>
  <link rel="stylesheet" href="./wckd-ui.css" />
  <link rel="stylesheet" href="./wckd-ui-components.css" />
  <link rel="stylesheet" href="./theme.css" />
</head>
<body>
  <a href="#main" class="skip-link">Skip to main content</a>
  <div class="wckd-page">
    <header><h1>Site title</h1></header>
    <main id="main">
      <section><h2>Section title</h2></section>
      <aside><p>Optional sidebar</p></aside>
    </main>
    <footer><p>Footer content</p></footer>
  </div>
  <script src="./wckd-ui.js" defer></script>
</body>
</html>

Keep .wckd-page as the viewport root. When main contains an aside, you get a two-column desktop layout that stacks on small screens (see Page shell pattern).

4) Add one interaction

Prove wiring with a single pattern: keep .columns and direct .column children for layout, then add one documented wckd-* root for behavior.

<!-- Preferred: parent sets count, gap, and padding for every column -->
<div class="columns count-3 gap padded">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
</div>

<!-- Example: accordion with filter + expand/collapse toolbar -->
<section>
  <h2>Frequently asked questions</h2>
  <div class="wckd-accordion columns count-1" data-show-filter data-show-expand-all>
    <div class="column">
      <button class="accordion-toggle">How fast can we ship?</button>
      <div class="accordion-content"><p>Most teams ship first pages in hours.</p></div>
    </div>
  </div>
</section>

Same idea for wckd-tabs, wckd-carousel, wckd-bento, and the rest: copy structure from the matching component page, including required children and data-* flags.

5) Verify readiness

Run through this list before handoff or release. It matches how the kit expects markup, focus, and script to line up.

Semantic HTML first, then utilities, then wckd-* roots when needed.
Treat class names and data-* attributes as the contract for wckd-ui.js.
Keep trigger and content order exactly as each component doc shows (overlays, tabs, accordions).
Use real <button> and <a href> where the docs do; do not swap in non-focusable elements for actions.

6) Add components to an existing build

If the kit is already on the page and you need one more interaction, pick a path below. Every path still starts from the markup and data-* flags on the relevant component page.

Back up first. Commit or copy wckd-ui.css, wckd-ui-components.css, and wckd-ui.js (plus any hand-merged slices) so you can roll back if a new bundle clashes with your theme or bundler.

Open the Package Builder in step 1 on this page (or scroll back to it).
Select every add-on your site should ship, including the new component. The download always includes the core bundle from wckd-ui-components.css + wckd-ui.js (for example navigation, steps, scroll hooks, and other core patterns), plus whatever non-core add-ons you tick.
Accept the terms of use, then Download WCKD UI to receive a ZIP.
After you have a backup of the files you are about to replace, swap in the ZIP’s wckd-ui.css, wckd-ui-components.css, and wckd-ui.js. Keep your own theme.css and page templates; only overwrite the core kit files so token overrides stay in your theme layer.

The builder keeps core in the base files and merges selected add-on CSS into wckd-ui-components.css and add-on JS into wckd-ui.js. Those modules self-initialize on DOMContentLoaded; you do not add separate init calls for standard add-ons.

Use this when you maintain your own bundler or only want to ship one extra file pair without regenerating the whole ZIP.

Back up the stylesheet and script you are about to edit or replace, then continue.
From the downloaded add-ons package, copy components/{name}.css and components/{name}.js (for example: components/carousel.css and components/carousel.js). Some add-ons are CSS-only.
Open your existing wckd-ui-components.css, add a separator comment such as /* WCKD add-on: carousel */, then paste the full contents of components/{name}.css at the end of the file.
Open your existing wckd-ui.js, add a separator comment, then paste the full contents of components/{name}.js at the end of the file (after core code). Do not remove the file's existing IIFE wrappers; just append as-is.
If you do not want to merge files, you can also load the downloaded files directly: add a CSS <link> after wckd-ui-components.css and a script tag after wckd-ui.js.

Some teams vendor the large doc-site bundle instead of the trimmed downloadable kit. It already includes most modules: add markup from the docs and avoid loading a second copy of the same script. Back up the old file before you replace it.

After wiring, hard-reload, exercise the new UI on mobile and desktop, and re-check navigation and focus order so nothing regressed.