Components
Over 40 standalone components cover layout, widgets and form controls. Every selector uses the lte- prefix; the exported class names follow the Lte…Component convention. Import each class into your component's imports array.
Layout
| Selector | Class | Purpose |
|---|---|---|
lte-dashboard-layout | DashboardLayoutComponent | Full app shell. |
lte-auth-layout | AuthLayoutComponent | Centered login/register layout. |
lte-app-content | AppContentComponent | Page wrapper + title/breadcrumbs. |
lte-topbar | TopbarComponent | Application header navbar. |
lte-sidebar | SidebarComponent | Off-canvas sidebar. |
lte-footer | FooterComponent | App footer. |
lte-color-mode-toggle | ColorModeToggleComponent | Light/dark toggle. |
lte-fullscreen-toggle | FullscreenToggleComponent | Fullscreen toggle. |
Widgets
| Selector | Class | Purpose |
|---|---|---|
lte-card | CardComponent | Card with collapse/maximize/remove tools. |
lte-small-box | SmallBoxComponent | Colored stat box. |
lte-info-box | InfoBoxComponent | Icon chip + number + progress. |
lte-alert | AlertComponent | Dismissible alert. |
lte-callout | CalloutComponent | Bordered notice. |
lte-progress | ProgressComponent | Progress bar. |
lte-progress-group | ProgressGroupComponent | Labeled progress row. |
lte-ratings | RatingsComponent | Star rating. |
lte-timeline | TimelineComponent | Vertical timeline. |
lte-profile-card | ProfileCardComponent | User profile card. |
lte-description-block | DescriptionBlockComponent | Stat block. |
lte-breadcrumb | BreadcrumbComponent | Standalone breadcrumb. |
lte-direct-chat | DirectChatComponent | Chat card + contacts pane. |
lte-tabs / lte-tab | TabsComponent / TabComponent | Tab container + panels. |
lte-accordion / lte-accordion-item | AccordionComponent / AccordionItemComponent | Accordion. |
lte-modal | ModalComponent | Bootstrap modal. |
lte-apex-chart | ApexChartComponent | ApexCharts wrapper. |
lte-datatable | DatatableComponent | Sortable table (simple-datatables). |
lte-command-palette | CommandPaletteComponent | ⌘K palette. |
Topbar dropdowns
NavMessagesComponent ([lte-nav-messages]), NavNotificationsComponent ([lte-nav-notifications]) and NavTasksComponent ([lte-nav-tasks]) drop into the topbar's [topbar-end] slot — see Layout.
Forms
The form controls implement ControlValueAccessor, so they work with reactive and template-driven forms, and also expose a model() for simple two-way binding.
| Selector | Class | Two-way model |
|---|---|---|
lte-button | ButtonComponent | — |
lte-input | InputComponent | [(value)] |
lte-textarea | TextareaComponent | [(value)] |
lte-select | SelectComponent | [(value)] |
lte-input-switch | InputSwitchComponent | [(checked)] |
lte-input-flatpickr | InputFlatpickrComponent | [(value)] |
lte-input-tom-select | InputTomSelectComponent | [(value)] |
Snippets
Card with a chart
<lte-card title="Sales" icon="bi-bar-chart" [collapsible]="true" [maximizable]="true">
<lte-apex-chart [options]="chartOptions()" />
<span footer>Updated just now</span>
</lte-card>Card inputs include theme (BootstrapTheme), variant ('default' | 'outline' | 'solid'), gradient, collapsible, maximizable and removable. Project the body into the default slot, a footer into [footer], and extra header buttons into [tools].
Stat boxes
<div class="col-lg-3 col-6">
<lte-small-box title="150" text="New Orders" icon="bi-bag" theme="primary" url="#" />
</div>
<div class="col-md-4">
<lte-info-box title="1,410" text="Bookmarks" icon="bi-bookmark" theme="info" [progress]="70" />
</div>Form input with binding
<lte-input label="Email" type="email" icon="bi-envelope" [(value)]="email" />
<lte-input-switch label="Email notifications" [(checked)]="notify" />
<lte-button theme="primary" icon="bi-save" type="submit">Save</lte-button>Theme inputs accept the standard Bootstrap variants: primary, secondary, success, info, warning, danger, light, dark.