CoreUI for Angular

website·Indexed 37 days ago

A UI component library written in TypeScript for Angular. It provides a comprehensive set of responsive components including a flexbox grid system, form controls, navigation elements (Navbar, Breadcrumbs), and interactive components like Modals, Accordions, and Date Pickers. The library supports customization via CSS variables and SASS, and includes an MCP server for AI coding assistant integration.

Tokens: 48.1K
Snippets: 291
Records: 412
Agent score: 72%

What's inside CoreUI

Overview of the Angular Stepper Component
The Angular Stepper component is used to build multi-step form wizards. It supports horizontal and vertical layouts, built-in form validation, custom indicators, and integration with Angular forms. It was added in version 5.5.2.
https://coreui.io/angular/docs/llms-full.txt?llms-doc=angular-input-group-componentwebsitellms
Overview of Angular Autocomplete Component
The CoreUI Angular Autocomplete component provides an intelligent suggestion dropdown for input fields. It supports real-time filtering, external API integration, custom templates for options and groups, and is designed with accessibility-first principles. It was added in version 5.5.20.
https://coreui.io/angular/docs/llms-full.txt?llms-doc=angular-date-picker-componentwebsitellms
Update template layout for CoreUI Angular v5
The default layout structure in src/app/layout/default-layout/ has changed between v4 and v5. Notable changes include the introduction of c-sidebar-header, c-sidebar-footer, app-header, app-footer, and app-aside. The c-sidebar-toggler component has been replaced by the cSidebarToggler directive.
https://coreui.io/angular/docs/llms-full.txt?llms-doc=coreui-4-angular-migrationwebsitellms
Implement One Time Password (OTP) Input in Angular
The c-one-time-password component and cOtp directive provide a secure input field for authentication flows (e.g., 2FA, SMS verification). It features automatic character navigation, paste support, and validation. It supports Reactive, Template-driven, and Signal forms.
https://coreui.io/angular/docs/llms-full.txt?llms-doc=angular-one-time-password-otp-input-componentwebsitellms
Use CoreUI Icons in Angular projects
CoreUI Icons provides over 1500 crafted symbols available in SVG, PNG, and Webfont formats, suitable for both web and mobile applications.
https://coreui.io/angular/docs/llms-full.txt?llms-doc=angular-icons-componentwebsitellms
Access LLM-optimized documentation for CoreUI for Angular
CoreUI for Angular provides three specific endpoints designed to help AI models and assistants navigate and ingest documentation more efficiently:
https://coreui.io/angular/docs/llms-full.txt?llms-doc=llms-txtwebsitellms
Use the Angular Form Check component
The c-form-check component is used to create consistent checkboxes, radio buttons, and toggle switches.
- Checkboxes: Used for selecting one or several options.
- Radios: Used for selecting one option from many.
- Switches: Rendered by setting the switch property to true on a checkbox markup.
- Toggle Buttons: Created by adding the button property to c-form-check.
```
import { FormCheckComponent } from '@coreui/angular'
```
https://coreui.io/angular/docs/llms-full.txt?llms-doc=angular-one-time-password-otp-input-componentwebsitellms
Implement an Angular Carousel slideshow
The Angular Carousel is a slideshow component used to cycle through a group of images, text, or HTML elements. It supports previous/next controls, indicators, and captions. It automatically pauses sliding when the webpage is not visible (via the Page Visibility API).
https://coreui.io/angular/docs/llms-full.txt?llms-doc=angular-close-button-componentwebsitellms
Install CoreUI Angular Chart.js wrapper
To use the CoreUI Angular wrapper for Chart.js 4.x, you must install the base Chart.js library, the CoreUI tooltip plugin/styles, and the Angular component wrapper.
```
# Option 1: Using Angular CLI
ng add @coreui/angular-chartjs@5.7

# Option 2: Using NPM
npm install chart.js@4
npm install @coreui/chartjs@4
npm install @coreui/angular-chartjs@5.7
```
https://coreui.io/angular/docs/llms-full.txt?llms-doc=coreui-angular-templateswebsitellms
Import FormModule for CoreUI components
To use CoreUI form components within a module-based Angular application, import the FormModule from @coreui/angular into your NgModule.
```
import { NgModule } from '@angular/core';
import { FormModule } from '@coreui/angular';

@NgModule({
  imports: [FormModule]
})
export class CustomAppModule {}
```
https://coreui.io/angular/docs/llms-full.txt?llms-doc=angular-range-componentwebsitellms
Use the Angular Search Button component
The <c-search-button> is a trigger element for search entry points or command palettes. It renders as a <button type="button"> and supports both click interactions and configurable keyboard shortcuts (e.g., meta+/ or ctrl+/). Use the (trigger) output to handle activation.
https://coreui.io/angular/docs/llms-full.txt?llms-doc=angular-search-button-componentwebsitellms
Integrate Angular OTP Input with Forms
The OTP Input component is compatible with three Angular form approaches:
1. Reactive Forms: Bind the value using the formControlName directive.
2. Template-driven Forms: Bind the value using the ngModel directive.
3. Signal Forms: Bind a field using the [formField] directive to keep the code, validation state, and touched flag in the signal model.
https://coreui.io/angular/docs/llms-full.txt?llms-doc=angular-one-time-password-otp-input-componentwebsitellms