# Kanto > Eighty accessible web components for dashboards, admin tools and forms, > shipped as standard custom elements: the same `` runs in React, > Vue, Angular, Svelte and plain HTML. Two themes, themeable in one line. ## Write it right the first time - Install with `npm install kanto-ds`, then `import 'kanto-ds';` and `import 'kanto-ds/styles.css';` once at the root. Without a bundler, use `` and the stylesheet `https://cdn.jsdelivr.net/npm/kanto-ds@1/dist/styles.css`. - Data goes in as properties, not attributes: `options`, `data`, `columns`, `items` — anything that is not a string or a boolean — are set from script (`table.data = rows`), or as `.data=${rows}` in Lit, `:data` in Vue, `[data]` in Angular, a plain prop in React 19. - Events are `kt-`-prefixed CustomEvents with the payload in `detail`: `select.addEventListener('kt-change', (e) => e.detail.value)`. - Style with tokens, never literal colours: `var(--surface-card)`, `var(--text-body)`, `var(--color-primary-base)`. Dark is the default theme; `` or `"auto"` switches. - Theme the whole system with attributes — `data-accent="teal"`, `data-font="inter"`, `data-radius="round"`, `data-density="compact"`, `data-text-size="large"` — or `setAppearance({ accent: '#e11d48' })`. - Icons are Lucide names: ``. Kanto ships the common ones; register others with `registerIcons({ Rocket })` from `kanto-ds/icons`. In a project, every page below is also at `node_modules/kanto-ds/dist/docs/.md`. ## Guides - [Frameworks](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/docs/frameworks.md): setup for React 18 and 19, Vue, Angular and Svelte. - [Tokens and appearance](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/tokens/README.md): colour, type and spacing tokens, themes, accent and appearance settings. - [Live docs and playground](https://kanto.arnaudmichel.fr): every component with examples. ## Components ### Core - [kt-avatar](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/core/kt-avatar/kt-avatar.md): A person or an organisation, as a picture or as their initials. - [kt-avatar-group](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/core/kt-avatar-group/kt-avatar-group.md): The people on something — a project's members, a document's editors — as avatars overlapping in a row, the rest summed up as "+N". - [kt-badge](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/core/kt-badge/kt-badge.md): A compact label: a pill `tag`, a monospaced `code` token, a `category` tinted with a colour of your choosing, or a `count`. - [kt-button](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/core/kt-button/kt-button.md): The Kanto action button. - [kt-card](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/core/kt-card/kt-card.md): The system's content surface: 12px radius, a 1px `--border-subtle` border, 24px of padding, 20px between its rows. - [kt-code](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/core/kt-code/kt-code.md): A block of code on a recessed surface, with its language and a copy button. - [kt-copy-button](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/core/kt-copy-button/kt-copy-button.md): Copies a value to the clipboard and says it did: an API key, an install command, a share link. - [kt-icon](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/core/kt-icon/kt-icon.md): A [Lucide](https://lucide.dev) - [kt-kbd](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/core/kt-kbd/kt-kbd.md): A keyboard shortcut, rendered per platform. - [kt-split-button](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/core/kt-split-button/kt-split-button.md): One button carrying a menu of related actions. ### Forms - [kt-calendar](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-calendar/kt-calendar.md): A month calendar to pick a day or a period from, shown in the page. - [kt-checkbox](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-checkbox/kt-checkbox.md): A checkbox: a choice that applies when the form is submitted. - [kt-color-picker](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-color-picker/kt-color-picker.md): A colour, chosen from swatches or set freely: a label's colour, a theme's accent, a chart series. - [kt-date-input](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-date-input/kt-date-input.md): A date typed into its parts — day, month and year, each its own segment. - [kt-date-picker](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-date-picker/kt-date-picker.md): A date field with a calendar, for one day or a period. - [kt-drag-drop](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-drag-drop/kt-drag-drop.md): A file drop zone. - [kt-form](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-form/kt-form.md): A panel grouping related fields. - [kt-input](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-input/kt-input.md): A single-line text field. - [kt-input-menu](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-input-menu/kt-input-menu.md): A combobox: type to narrow the list, then pick. - [kt-label-input](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-label-input/kt-label-input.md): A label above a form control, with a red asterisk when it is required. - [kt-multi-select](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-multi-select/kt-multi-select.md): Several choices from a list: type to narrow it, pick as many as you need. - [kt-number-input](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-number-input/kt-number-input.md): A number field with − and + beside it: a quantity, a seat count, an amount. - [kt-otp-input](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-otp-input/kt-otp-input.md): A one-time code — the six digits of a sign-in, a verification, a second factor — one box per character. - [kt-prompt-input](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-prompt-input/kt-prompt-input.md): The field a person writes to an assistant in: it grows with what is written, sends on Enter, and shows the sending on its own send button. - [kt-radio-group](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-radio-group/kt-radio-group.md): One choice among a few, all visible at once. - [kt-select](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-select/kt-select.md): A single-choice dropdown. - [kt-slider](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-slider/kt-slider.md): A value picked by sliding along a range: a volume, a threshold, or with `range`, a price between two ends. - [kt-textarea](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-textarea/kt-textarea.md): A multi-line field, with the same borderless fill and outline states as ``. - [kt-time-input](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-time-input/kt-time-input.md): A time of day typed into its parts — hours, minutes and, if asked, seconds. - [kt-toggle](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/forms/kt-toggle/kt-toggle.md): An on/off switch. ### Navigation - [kt-app-shell](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/navigation/kt-app-shell/kt-app-shell.md): The frame of an application: a header along the top, a sidebar down the side, and the content, which scrolls on its own. - [kt-breadcrumb](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/navigation/kt-breadcrumb/kt-breadcrumb.md): A trail showing where the current page sits. - [kt-footer](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/navigation/kt-footer/kt-footer.md): The site footer: a contentinfo landmark holding the brand and a word about the product, columns of links, actions, and a legal line under them. - [kt-header](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/navigation/kt-header/kt-header.md): The application header: a banner landmark holding the brand, the primary navigation and a row of actions. - [kt-page-header](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/navigation/kt-page-header/kt-page-header.md): The block every screen opens with: an overline, a title, a sentence, and the actions that belong to the page rather than to anything on it. - [kt-segmented-control](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/navigation/kt-segmented-control/kt-segmented-control.md): A small set of mutually exclusive choices, drawn as one inset track with the selected segment raised out of it. - [kt-steps](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/navigation/kt-steps/kt-steps.md): The steps of a flow — sign-up, checkout, onboarding — and where the reader is in it. - [kt-sub-menu-navigation](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.md): The sidebar: uppercase overline section titles over lists of links, to any depth. - [kt-tabs](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/navigation/kt-tabs/kt-tabs.md): An underlined tab bar. - [kt-toggle-button](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/navigation/kt-toggle-button/kt-toggle-button.md): A button that stays pressed. - [kt-toggle-button-group](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/navigation/kt-toggle-button-group/kt-toggle-button-group.md): Joins ``s into one bar and owns their selection. - [kt-user-menu](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/navigation/kt-user-menu/kt-user-menu.md): The account menu at the end of an application's header: the person's avatar, and under it who is signed in and what they can do. ### Feedback - [kt-alert](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/feedback/kt-alert/kt-alert.md): A message that stays on the page. - [kt-empty-state](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/feedback/kt-empty-state/kt-empty-state.md): What a screen shows when it has nothing to show. - [kt-progress-bar](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/feedback/kt-progress-bar/kt-progress-bar.md): A determinate progress bar. - [kt-skeleton](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/feedback/kt-skeleton/kt-skeleton.md): A loading placeholder, pulsing between `--surface-raised` and `--surface-hover` — the same elevation ramp everything else in Kanto uses, so it reads as part of the page rather than as a grey rectangle pasted onto it. - [kt-toast](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/feedback/kt-toast/kt-toast.md): A transient notification. - [kt-toast-container](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/feedback/kt-toast-container/kt-toast-container.md): The stack that owns the toasts on screen, and the imperative shortcut to it. - [kt-tooltip](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/feedback/kt-tooltip/kt-tooltip.md): A short label that appears on hover or focus. ### Overlays - [kt-accordion](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/overlays/kt-accordion/kt-accordion.md): A set of `kt-collapsible` sections that open one at a time: opening one folds the one that was open, so the page stays the length of one answer. - [kt-collapsible](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/overlays/kt-collapsible/kt-collapsible.md): A section that folds away. - [kt-command-palette](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/overlays/kt-command-palette/kt-command-palette.md): The palette a product opens on Cmd+K: every action and page, a few keystrokes away. - [kt-confirm-dialog](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/overlays/kt-confirm-dialog/kt-confirm-dialog.md): A centred yes/no overlay for an action worth stopping to think about. - [kt-dropdown](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/overlays/kt-dropdown/kt-dropdown.md): A panel anchored to a trigger. - [kt-modal](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/overlays/kt-modal/kt-modal.md): A centred dialog for anything that is not a yes/no question. - [kt-side-panel](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/overlays/kt-side-panel/kt-side-panel.md): A drawer sliding in from the right, for viewing or editing one record without losing the list behind it. - [kt-tour](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/overlays/kt-tour/kt-tour.md): A guided tour: a few steps, each pointing at a part of the page with a word about it — a product's first run, a new feature. ### Data - [kt-chart](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/data/kt-chart/kt-chart.md): A chart, drawn from the token layer: line, area and bar — stacked, sideways or mixed — plus scatter, bubble, pie, doughnut, polar area and radar. - [kt-chat-message](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/data/kt-chat-message/kt-chat-message.md): One message of a conversation with an assistant. - [kt-description-list](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/data/kt-description-list/kt-description-list.md): Terms and their details — an invoice's number, customer and amount; a person's email and role — the body of a detail page. - [kt-meter](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/data/kt-meter/kt-meter.md): How a fixed total is spent: storage by file type, a budget by category, seats by role. - [kt-pagination](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/data/kt-pagination/kt-pagination.md): Previous / next paging, with the position between them. - [kt-stat](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/data/kt-stat/kt-stat.md): One headline figure: a label, a value, and how it moved. - [kt-table](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/data/kt-table/kt-table.md): A data table: tri-state sorting, single or multiple selection, paging. - [kt-timeline](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/data/kt-timeline/kt-timeline.md): An ordered run of events on a rail. - [kt-tree](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/data/kt-tree/kt-tree.md): Things inside things — folders and files, an organisation's teams, nested pages — as a tree to open and walk. ### Blocks - [kt-auth-form](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/blocks/kt-auth-form/kt-auth-form.md): The way into a product: signing in, creating an account, resetting a password, entering a code — one block, four modes. - [kt-blog-post](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/blocks/kt-blog-post/kt-blog-post.md): A post, set to be read: its title, who wrote it and when, a cover, and the body in a measure an eye can follow. - [kt-cta](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/blocks/kt-cta/kt-cta.md): The ask at the end of a page: a heading, a line, and the button that acts on them. - [kt-empty-page](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/blocks/kt-empty-page/kt-empty-page.md): The page a new account lands on, before there is anything in it: a welcome, and the first steps that fill it — what is done, what is next, and the way to each. - [kt-error-page](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/blocks/kt-error-page/kt-error-page.md): The page a person lands on when the one they wanted is not there: not found, broken, or down for maintenance — said plainly, with the way on. - [kt-faq](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/blocks/kt-faq/kt-faq.md): The questions people ask before they sign up, answered: an accordion under a heading, one answer open at a time. - [kt-feature-grid](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/blocks/kt-feature-grid/kt-feature-grid.md): What the product does, a feature at a time: an icon, a title and a line, in a grid. - [kt-hero](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/blocks/kt-hero/kt-hero.md): The top of a page: what the product is, in a heading and a line, and the way in. - [kt-logo-cloud](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/blocks/kt-logo-cloud/kt-logo-cloud.md): Who uses it, in their logos: a line of marks under a caption. - [kt-newsletter](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/blocks/kt-newsletter/kt-newsletter.md): A way to hear from you again: a heading, a line, an email field and the button that subscribes it. - [kt-post-grid](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/blocks/kt-post-grid/kt-post-grid.md): The latest posts, each a card that leads to it: a cover, a title, a line, and who wrote it when. - [kt-pricing-table](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/blocks/kt-pricing-table/kt-pricing-table.md): The plans, side by side: what each costs, what it includes, and the way in — with a switch between monthly and yearly prices when the plans have both. - [kt-settings-section](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/blocks/kt-settings-section/kt-settings-section.md): One part of a settings page: what it is about, the fields that change it, and the button that saves them. - [kt-testimonials](https://raw.githubusercontent.com/MrArnaudMichel/kanto/main/src/components/blocks/kt-testimonials/kt-testimonials.md): What the people who use it say: a quote, and who said it.