@xron-ui/angular

Angular 20 standalone component library built with TypeScript and Tailwind CSS.

Installation

npm install @xron-ui/angular

Usage

Import the stylesheet once in your application entry.

On src/styles.scss:

@import "@xron-ui/angular/styles.css";

Import components:

import { Button, Spinner } from "@xron-ui/angular";

Example:

import { Component } from "@angular/core";

import { Button } from "@xron-ui/angular";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [Button],
  template: ` <xr-button> Submit </xr-button> `,
})
export class AppComponent {}

Components

Form

• Autocomplete
• Checkbox ✅️
• FormControl ✅️
• HelperText ✅️
• Input ✅️
• InputPassword ✅️
• InputFile
• Label ✅️
• MultiSelect
• Radio ✅️
• Select ✅️
• Switch ✅️
• Textarea ✅️

UI

• Avatar
• Badge ✅️
• Button ✅️
• Modal
• Skeleton
• Spinner ✅️
• Text
• Tooltip

Table

• PageSize
• Pagination
• Table

Button

Buttons allow users to perform actions and support multiple semantic colors, visual appearances, sizes, and states.

Example

Solid

<xr-button> Save </xr-button>

<xr-button variant="secondary"> Cancel </xr-button>

Outline

<xr-button appearance="outline"> Save </xr-button>

<xr-button variant="success" appearance="outline"> Success </xr-button>

Ghost

<xr-button appearance="ghost"> Cancel </xr-button>

<xr-button variant="error" appearance="ghost"> Delete </xr-button>

Loading

<xr-button [loading]="true"> Saving... </xr-button>

Inputs

| Input | Type | Default | Description | | ---------- | --------------------------------------------------------------- | ----------- | ----------------------------------------------------- | | variant | "primary" \| "secondary" \| "success" \| "warning" \| "error" | "primary" | Semantic color of the button | | appearance | "solid" \| "outline" \| "ghost" | "solid" | Visual appearance of the button | | size | "sm" \| "md" \| "lg" | "md" | Button size | | rounded | boolean | false | Displays a fully rounded button | | fullWidth | boolean | false | Makes the button span the full width of its container | | loading | boolean | false | Shows a loading spinner and disables the button | | disabled | boolean | false | Disables the button |

Content

<xr-button> Button Content </xr-button>

Spinner

Spinners indicate that an operation is currently in progress.

Example

Default

<xr-spinner />

Sizes

<xr-spinner size="xs" />

<xr-spinner size="sm" />

<xr-spinner size="md" />

<xr-spinner size="lg" />

<xr-spinner size="xl" />

Inputs

| Input | Type | Default | Description | | ----- | -------------------------------------- | ------- | ------------------------- | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | "md" | Controls the spinner size |

Badge

Badges display short status labels, categories, or metadata. They support multiple semantic colors, sizes, and optional outline styling.

Example

Solid

<xr-badge>Primary</xr-badge>

<xr-badge variant="secondary">Secondary</xr-badge>

<xr-badge variant="success">Success</xr-badge>

<xr-badge variant="warning">Warning</xr-badge>

<xr-badge variant="danger">Danger</xr-badge>

<xr-badge variant="info">Info</xr-badge>

Outline

<xr-badge outline>Primary</xr-badge>

<xr-badge variant="secondary" outline>Secondary</xr-badge>

<xr-badge variant="success" outline>Success</xr-badge>

<xr-badge variant="warning" outline>Warning</xr-badge>

<xr-badge variant="danger" outline>Danger</xr-badge>

<xr-badge variant="info" outline>Info</xr-badge>

Sizes

<xr-badge size="sm">Small</xr-badge>

<xr-badge size="md">Medium</xr-badge>

<xr-badge size="lg">Large</xr-badge>

Inputs

| Input | Type | Default | Description | | ------- | -------------------------------------------------------------------------- | ----------- | ------------------------------------------ | | variant | "primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "info" | "primary" | Semantic color of the badge | | size | "sm" \| "md" \| "lg" | "md" | Badge size | | outline | boolean | false | Displays the badge using the outline style |

Content

<xr-badge>Badge Content</xr-badge>

Label

Labels provide accessible text descriptions for form controls. When used inside a FormControl, the for attribute is automatically associated with the generated input id. You can also specify the target manually using the htmlFor input.

Example

Basic

<xr-label>Email Address</xr-label>

With htmlFor

