# Shared UI Component Library {#shared-ui-component-library}


Reusable UI components available across the Gauzy webapp.


## Core Components {#core-components}



### Avatar Component {#avatar-component}


```html
<ga-avatar [src]="user.imageUrl" [name]="user.name" [size]="40"></ga-avatar>
```


### Status Badge {#status-badge}


```html
<ga-status-badge [status]="task.status" [type]="'task'"></ga-status-badge>
```


### Date Picker {#date-picker}


```html
<ga-date-range-picker
  [start]="startDate"
  [end]="endDate"
  (dateChange)="onDateChange($event)"
>
</ga-date-range-picker>
```


### Confirmation Dialog {#confirmation-dialog}


```typescript
this.dialogService
  .open(ConfirmComponent, {
    context: {
      title: "Delete Task",
      message: "Are you sure you want to delete this task?",
    },
  })
  .onClose.subscribe((confirmed) => {
    if (confirmed) this.deleteTask();
  });
```


### Tags Input {#tags-input}


```html
<ga-tags-input
  [tags]="selectedTags"
  [availableTags]="allTags"
  (tagsChange)="onTagsChange($event)"
>
</ga-tags-input>
```


## Layout Components {#layout-components}


| Component        | Description                 |
| ---------------- | --------------------------- |
| `PageHeader`     | Page title with breadcrumbs |
| `EmptyState`     | No-data placeholder         |
| `LoadingSpinner` | Loading indicator           |
| `Sidebar`        | Collapsible sidebar         |
| `ActionBar`      | Top action buttons bar      |


## Form Components {#form-components}


| Component        | Description              |
| ---------------- | ------------------------ |
| `SelectEmployee` | Employee picker dropdown |
| `SelectProject`  | Project picker           |
| `SelectOrg`      | Organization selector    |
| `CurrencyInput`  | Amount + currency input  |
| `RichTextEditor` | Quill-based rich text    |


## Related Pages {#related-pages}


- [UI Components](https://sourcey-gauzy.pages.dev/frontend/ui-components/index.md) — component overview
- [Theming](https://sourcey-gauzy.pages.dev/frontend/theming/index.md) — theme customization
- [Angular Module Architecture](https://sourcey-gauzy.pages.dev/frontend/angular-module-architecture/index.md) — module setup