# Koobiq Angular

> Koobiq is an open-source design system for designers and developers, focused on designing products related to **information security**.

`@koobiq/components` 21.x for Angular 21. Every link below leads to one item of the documentation as Markdown, in English, in the order of its tabs: the overview with the full source of its examples, the API, the extra examples. Without `.md`, the address opens the page itself.

Rules for code that uses Koobiq:

- Import from the secondary entry points only, for example `import { KbqButtonModule } from '@koobiq/components/button'`: the root of the package exports nothing. Shared providers, tokens and utilities come from `@koobiq/components/core`.
- Start from the closest example of an item instead of guessing its inputs. The API section of the item lists every input and output; where the text of a page disagrees with it, the API section is right.
- Put text controls, such as `input[kbqInput]`, `textarea[kbqTextarea]` and `kbq-select`, inside `<kbq-form-field>`; their hints and errors go inside it too.
- Style with the `--kbq-*` design tokens and the `kbq-*` typography classes; never hard-code colors, sizes or fonts.
- Icons come from `@koobiq/icons` through `<i kbq-icon="kbq-..."></i>`; an icon-only button needs an accessible label.
- Do not use anything marked as deprecated in new code.

## Main

- [Installation](https://koobiq.io/en/main/installation.md): This guide describes how to set up an Angular project to use `@koobiq/components`.
- [Versioning](https://koobiq.io/en/main/versioning.md): Our releases follow the versioning described in the [Semver spec](http://semver.org/).
- [Theming](https://koobiq.io/en/main/theming.md): A theme in Koobiq is a set of CSS variables.
- [Localization](https://koobiq.io/en/main/localization.md): Koobiq components render some strings of their own — the filters menu of the filter bar, the tooltips of the code block, the accessible names of every icon-only button, the placeholder of a datepicker, and so on.
- [Typography](https://koobiq.io/en/main/typography.md): Koobiq typography defines the fonts, weights, and text styles used to create a consistent visual hierarchy in interfaces.
- [Design tokens](https://koobiq.io/en/main/design-tokens.md): The global CSS custom properties (`--kbq-*`) of the themes: colors, typography, shadows, border radius and sizes.
- [Schematics](https://koobiq.io/en/main/schematics.md): As part of the **Koobiq** design system, a set of **schematics** is provided — CLI tools designed to automate library installation, perform migrations, and update components in Angular projects.
- [Upgrade guide](https://koobiq.io/en/main/migration.md): New versions include improvements but also contain **breaking changes**; they must be applied step by step.

## Components

- [Accordion](https://koobiq.io/en/components/accordion.md): An accordion is an interactive UI element that allows users to expand and collapse individual blocks of information on demand, organizing them into compact sections. Entry point: `@koobiq/components/accordion`.
- [Actions panel](https://koobiq.io/en/components/actions-panel.md): `KbqActionsPanel` - popup panel with bulk actions on selected objects. Entry point: `@koobiq/components/actions-panel`.
- [AG grid](https://koobiq.io/en/components/ag-grid.md): AG Grid is designed for working with large tables.
- [Alert](https://koobiq.io/en/components/alert.md): Shows important information on a page. Entry point: `@koobiq/components/alert`.
- [App Switcher](https://koobiq.io/en/components/app-switcher.md): A menu for switching between applications and platforms. Entry point: `@koobiq/components/app-switcher`.
- [Autocomplete](https://koobiq.io/en/components/autocomplete.md): Autocomplete suggests matching options in a dropdown while the user types and lets them select a value without entering it in full. Entry point: `@koobiq/components/autocomplete`.
- [Badge](https://koobiq.io/en/components/badge.md): A badge is used to highlight the status, count, or other important characteristics of an object. Entry point: `@koobiq/components/badge`.
- [Breadcrumbs](https://koobiq.io/en/components/breadcrumbs.md): Breadcrumbs are a navigation element that helps users easily orient themselves on a website and understand their current location relative to the main page. Entry point: `@koobiq/components/breadcrumbs`.
- [Button](https://koobiq.io/en/components/button.md): koobiq buttons are available using native `<button>` or `<a>` elements. Entry point: `@koobiq/components/button`.
- [Button Group](https://koobiq.io/en/components/button-group.md): Button Group combines multiple buttons to emphasize their close relationship. Entry point: `@koobiq/components/button`.
- [Button toggle](https://koobiq.io/en/components/button-toggle.md): A button group is suitable for choosing from a list of 3 to 5 items when they fit in a single row without wrapping. Entry point: `@koobiq/components/button-toggle`.
- [Checkbox](https://koobiq.io/en/components/checkbox.md): Checkbox lets users select independent options and can also represent the selection state of a group. Entry point: `@koobiq/components/checkbox`.
- [Clamped list](https://koobiq.io/en/components/clamped-list.md): Clamped List displays long lists compactly, hides items that do not fit the configured limit, and lets users expand the full content. Entry point: `@koobiq/components/clamped-text`.
- [Clamped text](https://koobiq.io/en/components/clamped-text.md): The **Clamped Text** component helps display long text neatly. Entry point: `@koobiq/components/clamped-text`.
- [Code block](https://koobiq.io/en/components/code-block.md): `<kbq-code-block>` is a component that displays reformatted text content with syntax highlighting. Entry point: `@koobiq/components/code-block`.
- [Content panel](https://koobiq.io/en/components/content-panel.md): `KbqContentPanel` - a slide-out side panel that shifts adjacent content. Entry point: `@koobiq/components/content-panel`.
- [Core](https://koobiq.io/en/components/core.md): **Core** is the public entry point to the shared APIs of the Koobiq component library. Entry point: `@koobiq/components/core`.
- [Datepicker](https://koobiq.io/en/components/datepicker.md): A date field (datepicker) is a special input field with a widget for selecting a date. Entry point: `@koobiq/components/datepicker`.
- [Description list](https://koobiq.io/en/components/dl.md): Description list displays term-description pairs in adaptive, horizontal, or vertical layouts. Entry point: `@koobiq/components/dl`.
- [Divider](https://koobiq.io/en/components/divider.md): `<kbq-divider>` is a component that allows for koobiq styling of a line separator with various orientation options. Entry point: `@koobiq/components/divider`.
- [Dropdown](https://koobiq.io/en/components/dropdown.md): Dropdown displays a menu with actions or options next to a trigger and supports disabled, loading, footer, and keyboard interaction states. Entry point: `@koobiq/components/dropdown`.
- [Dynamic translation](https://koobiq.io/en/components/dynamic-translation.md): `KbqDynamicTranslation` — component for embedding custom components into translatable strings. Entry point: `@koobiq/components/dynamic-translation`.
- [Ellipsis center](https://koobiq.io/en/components/ellipsis-center.md): Ellipsis Center truncates long single-line text in the middle so that its beginning and end remain visible within the available width. Entry point: `@koobiq/components/ellipsis-center`.
- [Empty state](https://koobiq.io/en/components/empty-state.md): A placeholder component for empty states or error messages. Entry point: `@koobiq/components/empty-state`.
- [File upload](https://koobiq.io/en/components/file-upload.md): Allows the user to upload files to the product. Entry point: `@koobiq/components/file-upload`.
- [Filter Bar](https://koobiq.io/en/components/filter-bar.md): A composite component for filtering data in a table or list. Entry point: `@koobiq/components/filter-bar`.
- [Flag](https://koobiq.io/en/components/flag.md): The `kbq-flag` component shows a country flag. Entry point: `@koobiq/components/flag`.
- [Form field](https://koobiq.io/en/components/form-field.md): `<kbq-form-field>` is a component used to create forms and input fields with support for styling and additional features. Entry point: `@koobiq/components/form-field`.
- [Highlight](https://koobiq.io/en/components/highlight.md): Highlighting matches helps users quickly understand why a result is relevant and speeds up navigation through lists.
- [Icon](https://koobiq.io/en/components/icon.md): Uses `@koobiq/icons` CSS font. Entry point: `@koobiq/components/icon`.
- [Icon Button](https://koobiq.io/en/components/icon-button.md): For icon buttons (clickable icons). Entry point: `@koobiq/components/icon`.
- [Icon Item](https://koobiq.io/en/components/icon-item.md): A backing icon can be used instead of an illustration where you want to attract attention with graphics. Entry point: `@koobiq/components/icon`.
- [Inline edit](https://koobiq.io/en/components/inline-edit.md): Inline editing can replace a traditional form when the user only needs to update a few fields among many available parameters. Entry point: `@koobiq/components/inline-edit`.
- [Input](https://koobiq.io/en/components/input.md): Input provides text, numeric, and password fields with formatting, validation, masking, and other data-entry behavior. Entry point: `@koobiq/components/input`.
- [Layout flex](https://koobiq.io/en/components/layout-flex.md): Layout flex provides Koobiq CSS classes for arranging, aligning, and ordering elements in flex containers.
- [Link](https://koobiq.io/en/components/link.md): A link connects web pages or acts as a lighter alternative to a button. Entry point: `@koobiq/components/link`.
- [List](https://koobiq.io/en/components/list.md): A list shows a set of related items and lets the user select one or several of them. Entry point: `@koobiq/components/list`.
- [Markdown](https://koobiq.io/en/components/markdown.md): `KbqMarkdown` - component that allows converting text written in _Markdown_ markup language into _HTML_. Entry point: `@koobiq/components/markdown`.
- [Modal](https://koobiq.io/en/components/modal.md): A modal dialog opens as a window on top of the page, dims the underlying layer, and blocks all interaction with it. Entry point: `@koobiq/components/modal`.
- [Navbar](https://koobiq.io/en/components/navbar.md): The main menu allows for product navigation. Entry point: `@koobiq/components/navbar`.
- [Notification Center](https://koobiq.io/en/components/notification-center.md): Notification center — a panel for application notifications. Entry point: `@koobiq/components/notification-center`.
- [Overflow items](https://koobiq.io/en/components/overflow-items.md): Component for automatically hiding elements with dynamic adaptation to the container width. Entry point: `@koobiq/components/overflow-items`.
- [Overlay](https://koobiq.io/en/components/loader-overlay.md): The loading overlay displays an ongoing process within a block. Entry point: `@koobiq/components/loader-overlay`.
- [Popover](https://koobiq.io/en/components/popover.md): A popover is a small non-modal dialog without dimming that opens next to a trigger element. Entry point: `@koobiq/components/popover`.
- [Progress bar](https://koobiq.io/en/components/progress-bar.md): `<kbq-progress-bar>` is a component that displays a progress indicator. Entry point: `@koobiq/components/progress-bar`.
- [Progress spinner](https://koobiq.io/en/components/progress-spinner.md): `<kbq-progress-spinner>` is a component that displays a progress indicator as a spinner. Entry point: `@koobiq/components/progress-spinner`.
- [Radio](https://koobiq.io/en/components/radio.md): Radio buttons allow users to select from a set of mutually exclusive, related options. Entry point: `@koobiq/components/radio`.
- [Resizer](https://koobiq.io/en/components/resizer.md): Directive for resizing an element in a specified direction using the mouse pointer. Entry point: `@koobiq/components/resizer`.
- [Scrollbar](https://koobiq.io/en/components/scrollbar.md): `KbqScrollbar` is a customizable scrollbar. Entry point: `@koobiq/components/scrollbar`.
- [Search expandable](https://koobiq.io/en/components/search-expandable.md): A search field that expands from a compact icon button. Entry point: `@koobiq/components/search-expandable`.
- [Select](https://koobiq.io/en/components/select.md): Select - allows the user to select one or more values from a predefined list. Entry point: `@koobiq/components/select`.
- [Sidebar](https://koobiq.io/en/components/sidebar.md): Component designed to add collapsible side content. Entry point: `@koobiq/components/sidebar`.
- [Sidepanel](https://koobiq.io/en/components/sidepanel.md): A sidepanel is a window that slides in from the edge of the screen and appears on top of the main page content. Entry point: `@koobiq/components/sidepanel`.
- [Skeleton](https://koobiq.io/en/components/skeleton.md): A skeleton is a temporary placeholder that previews the approximate shape of content while it loads. Entry point: `@koobiq/components/skeleton`.
- [Split button](https://koobiq.io/en/components/split-button.md): A split button combines several related actions into a single control. Entry point: `@koobiq/components/split-button`.
- [Splitter](https://koobiq.io/en/components/splitter.md): Splitter resizes neighboring panels by dragging the separator. Entry point: `@koobiq/components/splitter`.
- [Table](https://koobiq.io/en/components/table.md): A table is similar to a grid but simpler in structure. Entry point: `@koobiq/components/table`.
- [Tabs](https://koobiq.io/en/components/tabs.md): Tabs divide content into groups and allow you to switch between them without reloading the page. Entry point: `@koobiq/components/tabs`.
- [Tag](https://koobiq.io/en/components/tag.md): Tags are used within the [`Tag list`](https://koobiq.io/en/components/tag-list.md) component in input fields to represent selected values: [`Select Multiple`](https://koobiq.io/en/components/select.md#multiple-selection), [`Tag autocomplete`](https://koobiq.io/en/components/tag-autocomplete.md), [`Tag input`](https://koobiq.io/en/components/tag-input.md). Entry point: `@koobiq/components/tags`.
- [Tag autocomplete](https://koobiq.io/en/components/tag-autocomplete.md): Tags Autocomplete is used to select one or multiple values from a list and to input custom values. Entry point: `@koobiq/components/tags`.
- [Tag input](https://koobiq.io/en/components/tag-input.md): Tag Input lets users enter multiple values as tags and supports keyboard navigation, selection, and removal. Entry point: `@koobiq/components/tags`.
- [Tag list](https://koobiq.io/en/components/tag-list.md): Tag List displays a collection of tags and supports keyboard navigation, multiple selection, and removal. Entry point: `@koobiq/components/tags`.
- [Textarea](https://koobiq.io/en/components/textarea.md): `KbqTextarea` — component for multi-line text input. Entry point: `@koobiq/components/textarea`.
- [Time range](https://koobiq.io/en/components/time-range.md): Time range selection menu. Entry point: `@koobiq/components/time-range`.
- [Timepicker](https://koobiq.io/en/components/timepicker.md): A time field (timepicker) is a special input field that allows entering only time. Entry point: `@koobiq/components/timepicker`.
- [Timezone](https://koobiq.io/en/components/timezone.md): `kbq-timezone-select` is a timezone selection component that extends `kbq-select`. Entry point: `@koobiq/components/timezone`.
- [Title](https://koobiq.io/en/components/title.md): The `kbq-title` directive shows a [tooltip](https://koobiq.io/en/components/tooltip.md) with the full text when the element's content does not fit and is truncated with an ellipsis. Entry point: `@koobiq/components/title`.
- [Toast](https://koobiq.io/en/components/toast.md): A toast is a non-modal message displayed on top of all elements on the screen. Entry point: `@koobiq/components/toast`.
- [Toggle](https://koobiq.io/en/components/toggle.md): **State toggle button:** on or off. Entry point: `@koobiq/components/toggle`.
- [Tooltip](https://koobiq.io/en/components/tooltip.md): Tooltip — a hint that appears on hover or focus. Entry point: `@koobiq/components/tooltip`.
- [Topbar](https://koobiq.io/en/components/top-bar.md): Topbar is a toolbar that always remains visible on the page and provides quick access to navigation and controls. Entry point: `@koobiq/components/top-bar`.
- [Tree](https://koobiq.io/en/components/tree.md): A hierarchical list (tree) is a tree-structured catalog for working with large amounts of data. Entry point: `@koobiq/components/tree`.
- [Tree select](https://koobiq.io/en/components/tree-select.md): Tree Select lets users search and select one or more values from hierarchical data while preserving the tree structure. Entry point: `@koobiq/components/tree-select`.
- [Username](https://koobiq.io/en/components/username.md): The pattern is used when the interface refers to an internal user. Entry point: `@koobiq/components/username`.

## Other

- [Date formatter](https://koobiq.io/en/other/date-formatter.md): DateFormatter is a unified system for formatting dates and times.
- [Filesize formatter](https://koobiq.io/en/other/filesize-formatter.md): **Filesize formatter** automatically converts values into kilobytes, megabytes, gigabytes, etc., taking localization into account.
- [Forms](https://koobiq.io/en/other/forms.md): Form layout utilities arrange fields, labels, hints, and validation messages in horizontal, vertical, or grouped layouts.
- [Number formatter](https://koobiq.io/en/other/number-formatter.md): Every language has its own norms for writing numbers: the decimal separator, digit grouping, the labels for thousands and millions.
- [Validation](https://koobiq.io/en/other/validation.md): Form-field controls display errors via [`ErrorStateMatcher`](https://koobiq.io/en/other/validation.md) — a small policy object that decides _when_ to surface a control's existing errors.
- [Smart search](https://koobiq.io/en/other/search-smart.md): Search fields in the kit's components leave matching entirely to the consumer, and the default reach-for is substring search.

## Icons

- [Icons](https://raw.githubusercontent.com/koobiq/icons/12.3.0/llms.txt): the llms.txt of `@koobiq/icons` 12.3.0, with its packages, the naming of the icons and how to import them.
- [Icon reference](https://raw.githubusercontent.com/koobiq/icons/12.3.0/llms-full.txt): every icon name with its sizes, tags and imports.

## Optional

- [Full documentation](https://koobiq.io/llms-full.txt): every item above in one file, several megabytes long: search it rather than read it whole.