olymprex-ui

Features

• 🧩 63+ Components — Button, Input, Modal, DatePicker, Autocomplete, DataTable, and much more
• 🎨 Design Tokens — Full SCSS token system with CSS Custom Properties
• 🌗 Light & Dark Themes — Built-in theming via data-olx-theme attribute
• ⚡ Angular Signals — All components built with the modern Angular Signals API
• ♿ Accessible — ARIA attributes, keyboard navigation, and focus management
• 📦 Standalone Components — No NgModule required
• 🔧 TypeScript First — Full type safety with strict mode support

Installation

npm install olymprex-ui

Peer Dependencies

npm install @angular/core @angular/common

Setup

1. Add the theme stylesheet

In your angular.json:

"styles": [
  "node_modules/olymprex-ui/src/styles/olymprex-ui.scss"
]

Or in your styles.scss:

@use 'olymprex-ui/src/styles/olymprex-ui';

2. Import components

import { ButtonComponent, InputComponent, CardComponent } from 'olymprex-ui';

@Component({
  standalone: true,
  imports: [ButtonComponent, InputComponent, CardComponent],
  template: `
    <olx-button variant="primary" (click)="save()">Save</olx-button>
    <olx-input placeholder="Search..." [(ngModel)]="query" />
  `
})
export class MyComponent {
  query = '';
  save() {}
}

Theming

Light / Dark Mode

The library uses CSS Custom Properties scoped to a theme attribute. Toggle themes by setting data-olx-theme on your root element:

<!-- Light (default) -->
<html>

<!-- Dark -->
<html data-olx-theme="dark">

Or switch programmatically:

import { ThemeService } from 'olymprex-ui';

@Component({ ... })
export class AppComponent {
  private theme = inject(ThemeService);

  toggleTheme() {
    this.theme.toggle();
  }
}

Customize Tokens

Override any CSS variable in your styles.scss:

:root {
  --olx-color-primary: #your-brand-color;
  --olx-radius-lg: 12px;
}

Components

Forms

| Component | Selector | Description | |---|---|---| | Input | <olx-input> | Text input with variants and states | | Textarea | <olx-textarea> | Multi-line text input | | Select | <olx-select> | Dropdown select | | Autocomplete | <olx-autocomplete> | Searchable combobox | | Checkbox | <olx-checkbox> | Checkbox with indeterminate state | | Radio | <olx-radio> | Radio button group | | Switch | <olx-switch> | Toggle switch | | Slider | <olx-slider> | Range slider | | Rating | <olx-rating> | Star rating input | | NumberInput | <olx-number-input> | Numeric input with stepper | | OtpInput | <olx-otp-input> | One-time password input | | PhoneInput | <olx-phone-input> | Phone number input with mask | | MaskedInput | <olx-masked-input> | Input with custom mask | | TagInput | <olx-tag-input> | Multi-value tag input | | ColorPicker | <olx-color-picker> | HEX/RGB/HSL color picker | | DatePicker | <olx-date-picker> | Date and date range picker | | FormField | <olx-form-field> | Label + validation wrapper |

Navigation

| Component | Selector | Description | |---|---|---| | Breadcrumb | <olx-breadcrumb> | Breadcrumb navigation | | Tabs | <olx-tabs> | Tabbed navigation | | Pagination | <olx-pagination> | Page navigation | | Stepper | <olx-stepper> | Multi-step progress | | Segmented | <olx-segmented> | Segmented control |

Feedback

| Component | Selector | Description | |---|---|---| | Alert | <olx-alert> | Inline alert messages | | Toast | ToastService | Toast notifications service | | Spinner | <olx-spinner> | Loading spinner | | Progress | <olx-progress> | Progress bar | | Skeleton | <olx-skeleton> | Loading skeleton |

Overlay

| Component | Selector | Description | |---|---|---| | Modal | ModalService | Modal dialogs service | | Drawer | DrawerService | Side drawer/sheet service | | Popover | [olxPopover] | Popover directive | | Tooltip | [olxTooltip] | Tooltip directive | | Dropdown | <olx-dropdown> | Dropdown menu | | ContextMenu | [olxContextMenu] | Right-click context menu | | HoverCard | <olx-hover-card> | Rich hover card | | ConfirmDialog | <olx-confirm-dialog> | Confirmation prompt | | CommandPalette | CommandPaletteService | Command palette (⌘K) |

Data Display

| Component | Selector | Description | |---|---|---| | Table | <olx-table> | Sortable data table | | Badge | <olx-badge> | Status badge | | Avatar | <olx-avatar> | User avatar | | Chip | <olx-chip> | Dismissible chip/tag | | Card | <olx-card> | Content card | | List | <olx-list> | Structured list | | Accordion | <olx-accordion> | Collapsible sections | | Timeline | <olx-timeline> | Event timeline | | Stat | <olx-stat> | Statistic card | | Gauge | <olx-gauge> | Circular/linear gauge | | JsonViewer | <olx-json-viewer> | Collapsible JSON viewer | | CodeBlock | <olx-code-block> | Syntax-highlighted code |

Layout

| Component | Selector | Description | |---|---|---| | Divider | <olx-divider> | Section divider | | ScrollArea | <olx-scroll-area> | Custom scrollbar container | | Carousel | <olx-carousel> | Content carousel/slider | | Marquee | <olx-marquee> | Infinite scrolling ticker | | FileDrop | <olx-file-drop> | Drag-and-drop file upload |

Utilities

| Component | Selector | Description | |---|---|---| | Button | <olx-button> | Primary action button | | SplitButton | <olx-split-button> | Button with dropdown | | CopyButton | <olx-copy-button> | Copy-to-clipboard button | | Kbd | <olx-kbd> | Keyboard shortcut display | | AnimatedNumber | <olx-animated-number> | Counting number animation | | EmptyState | <olx-empty-state> | Empty content placeholder | | RichText | <olx-rich-text> | WYSIWYG text editor |

Quick Examples

Button

<olx-button variant="primary" size="md">Primary</olx-button>
<olx-button variant="outline" size="md">Outline</olx-button>
<olx-button variant="ghost" [loading]="true">Loading...</olx-button>

Form with validation

<olx-form-field label="Email" [required]="true" status="error" errorMessage="Invalid email">
  <olx-input type="email" [(ngModel)]="email" />
</olx-form-field>

Toast notifications

import { ToastService } from 'olymprex-ui';

export class MyComponent {
  private toast = inject(ToastService);

  showSuccess() {
    this.toast.success('Saved successfully!');
  }

  showError() {
    this.toast.error('Something went wrong.');
  }
}

Modal

import { ModalService } from 'olymprex-ui';

export class MyComponent {
  private modal = inject(ModalService);

  openModal() {
    this.modal.open(MyModalComponent, { title: 'Edit User' });
  }
}

Design Tokens

All components use CSS Custom Properties. You can reference them in your own styles:

.my-element {
  color: var(--olx-color-primary);
  border-radius: var(--olx-radius-lg);
  box-shadow: var(--olx-shadow-md);
  font-family: var(--olx-font-family);
  transition: var(--olx-transition-base);
}

Requirements

• Angular 21+
• TypeScript 5+
• SCSS support in your Angular project

License

MIT © Olymprex