Main
 Installation Versioning Directory structure Theming Typography Design tokens Schematics Migration guides
Components
 Accordion Actions panel App Switcher AG grid Alert Autocomplete Badge Breadcrumbs Button Button toggle Checkbox Clamped text Code block Content panel Core Datepicker Divider Description list Dropdown Dynamic translation Empty state Icon Icon Button New Icon Item Inline edit Input File upload Filter Bar Form field Layout flex Link List Overlay Markdown Modal Navbar Notification Center Overflow items Popover Progress bar Progress spinner Radio Resizer Scrollbar Select Search expandable Sidebar Sidepanel Skeleton New Splitter Split button Table Tabs Tag Tag autocomplete Tag input Tag list Textarea Timepicker Time range Timezone Title Toast Toggle Tooltip Topbar Tree Tree select Username
Other
 Date formatter Filesize formatter Forms Number formatter Validation
Icons
CDK
 Key managers Keycodes
Interface and examples language
English
Version
19.3.0
Installation

This guide describes how to set up an Angular project to use @koobiq/components.

Installing dependencies

Installation using Angular CLI:

ng add @koobiq/components

Manual installation:

npm install @koobiq/cdk @koobiq/components @koobiq/icons @koobiq/design-tokens @koobiq/angular-luxon-adapter @koobiq/date-adapter @koobiq/date-formatter luxon @messageformat/core
Setting up styles

After installation, you need to include the library styles. Add the following files to the styles array in your angular.json file:

"styles": [
  "node_modules/@koobiq/icons/fonts/kbq-icons.css",
  "node_modules/@koobiq/design-tokens/web/css-tokens.css",
  "node_modules/@koobiq/design-tokens/web/css-tokens-light.css",
  "node_modules/@koobiq/components/prebuilt-themes/theme.css",
  "src/styles.css"
]
Setting up theme

Add the theme class to the <body> element in your index.html file:

<body class="kbq-light">
    <app-root></app-root>
</body>

For more information about theme setup and switching, see the theming section.

Setting up typography

For proper component rendering, it is recommended to include the Inter font.

For more information, see the typography section.

Using a component

Add a component to your application to verify that everything works correctly.

import { KbqButtonModule } from '@koobiq/components/button';
import { KbqIconModule } from '@koobiq/components/icon';
 
@Component({
    imports: [KbqButtonModule, KbqIconModule],
    template: `
        <button kbq-button>
            <i kbq-icon="kbq-plus_16"></i>
            Button
        </button>
    `
})
export class AppComponent {}
Docs Feedback
If you have any questions or would like to contribute to writing the documentation, please create an issue in our GitHub repository.
Installing dependencies
Setting up styles
Setting up theme
Setting up typography
Using a component