<xr-label htmlFor="email"> Email Address </xr-label>

<input id="email" type="email" />

Inside FormControl

<xr-form-control>
  <xr-label>Email Address</xr-label>

  <xr-input />
</xr-form-control>

The label will automatically use the generated id from xr-form-control.

Inputs

| Input | Type | Default | Description | | ------- | -------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------ | | htmlFor | string | undefined | Associates the label with the specified form control. When omitted inside xr-form-control, the generated id is used automatically. |

Content

<xr-label>Label Content</xr-label>

HelperText

Helper text provides additional information, validation messages, or guidance for form fields. It supports normal and error states.

Example

Default

<xr-helper-text> Enter your email address. </xr-helper-text>

Error

<xr-helper-text [error]="true"> Email address is required. </xr-helper-text>

With Input

<input type="email" placeholder="Email" />

<xr-helper-text> We will never share your email. </xr-helper-text>

Inputs

| Input | Type | Default | Description | | ----- | --------- | ------- | ---------------------------------------------- | | error | boolean | false | Displays the helper text using the error style |

Content

<xr-helper-text> Helper text content </xr-helper-text>

FormControl

Form controls provide a wrapper for form fields by combining labels, inputs, and helper text. They automatically connect labels with form controls and provide consistent spacing and validation states.

Example

Basic

<xr-form-control label="Email Address">
  <xr-input placeholder="Enter your email" />
</xr-form-control>

With Helper Text

<xr-form-control
  label="Email Address"
  helperText="We will never share your email."
>
  <xr-input placeholder="Enter your email" />
</xr-form-control>

Required

<xr-form-control label="Username" [required]="true">
  <xr-input placeholder="Username" />
</xr-form-control>

Error

<xr-form-control
  label="Email"
  helperText="Email address is invalid."
  [error]="true"
>
  <xr-input [error]="true" placeholder="Email" />
</xr-form-control>

Inputs

| Input | Type | Default | Description | | ---------- | --------- | ----------- | ---------------------------------------------------------------- | | label | string | undefined | Label text displayed above the form control | | helperText | string | undefined | Additional helper or validation text displayed below the control | | error | boolean | false | Displays helper text and child components using error state | | required | boolean | false | Displays a required indicator next to the label |

Content

<xr-form-control>
  <xr-input />
</xr-form-control>

Input

Inputs allow users to enter and edit text values. They support multiple sizes, rounded styles, validation states, automatic form control integration, and two-way binding using Angular signals.

Example

Basic

<xr-input placeholder="Enter text" />

Sizes

<xr-input size="sm" placeholder="Small" />

<xr-input size="md" placeholder="Medium" />

<xr-input size="lg" placeholder="Large" />

Rounded

<xr-input [rounded]="true" placeholder="Rounded input" />

Error

<xr-input [error]="true" placeholder="Invalid input" />

Disabled

<xr-input disabled placeholder="Disabled input" />

Two Way Binding

<xr-input [(modelValue)]="value" />

Inputs

| Input | Type | Default | Description | | ---------- | ---------------------- | ------- | --------------------------------------------- | | size | "sm" \| "md" \| "lg" | "md" | Input size | | rounded | boolean | false | Displays the input with fully rounded corners | | error | boolean | false | Displays the input using the error style | | modelValue | string \| number | "" | Input value with two-way binding support |

Content

<xr-input placeholder="Input content" />

InputFile

InputFile allows users to select one or multiple files using the system file picker or drag and drop. It supports image previews, validation, custom content, and integrates with FormControl.

Example

Basic

<xr-input-file />

Preview

<xr-input-file [preview]="true" />

Circle Preview

<xr-input-file [preview]="true" previewShape="circle" />

Multiple Files

<xr-input-file multiple />

Rounded

<xr-input-file rounded />

Error

<xr-input-file error />

Validation

<xr-input-file
  [maxSize]="1048576"
  (validationError)="onValidationError($event)"
/>

FormControl

<xr-form-control label="Profile Image" helperText="Maximum size 1 MB">
  <xr-input-file [preview]="true" />
</xr-form-control>

Drag & Drop

Files can also be selected by dragging them onto the input area.

<xr-input-file />

Image Preview

<xr-input-file [preview]="true" />

Custom Content

Filename

<xr-input-file>
  <ng-template #filename> Select your document... </ng-template>
</xr-input-file>

Icon

