# 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: the text of its overview and examples tabs, which links every example, the API of its entry point and the variables of its component, each a file of its own. Without `.md`, the address opens the page itself. To pick the component for a task, start from [Which component when](https://next.koobiq.io/which-component-when.md): it maps the words of a request to the component and names the neighbor it is confused with. 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 of its entry point lists every input and output; where the text of a page disagrees with it, the API is right. - Put text controls, such as `input[kbqInput]`, `textarea[kbqTextarea]` and `kbq-select`, inside ``; 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 ``; an icon-only button needs an accessible label. - Do not use anything marked as deprecated in new code. ## Main - [Installation](https://next.koobiq.io/en/main/installation.md): This guide describes how to set up an Angular project to use `@koobiq/components`. - [AI agents](https://next.koobiq.io/en/main/ai-agents.md): AI coding agents, such as Claude Code, Codex, Cursor or GitHub Copilot, build better UI with Koobiq when they read its documentation instead of guessing. - [Versioning](https://next.koobiq.io/en/main/versioning.md): Our releases follow the versioning described in the [Semver spec](http://semver.org/). - [Theming](https://next.koobiq.io/en/main/theming.md): A theme in Koobiq is a set of CSS variables. - [Localization](https://next.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://next.koobiq.io/en/main/typography.md): Connecting fonts, which sources fit, the text classes and replacing the fonts. - [Design tokens](https://next.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://next.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://next.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://next.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://next.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://next.koobiq.io/en/components/ag-grid.md): AG Grid is designed for working with large tables. - [Alert](https://next.koobiq.io/en/components/alert.md): Shows important information on a page. Entry point: `@koobiq/components/alert`. - [App Switcher](https://next.koobiq.io/en/components/app-switcher.md): A menu for switching between applications and platforms. Entry point: `@koobiq/components/app-switcher`. - [Autocomplete](https://next.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://next.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://next.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://next.koobiq.io/en/components/button.md): Used to trigger actions. Entry point: `@koobiq/components/button`. - [Button Group](https://next.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://next.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://next.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://next.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://next.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://next.koobiq.io/en/components/code-block.md): `` is a component that displays reformatted text content with syntax highlighting. Entry point: `@koobiq/components/code-block`. - [Content panel](https://next.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://next.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://next.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://next.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://next.koobiq.io/en/components/divider.md): `` is a component that allows for koobiq styling of a line separator with various orientation options. Entry point: `@koobiq/components/divider`. - [Dropdown](https://next.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://next.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://next.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://next.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://next.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://next.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://next.koobiq.io/en/components/flag.md): The `kbq-flag` component shows a country flag. Entry point: `@koobiq/components/flag`. - [Form field](https://next.koobiq.io/en/components/form-field.md): `` 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://next.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://next.koobiq.io/en/components/icon.md): Uses `@koobiq/icons` CSS font. Entry point: `@koobiq/components/icon`. - [Icon Button](https://next.koobiq.io/en/components/icon-button.md): For icon buttons (clickable icons). Entry point: `@koobiq/components/icon`. - [Icon Item](https://next.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://next.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://next.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://next.koobiq.io/en/components/layout-flex.md): Layout flex provides Koobiq CSS classes for arranging, aligning, and ordering elements in flex containers. - [Link](https://next.koobiq.io/en/components/link.md): `KbqLink` is a link that takes the user to another page, a document, or an external site. Entry point: `@koobiq/components/link`. - [List](https://next.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://next.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://next.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://next.koobiq.io/en/components/navbar.md): The main menu allows for product navigation. Entry point: `@koobiq/components/navbar`. - [Notification Center](https://next.koobiq.io/en/components/notification-center.md): Notification center — a panel for application notifications. Entry point: `@koobiq/components/notification-center`. - [Overflow items](https://next.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://next.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://next.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://next.koobiq.io/en/components/progress-bar.md): `` is a component that displays a progress indicator. Entry point: `@koobiq/components/progress-bar`. - [Progress spinner](https://next.koobiq.io/en/components/progress-spinner.md): `` is a component that displays a progress indicator as a spinner. Entry point: `@koobiq/components/progress-spinner`. - [Radio](https://next.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://next.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://next.koobiq.io/en/components/scrollbar.md): `KbqScrollbar` is a customizable scrollbar. Entry point: `@koobiq/components/scrollbar`. - [Search expandable](https://next.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://next.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://next.koobiq.io/en/components/sidebar.md): Component designed to add collapsible side content. Entry point: `@koobiq/components/sidebar`. - [Sidepanel](https://next.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://next.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://next.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://next.koobiq.io/en/components/splitter.md): Splitter resizes neighboring panels by dragging the separator. Entry point: `@koobiq/components/splitter`. - [Table](https://next.koobiq.io/en/components/table.md): A table is similar to a grid but simpler in structure. Entry point: `@koobiq/components/table`. - [Tabs](https://next.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://next.koobiq.io/en/components/tag.md): Tags are used within the [`Tag list`](https://next.koobiq.io/en/components/tag-list.md) component in input fields to represent selected values: [`Select Multiple`](https://next.koobiq.io/en/components/select.md#multiple-selection), [`Tag autocomplete`](https://next.koobiq.io/en/components/tag-autocomplete.md), [`Tag input`](https://next.koobiq.io/en/components/tag-input.md). Entry point: `@koobiq/components/tags`. - [Tag autocomplete](https://next.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://next.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://next.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://next.koobiq.io/en/components/textarea.md): `KbqTextarea` — component for multi-line text input. Entry point: `@koobiq/components/textarea`. - [Time range](https://next.koobiq.io/en/components/time-range.md): Time range selection menu. Entry point: `@koobiq/components/time-range`. - [Timepicker](https://next.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://next.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://next.koobiq.io/en/components/title.md): The `kbq-title` directive shows a [tooltip](https://next.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://next.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://next.koobiq.io/en/components/toggle.md): **State toggle button:** on or off. Entry point: `@koobiq/components/toggle`. - [Tooltip](https://next.koobiq.io/en/components/tooltip.md): Tooltip — a hint that appears on hover or focus. Entry point: `@koobiq/components/tooltip`. - [Topbar](https://next.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://next.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://next.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://next.koobiq.io/en/components/username.md): The component displays user information in a consistent style and builds the label from the profile data, following the selected display mode and the compact option. Entry point: `@koobiq/components/username`. ## Other - [Date formatter](https://next.koobiq.io/en/other/date-formatter.md): DateFormatter is a unified system for formatting dates and times. - [Filesize formatter](https://next.koobiq.io/en/other/filesize-formatter.md): **Filesize formatter** automatically converts values into kilobytes, megabytes, gigabytes, etc., taking localization into account. - [Forms](https://next.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://next.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://next.koobiq.io/en/other/validation.md): Form-field controls display errors via [`ErrorStateMatcher`](https://next.koobiq.io/en/other/validation.md) — a small policy object that decides _when_ to surface a control's existing errors. - [Smart search](https://next.koobiq.io/en/other/search-smart.md): Substring search works for simple queries, but it does not find a value whose query parts are separated by other characters. ## Icons - [Icons](https://raw.githubusercontent.com/koobiq/icons/12.5.0/llms.txt): the llms.txt of `@koobiq/icons` 12.5.0, with its packages, the naming of the icons and how to import them. - [Icon reference](https://raw.githubusercontent.com/koobiq/icons/12.5.0/llms-full.txt): every icon name with its sizes, tags and imports. ## Optional - [Full documentation](https://next.koobiq.io/llms-full.txt): every item above in one file, several megabytes long: search it rather than read it whole.