# Nebular UI Components {#nebular-ui-components}


Guide to the Nebular component library used in the Gauzy frontend.


## Overview {#overview}


Gauzy uses [Nebular](https://akveo.github.io/nebular/) as the primary UI component library, providing:

- Themed components
- Multiple color themes
- Authentication UI
- Responsive layouts


## Core Components {#core-components}



### Layout {#layout}


```html
<nb-layout>
  <nb-layout-header fixed>
    <app-header></app-header>
  </nb-layout-header>
  <nb-sidebar>
    <nb-menu [items]="menuItems"></nb-menu>
  </nb-sidebar>
  <nb-layout-column>
    <router-outlet></router-outlet>
  </nb-layout-column>
</nb-layout>
```


### Cards {#cards}


```html
<nb-card>
  <nb-card-header>Employee List</nb-card-header>
  <nb-card-body>
    <!-- Content -->
  </nb-card-body>
  <nb-card-footer>
    <button nbButton status="primary">Add Employee</button>
  </nb-card-footer>
</nb-card>
```


### Forms {#forms}


```html
<nb-form-field>
  <nb-icon nbPrefix icon="person-outline"></nb-icon>
  <input nbInput fullWidth placeholder="Search employees" />
</nb-form-field>

<nb-select fullWidth placeholder="Status" [(selected)]="selectedStatus">
  <nb-option value="active">Active</nb-option>
  <nb-option value="inactive">Inactive</nb-option>
</nb-select>
```


### Dialogs {#dialogs}


```typescript
this.dialogService
  .open(ConfirmDialogComponent, {
    context: {
      title: "Delete Employee?",
      body: "This action cannot be undone.",
    },
  })
  .onClose.subscribe((confirmed) => {
    if (confirmed) this.delete();
  });
```


### Toastr Notifications {#toastr-notifications}


```typescript
this.toastrService.success("Employee created successfully", "Success");
this.toastrService.danger("Failed to save", "Error");
```


## Themes {#themes}


| Theme     | Variable    |
| --------- | ----------- |
| Default   | `default`   |
| Dark      | `dark`      |
| Cosmic    | `cosmic`    |
| Corporate | `corporate` |


## Related Pages {#related-pages}


- [Theme Customization](https://sourcey-gauzy.pages.dev/frontend/theme-customization-deep-dive/index.md) — themes
- [Form Handling](https://sourcey-gauzy.pages.dev/frontend/form-handling-patterns/index.md) — forms
- [Angular Module Architecture](https://sourcey-gauzy.pages.dev/frontend/angular-module-architecture/index.md) — modules