<xr-input-file>
  <ng-template #icon> 📁 </ng-template>
</xr-input-file>

Clear Button

<xr-input-file>
  <ng-template #clear> Remove </ng-template>
</xr-input-file>

Preview

<xr-input-file [preview]="true">
  <ng-template #preview> Custom Preview </ng-template>
</xr-input-file>

Inputs

| Input | Type | Default | Description | | ------------ | ------------------------ | ------------------ | ---------------------------------- | | modelValue | File \| File[] \| null | null | Selected file or files | | placeholder | string | "Choose file..." | Placeholder text | | preview | boolean | false | Displays image preview | | previewShape | "square" \| "circle" | "square" | Shape of preview images | | previewSize | number | 120 | Width and height of preview images | | maxSize | number | - | Maximum allowed file size in bytes | | allowedTypes | string[] | - | Allowed MIME types | | size | "sm" \| "md" \| "lg" | "md" | Input size | | rounded | boolean | false | Displays rounded input | | error | boolean | false | Displays error styling |

Native Attributes

The component forwards native file input attributes to the underlying <input type="file">.

Example:

<xr-input-file multiple accept="image/*" />

Supported native attributes include:

• multiple
• accept
• capture
• required
• disabled
• name

Outputs

| Output | Type | Description | | --------------- | -------- | -------------------------------- | | validationError | string | Fired when file validation fails |

Content

<xr-input-file />

InputPassword

InputPassword allows users to securely enter passwords and toggle password visibility. It supports multiple sizes, rounded style, error state, and integrates with FormControl.

Example

Basic

<xr-input-password />

Rounded

<xr-input-password rounded />

Error

<xr-input-password error />

FormControl

<xr-form-control label="Password" helperText="Minimum 8 characters">
  <xr-input-password />
</xr-form-control>

Inputs

| Input | Type | Default | Description | | ---------- | ---------------------- | ------- | ---------------------- | | modelValue | string | "" | Password value | | size | "sm" \| "md" \| "lg" | "md" | Input size | | rounded | boolean | false | Displays rounded input | | error | boolean | false | Displays error state |

Features

• Toggle password visibility
• Native password input
• FormControl integration
• Disabled state
• Supports all native input attributes

Content

<xr-input-password />

Checkbox

Checkbox allows users to select one or more options. It supports checked, indeterminate, disabled, and error states, and integrates with FormControl.

Example

Basic

<xr-checkbox [(ngModel)]="checked"> Accept terms and conditions </xr-checkbox>

Checked

<xr-checkbox [modelValue]="true"> Checked </xr-checkbox>

Indeterminate

<xr-checkbox [indeterminate]="true"> Indeterminate </xr-checkbox>

Error

<xr-checkbox error> Error </xr-checkbox>

Disabled

<xr-checkbox disabled> Disabled </xr-checkbox>

FormControl

<xr-form-control
  label="Agreement"
  helperText="You must accept before continuing."
>
  <xr-checkbox [(ngModel)]="acceptTerms">
    I agree to the Terms and Conditions
  </xr-checkbox>
</xr-form-control>

Inputs

| Input | Type | Default | Description | | ------------- | --------- | ------- | ---------------------------- | | modelValue | boolean | false | Checked state | | error | boolean | false | Displays error styling | | indeterminate | boolean | false | Displays indeterminate state |

Native Attributes

The component forwards native checkbox attributes to the underlying <input type="checkbox">.

Example:

<xr-checkbox disabled required name="agreement"> Accept terms </xr-checkbox>

Supported native attributes include:

• disabled
• required
• name
• value
• tabindex
• autofocus

Content

With Label

<xr-checkbox [(ngModel)]="checked"> Accept Terms & Conditions </xr-checkbox>

With FormControl

<xr-form-control
  label="Terms & Conditions"
  helperText="You must accept before continuing."
>
  <xr-checkbox [(ngModel)]="checked"> Accept Terms & Conditions </xr-checkbox>
</xr-form-control>

Radio

Radio buttons allow users to select a single option from a group. They support validation states, disabled state, Angular Forms (ngModel), and integrate seamlessly with FormControl.

Example

Basic

<xr-radio-group [(ngModel)]="framework">
  <xr-radio value="react"> React </xr-radio>

  <xr-radio value="vue"> Vue </xr-radio>

  <xr-radio value="angular"> Angular </xr-radio>
</xr-radio-group>

Error

