Getting started

Write the HTML, add a k- class, and the element picks up the kit’s styling. Most of the kit is CSS, so that’s all you need in many cases. JavaScript is only used for components CSS can’t handle, such as tabs and pagination. If an element doesn’t have a k- class, the kit leaves it untouched.

Every docs page has a .md equivalent. Copy it using the button at the top of the page, start with /llms.txt, or fetch /llms-full.txt in a single request.

Install

pnpm add k-web-ui

That writes it into package.json and installs it into node_modules. Import the sheet once, in your CSS:

@import 'k-web-ui';

Markup

Classes are tied to the element. A button is a <button> with .k-btn, not a div you styled to look like one.

<button type="button" class="k-btn k-btn--primary">Save</button>
<button type="button" class="k-btn k-btn--secondary">Cancel</button>

Theme

One attribute on the document root:

<html data-theme="k-light">

k-light or k-dark. Orange on buttons and fields stays put. Background and text flip. Override those tokens, or add a name of your own, in How it works. The Theme playground is there if you want to poke at values first.

JavaScript

Six widgets are custom elements: tabs, pagination, dropdown, carousel, gauge, and scrollbar. Give the tag an id, write your content next to it with that id and a number, and import the JS once. The element finds the content and writes the chrome.

The other two panels are components. This one is a paragraph.

<k-tabs id="sections" class="k-tabs" aria-label="Sections"></k-tabs>
<div id="sections-0">The first panel.</div>
<div id="sections-1">The second panel.</div>
<div id="sections-2">The third panel.</div>

import 'k-web-ui/js';

document.getElementById('sections').options = [
{ label: 'Overview' },
{ label: 'Usage' },
{ label: 'API' },
];

import { Component, CUSTOM_ELEMENTS_SCHEMA, type AfterViewInit } from '@angular/core';
import 'k-web-ui/js';

@Component({
  selector: 'app-example',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <k-tabs id="sections" class="k-tabs" aria-label="Sections"></k-tabs>
    <div id="sections-0">The first panel.</div>
    <div id="sections-1">The second panel.</div>
    <div id="sections-2">The third panel.</div>
  `,
})
export class ExampleComponent implements AfterViewInit {
  ngAfterViewInit() {
    document.getElementById('sections').options = [
    { label: 'Overview' },
    { label: 'Usage' },
    { label: 'API' },
    ];
  }
}

import { useEffect } from 'react';
import 'k-web-ui/js';

export function Example() {
  useEffect(() => {
    document.getElementById('sections').options = [
    { label: 'Overview' },
    { label: 'Usage' },
    { label: 'API' },
    ];
  }, []);

  return (
    <>
      <k-tabs id="sections" className="k-tabs" aria-label="Sections"></k-tabs>
      <div id="sections-0">The first panel.</div>
      <div id="sections-1">The second panel.</div>
      <div id="sections-2">The third panel.</div>
    </>
  );
}

That’s the whole pattern. Pagination and carousel read the same numbered ids and need no options at all; dropdown and gauge take options and have no content to link.

A progress bar is <progress class="k-progress">. Accordion, grid, modal, sidebar, spin, table, toast, and tooltip are CSS only. You write the markup and skip the JS import.