Nextera UI

A modern Angular component library with comprehensive UI components and theming support.

Documentation

For comprehensive documentation, examples, and API references, visit:

docs.nextera.id

The documentation includes:

• Detailed component guides with live examples
• Complete API references for all components
• Styling and customization guides
• Best practices and usage patterns

Installation

Install the package using npm:

npm install @nexterajs/components

Setup

1. Import Components

Import the components you need in your Angular components:

import { Component } from '@angular/core';
import { NxeButtonComponent, NxeAlertComponent, NxeTabsComponent } from '@nexterajs/components';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NxeButtonComponent, NxeAlertComponent, NxeTabsComponent],
  template: `
    <nxe-button variant="primary">Click Me</nxe-button>
    <nxe-alert type="success">Success message</nxe-alert>
  `
})
export class AppComponent {}

2. Import Styles

You need to import the Nextera UI styles in your application's global styles file.

Option A: Import All Styles (Recommended)

In your src/styles.scss file:

// Import Nextera UI styles
@use '@nexterajs/components/styles/nextera-ui';

Option B: Import Only Variables (For Custom Styling)

If you want to use only the CSS variables without the base styles:

// Import only variables
@use '@nexterajs/components/styles/variables';

3. Customize Theme (Optional)

You can customize the theme by overriding CSS variables before importing the styles:

// Define your custom theme
:root {
  --nxe-primary: #ff5722;
  --nxe-primary-hover: #e64a19;
  --nxe-border-radius: 8px;
  --nxe-font-family: 'Inter', sans-serif;
}

// Import Nextera UI styles after your customizations
@use '@nexterajs/components/styles/nextera-ui';

Available Components

• Alert - Display important messages with different severity levels
• Badge - Show notification counts and status indicators
• Button - Versatile button component with multiple variants
• CheckBox - Customizable checkbox with indeterminate state support
• Data Grid - Feature-rich data table with sorting and filtering
• Date Box - Date picker input component
• Divider - Visual separator for content sections
• Drawer - Side panel for navigation or additional content
• Drop Down Box - Dropdown select component
• Expansion Panel - Collapsible content panels
• File Uploader - File upload component with drag-and-drop
• Icon - Icon component with SVG support
• Loading Dialog - Loading overlay and spinner
• Menu - Navigation menu component
• Number Box - Numeric input with increment/decrement controls
• Pills - Tag-like components for labels and categories
• Radio - Radio button and radio group components
• Select Box - Enhanced select dropdown
• Tabs - Tabbed content navigation
• Tag Box - Multi-select tag input
• Text Box - Text input component
• Toast - Notification toast messages
• Tree List - Hierarchical list component
• Tree View - Expandable tree structure

Global Configuration

Many components support global configuration via dependency injection tokens:

import { ApplicationConfig } from '@angular/core';
import { NXE_BUTTON_CONFIG, NXE_BADGE_CONFIG } from '@nexterajs/components';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: NXE_BUTTON_CONFIG,
      useValue: {
        defaultSize: 'large',
        defaultVariant: 'primary'
      }
    },
    {
      provide: NXE_BADGE_CONFIG,
      useValue: {
        defaultColor: 'primary',
        defaultSize: 'medium'
      }
    }
  ]
};

CSS Variables Reference

Nextera UI uses CSS custom properties for theming. Here are some key variables:

Colors

• --nxe-primary - Primary brand color
• --nxe-secondary - Secondary color
• --nxe-success - Success state color
• --nxe-danger - Error/danger state color
• --nxe-warning - Warning state color
• --nxe-info - Informational color

Typography

• --nxe-font-family - Base font family
• --nxe-font-size-base - Base font size (1rem)
• --nxe-font-size-sm - Small font size
• --nxe-font-size-lg - Large font size

Spacing

• --nxe-spacing-xs - Extra small spacing
• --nxe-spacing-sm - Small spacing
• --nxe-spacing-md - Medium spacing
• --nxe-spacing-lg - Large spacing
• --nxe-spacing-xl - Extra large spacing

Border

• --nxe-border-radius - Default border radius
• --nxe-border-color - Default border color
• --nxe-border-width - Default border width

See the full list of CSS variables for complete customization options.

Examples

Basic Button

import { NxeButtonComponent } from '@nexterajs/components';

@Component({
  imports: [NxeButtonComponent],
  template: `
    <nxe-button variant="primary" (clicked)="handleClick()">
      Click Me
    </nxe-button>
  `
})

Form with Checkbox and Text Input

import { NxeCheckBoxComponent, NxeTextBoxComponent } from '@nexterajs/components';

@Component({
  imports: [NxeCheckBoxComponent, NxeTextBoxComponent],
  template: `
    <nxe-text-box
      label="Email"
      placeholder="Enter your email"
      [(value)]="email">
    </nxe-text-box>

    <nxe-check-box [(checked)]="acceptTerms">
      I accept the terms and conditions
    </nxe-check-box>
  `
})

Alert Messages

import { NxeAlertComponent } from '@nexterajs/components';

@Component({
  imports: [NxeAlertComponent],
  template: `
    <nxe-alert type="success">
      Your changes have been saved successfully!
    </nxe-alert>

    <nxe-alert type="warning">
      Please review the information before submitting.
    </nxe-alert>
  `
})

Browser Support

Nextera UI supports all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

ISC

Author

Josiah Hans

Additional Resources

For more information on using the Angular CLI, visit the Angular CLI Overview and Command Reference page.