# UI Components {#ui-components}


Shared and reusable UI components across the Gauzy frontend.


## Component Libraries {#component-libraries}


| Library              | Package                       | Purpose               |
| -------------------- | ----------------------------- | --------------------- |
| **Nebular**          | `@nebular/theme`              | Primary UI framework  |
| **Angular Material** | `@angular/material`           | Additional components |
| **Smart Table**      | `angular2-smart-table`        | Data tables           |
| **FullCalendar**     | `@fullcalendar/angular`       | Calendar views        |
| **CKEditor**         | `@ckeditor/ckeditor5-angular` | Rich text editor      |


## Custom Components {#custom-components}



### Smart Table {#smart-table}


Used extensively for data grids:

```typescript
settings = {
  columns: {
    name: { title: "Name", type: "string" },
    email: { title: "Email", type: "string" },
    role: { title: "Role", type: "string" },
  },
  actions: { add: false, edit: true, delete: true },
  pager: { perPage: 10 },
};
```


### Date/Time Pickers {#datetime-pickers}


- Nebular datepicker for date selection
- Custom time range pickers
- Calendar integration for scheduling


### Tag Selectors {#tag-selectors}


Multi-select tag components for:

- Employee skills
- Task labels
- Project tags


### Avatar & Status {#avatar--status}


Employee avatar components with online/offline status indicators.


## Design Patterns {#design-patterns}



### Container/Presentational {#containerpresentational}


```
Container Component (Smart)
├── Fetches data from store/service
├── Handles user interactions
└── Passes data to presentational components

Presentational Component (Dumb)
├── Receives data via @Input()
├── Emits events via @Output()
└── Purely visual, no service dependencies
```


### Form Components {#form-components}


Reactive forms with validation:

```typescript
this.form = this.fb.group({
  name: ["", [Validators.required, Validators.minLength(3)]],
  email: ["", [Validators.required, Validators.email]],
  role: ["", Validators.required],
});
```


## Related Pages {#related-pages}


- [Frontend Overview](https://sourcey-gauzy.pages.dev/frontend/frontend-overview/index.md)
- [Theming](https://sourcey-gauzy.pages.dev/frontend/theming/index.md)