<xr-radio-group [(ngModel)]="framework">
  <xr-radio value="react" error> React </xr-radio>

  <xr-radio value="vue" error> Vue </xr-radio>
</xr-radio-group>

Disabled

<xr-radio-group [(ngModel)]="framework" disabled>
  <xr-radio value="react"> React </xr-radio>

  <xr-radio value="vue"> Vue </xr-radio>

  <xr-radio value="angular"> Angular </xr-radio>
</xr-radio-group>

With FormControl

<xr-form-control label="Framework" helperText="Select one framework" required>
  <xr-radio-group [(ngModel)]="framework">
    <xr-radio value="react"> React </xr-radio>

    <xr-radio value="vue"> Vue </xr-radio>

    <xr-radio value="angular"> Angular </xr-radio>
  </xr-radio-group>
</xr-form-control>

FormControl Error

<xr-form-control
  label="Framework"
  helperText="Please select one option"
  error
  required
>
  <xr-radio-group [(ngModel)]="framework">
    <xr-radio value="react" error> React </xr-radio>

    <xr-radio value="vue" error> Vue </xr-radio>

    <xr-radio value="angular" error> Angular </xr-radio>
  </xr-radio-group>
</xr-form-control>

RadioGroup

| Prop | Type | Default | Description | | ------------- | ----------------------------- | ------- | ---------------------------------------- | | [(ngModel)] | string \| number \| boolean | - | Selected value. | | disabled | boolean | false | Disables all radio buttons in the group. |

Radio

| Prop | Type | Default | Description | | ------- | ----------------------------- | ------------ | ----------------------- | | value | string \| number \| boolean | required | Radio value. | | error | boolean | false | Displays error styling. |

Features

• Single selection
• Keyboard accessible
• Angular Forms (ngModel)
• Disabled state
• Error state
• FormControl integration
• Automatic label association
• Tailwind CSS
• Standalone Component
• Signals API

Switch

Switch allows users to toggle a boolean value on or off. It supports multiple sizes, disabled and error states, and integrates with FormControl.

Example

Basic

<xr-switch [(ngModel)]="enabled"> Enable notifications </xr-switch>

Sizes

<xr-switch [(ngModel)]="enabled" size="sm"> Small </xr-switch>

<xr-switch [(ngModel)]="enabled" size="md"> Medium </xr-switch>

<xr-switch [(ngModel)]="enabled" size="lg"> Large </xr-switch>

Error

<xr-switch [(ngModel)]="enabled" error> Enable notifications </xr-switch>

Disabled

<xr-switch [(ngModel)]="enabled" disabled> Disabled Off </xr-switch>

FormControl

<xr-form-control
  label="Notifications"
  helperText="Receive email notifications."
>
  <xr-switch [(ngModel)]="enabled"> Enable notifications </xr-switch>
</xr-form-control>

Inputs

| Input | Type | Default | Description | | ---------- | ---------------------- | ------- | ---------------------- | | modelValue | boolean | false | Current switch state | | size | "sm" \| "md" \| "lg" | "md" | Switch size | | error | boolean | false | Displays error styling |

Native Attributes

The component forwards native checkbox attributes to the underlying <input type="checkbox">.

Example:

<xr-switch disabled required name="notifications">
  Enable notifications
</xr-switch>

Supported native attributes include:

• disabled
• required
• name
• tabindex
• autofocus

Content

With Label

<xr-switch [(ngModel)]="enabled"> Enable notifications </xr-switch>

With FormControl

<xr-form-control label="Notifications" helperText="Enable email notifications.">
  <xr-switch [(ngModel)]="enabled"> Receive notifications </xr-switch>
</xr-form-control>

Textarea

Textarea allows users to enter multi-line text. It supports multiple sizes, error and disabled states, native textarea attributes, and integrates with FormControl.

Example

Basic

<xr-textarea modelValue="Lorem ipsum dolor sit amet."></xr-textarea>

Sizes

<xr-textarea size="sm" modelValue="Small textarea"></xr-textarea>

<xr-textarea size="md" modelValue="Medium textarea"></xr-textarea>

<xr-textarea size="lg" modelValue="Large textarea"></xr-textarea>

Error

<xr-textarea error modelValue="Invalid value"></xr-textarea>

Disabled

<xr-textarea disabled modelValue="Disabled textarea"></xr-textarea>

Placeholder

<xr-textarea placeholder="Write something..."></xr-textarea>

