UI Kit

The Kittl UI Kit provides a set of ready-made components that match the Kittl editor's look and feel. Use them to build extensions that feel native to the platform.

Packages

Package	Description	Install
@kittl/ui	Web Components (Lit)	npm install @kittl/ui
@kittl/ui-react	React wrappers	npm install @kittl/ui-react
@kittl/ui-icons	Icon library (380+ icons)	npm install @kittl/ui-icons
@kittl/ui-tokens	Design tokens	npm install @kittl/ui-tokens

Installation

Web Components

npm install @kittl/ui @kittl/ui-icons

import '@kittl/ui';

You can also import individual components for a smaller bundle:

import '@kittl/ui/Button';
import '@kittl/ui/Text';

caution

When importing individual components, you must also import the style loader once at the root of your app:

import '@kittl/ui/styles';

Without this import, components will render without their styles. The full import '@kittl/ui' includes styles automatically.

Using React?

Use @kittl/ui-react instead of @kittl/ui — it provides typed React components out of the box. See the React section below.

React

npm install @kittl/ui-react @kittl/ui-icons

import { Button, Text } from '@kittl/ui-react';

function App() {
  return (
    <div>
      <Text variant="h2">My Extension</Text>
      <Button variant="primary" size="m">Click me</Button>
    </div>
  );
}

Available Components

Browse the individual component pages in the sidebar for detailed props, events, slots, and usage examples.

Component	Tag	Description
Accordion	kittl-accordion	Collapsible content sections
Avatar	kittl-avatar	User or team avatars
Badge	kittl-badge	Status and label badges
Button	kittl-button	Primary action buttons
Card	kittl-card	Content cards with optional media
Header	kittl-header	Extension panel headers
Icon	kittl-icon	SVG icon renderer
Image	kittl-image	Image display with aspect ratios
Input	kittl-input	Text input fields
Menu	kittl-menu	Dropdown menus
Popover	kittl-popover	Floating content panels
ScrollableArea	kittl-scrollable-area	Scrollable containers
SearchInput	kittl-search-input	Search input with icon and clear
Spinner	kittl-spinner	Loading indicators
Tabs	kittl-tabs	Tab navigation
Tag	kittl-tag	Clickable tag labels
Text	kittl-text	Typography component
Toast	kittl-toast	Notification toasts
Tooltip	kittl-tooltip	Hover tooltips