Rows

<xr-textarea rows="6" placeholder="Textarea with custom rows"></xr-textarea>

FormControl

<xr-form-control label="Description" helperText="Maximum 500 characters.">
  <xr-textarea placeholder="Write your description..." rows="5"></xr-textarea>
</xr-form-control>

Inputs

| Input | Type | Default | Description | | ---------- | ---------------------- | ------- | ---------------------- | | modelValue | string | "" | Current textarea value | | size | "sm" \| "md" \| "lg" | "md" | Textarea size | | error | boolean | false | Displays error styling |

Native Attributes

The component forwards native textarea attributes to the underlying <textarea> element.

Example:

<xr-textarea
  placeholder="Description"
  rows="5"
  maxlength="500"
  required
></xr-textarea>

Supported native attributes include:

• placeholder
• rows
• cols
• maxlength
• minlength
• readonly
• disabled
• required
• name
• autocomplete
• autofocus
• tabindex

Features

• Three sizes
• Error state
• Disabled state
• Native textarea behavior
• FormControl integration
• Forwards native textarea attributes

Content

<xr-textarea></xr-textarea>

Select

Select allows users to choose a single option from a dropdown list. It supports loading states, empty states, keyboard navigation, clearable selections, different sizes, rounded corners, disabled mode, and error styling.

Example

Basic

<xr-select [options]="options" labelKey="label" valueKey="id" />

With Placeholder

<xr-select
  [options]="options"
  labelKey="label"
  valueKey="id"
  placeholder="Select a fruit"
/>

Clearable

<xr-select
  [options]="options"
  labelKey="label"
  valueKey="id"
  [clearable]="true"
/>

Loading

<xr-select [options]="[]" labelKey="label" valueKey="id" [loading]="true" />

Disabled

<xr-select
  [options]="options"
  labelKey="label"
  valueKey="id"
  [disabled]="true"
/>

Error

<xr-select [options]="options" labelKey="label" valueKey="id" [error]="true" />

Rounded

<xr-select
  [options]="options"
  labelKey="label"
  valueKey="id"
  [rounded]="true"
/>

With Form Control

<xr-form-control label="Country" helperText="Please select your country.">
  <xr-select [options]="countries" labelKey="name" valueKey="id" />
</xr-form-control>

Keyboard Navigation

| Key | Action | | ------ | ------------------------- | | ↑ | Move to previous option | | ↓ | Move to next option | | Enter | Select highlighted option | | Escape | Close dropdown |

Sizes

<xr-select size="sm" />

<xr-select size="md" />

<xr-select size="lg" />

Properties

| Name | Type | Default | Description | | ----------- | ---------------------- | -------------- | ---------------------------------------------------- | | modelValue | string \| number | undefined | Selected value. | | options | Option[] | [] | Available options. | | labelKey | string | — | Property used as the option label. | | valueKey | string | — | Property used as the option value. | | placeholder | string | "Select..." | Placeholder text displayed when nothing is selected. | | loading | boolean | false | Displays loading state. | | loadingText | string | "Loading..." | Loading message. | | emptyText | string | "No data" | Text shown when there are no options. | | disabled | boolean | false | Disables the component. | | error | boolean | false | Applies error styling. | | rounded | boolean | false | Uses fully rounded corners. | | size | "sm" \| "md" \| "lg" | "md" | Component size. | | clearable | boolean | false | Allows clearing the selected value. |

Events

| Event | Payload | Description | | ----------- | ------------------- | -------------------------------------- | | valueChange | { value, option } | Fired when the selected value changes. |

Option Interface

export interface Option {
  [key: string]: unknown;
}

Features

• Single selection
• Keyboard navigation
• Overlay positioning
• Automatic width matching trigger
• Loading state
• Empty state
• Clearable selection
• Disabled state
• Error state
• Three sizes
• Rounded variant
• FormControl integration
• Label integration
• HelperText integration
• Fully standalone component
• Signal-based API

Notes

• labelKey specifies which property is displayed.
• valueKey specifies which property is stored as the selected value.
• Supports arbitrary object structures as long as both keys exist.
• Keyboard navigation automatically scrolls the active option into view.
• Dropdown width automatically matches the trigger width.

Example Data

options = [
  {
    id: 1,
    label: "Apple",
  },
  {
    id: 2,
    label: "Orange",
  },
  {
    id: 3,
    label: "Banana",
  },
];