Getting Started

@dayerlin-bustamante is a collection of standalone Angular components built with Angular 22+, signals, and Tailwind CSS. All components follow modern Angular best practices and are fully typed with TypeScript.

Prerequisites

  • Angular 22+
  • Node.js 18+
  • A GitHub Personal Access Token (PAT) with read:packages scope

Installation

1. Configure the npm registry

Create or update your .npmrc file at the root of your project:

@dayerlin-bustamante:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_PAT
always-auth=true

2. Install the packages

Install all packages at once:

npm install \
  @dayerlin-bustamante/core \
  @dayerlin-bustamante/button \
  @dayerlin-bustamante/card \
  @dayerlin-bustamante/icon \
  @dayerlin-bustamante/overlay \
  @dayerlin-bustamante/modal \
  @dayerlin-bustamante/popover \
  @dayerlin-bustamante/slide \
  @dayerlin-bustamante/toast \
  @dayerlin-bustamante/tooltip \
  @dayerlin-bustamante/tabs \
  @dayerlin-bustamante/table \
  @dayerlin-bustamante/input \
  @dayerlin-bustamante/textarea \
  @dayerlin-bustamante/checkbox \
  @dayerlin-bustamante/radio \
  @dayerlin-bustamante/toggle \
  @dayerlin-bustamante/label \
  @dayerlin-bustamante/dropdown \
  @dayerlin-bustamante/autocomplete \
  @dayerlin-bustamante/datepicker \
  @dayerlin-bustamante/calendar \
  @dayerlin-bustamante/avatar \
  @dayerlin-bustamante/compound-input \
  @dayerlin-bustamante/paginator \
  @dayerlin-bustamante/skeleton \
  @dayerlin-bustamante/tree

Or install individual packages:

npm install @dayerlin-bustamante/button

Note:@dayerlin-bustamante/core is a required dependency for all packages. Install it first if you are adding packages individually.

Configuration

Some components require global configuration via InjectionToken providers in your app.config.ts. Add the following providers: 

import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideClientHydration } from '@angular/platform-browser';
import { DAY_MODAL_CONFIGURATION, IModalConfiguration } from '@dayerlin-bustamante/modal';
import { DAY_POPOVER_CONFIGURATION, IPopoverConfiguration } from '@dayerlin-bustamante/popover';
import { DAY_SLIDE_CONFIGURATION, ISlideConfiguration } from '@dayerlin-bustamante/slide';
import { DAY_TOAST_CONFIGURATION, IToastConfiguration } from '@dayerlin-bustamante/toast';
import { DAY_TOOLTIP_CONFIGURATION, ITooltipConfiguration } from '@dayerlin-bustamante/tooltip';

export const appConfig: ApplicationConfig = {
    providers: [
        provideBrowserGlobalErrorListeners(),
        provideRouter(routes),
        provideClientHydration(),
        {
            provide: DAY_POPOVER_CONFIGURATION,
            useValue: <IPopoverConfiguration>{
                behavior: 'fill',
                horizontalPosition: 'center',
                verticalPosition: 'top',
                gap: 0,
                disableCloseOnBackdrop: false
            }
        },
        {
            provide: DAY_SLIDE_CONFIGURATION,
            useValue: <ISlideConfiguration>{
                defaultMinWidth: 400,
                defaultMaxWidth: 600,
                sidebarWidth: 300,
                resize: false,
                overlay: true,
                disableCloseOnBackdrop: false,
                cssClasses: [],
                overlayCssClasses: [],
                data: {}
            }
        },
        {
            provide: DAY_MODAL_CONFIGURATION,
            useValue: <IModalConfiguration>{
                size: 'medium',
                cssClasses: [],
                data: {},
                disableCloseOnBackdrop: false
            }
        },
        {
            provide: DAY_TOAST_CONFIGURATION,
            useValue: <IToastConfiguration>{
                verticalPosition: 'bottom',
                gap: 20,
                autoClose: true,
                timeOut: 4000,
                cssClasses: [],
                data: {}
            }
        },
        {
            provide: DAY_TOOLTIP_CONFIGURATION,
            useValue: <ITooltipConfiguration>{
                behavior: 'tooltip',
                horizontalPosition: 'center',
                verticalPosition: 'top',
                gap: 2,
                spacing: { top: 0, bottom: 0, right: 0, left: 0 },
                cssClasses: [],
                delayIn: 330,
                delayOut: 220
            }
        }
    ]
};

Configuration Options

Provider Description
DAY_POPOVER_CONFIGURATION Configures popover behavior, position, gap, and backdrop settings.
DAY_SLIDE_CONFIGURATION Configures slide panel dimensions, resize, overlay, and backdrop settings.
DAY_MODAL_CONFIGURATION Configures modal size, CSS classes, data, and backdrop settings.
DAY_TOAST_CONFIGURATION Configures toast position, gap, auto-close, and timeout.
DAY_TOOLTIP_CONFIGURATION Configures tooltip behavior, position, gap, spacing, and delay.

Global Styles

Import the library theme styles in your global styles.css:

@use '@dayerlin-bustamante/core/assets/theme/styles';

Basic Usage

All components are standalone. Import them directly in your component:

import { DAYButtonComponent } from '@dayerlin-bustamante/button';
import { DAYCardComponent, DAYCardBodyComponent } from '@dayerlin-bustamante/card';

@Component({
    selector: 'my-component',
    templateUrl: './my.component.html',
    imports: [DAYButtonComponent, DAYCardComponent, DAYCardBodyComponent]
})
export class MyComponent {}

Then use them in your template:

<day-card>
    <day-card-body>
        <day-button type="primary" size="medium">
            Click me
        </day-button>
    </day-card-body>
</day-card>

Available Components

Package Selector Description
core day-close-button, day-resize Core utilities, dialog system, resize component, and slot directive.
button day-button Styled button with multiple types and sizes.
card day-card Card layout with header, body, and footer sections.
icon day-icon Icon component with registry and adapter pattern.
overlay day-overlay, day-backdrop Overlay and backdrop for dialogs.
modal day-modal Modal dialog with service-based creation.
popover day-popover Popover with trigger directive and template support.
slide day-slide Slide panel with resize and overlay options.
toast day-toast Toast notifications with auto-close.
tooltip day-tooltip Tooltip with delay and position control.
tabs day-tabs, day-tab Tab navigation with toggle and tabular types.
table day-table Data table with columns, ordering, grouping, and templates.
input day-input Text input with ControlValueAccessor.
textarea day-textarea Textarea with ControlValueAccessor.
checkbox day-checkbox Checkbox and toggle with label position.
radio day-radio-group, day-radio-button Radio button group with ControlValueAccessor.
toggle day-toggle Toggle selection with custom templates.
label day-label Form label with sizes.
dropdown day-dropdown Dropdown select with search, groups, and templates.
autocomplete day-autocomplete Autocomplete input with async filter.
datepicker day-datepicker Date picker with range, disabled dates, and time.
calendar day-calendar Calendar with date selection and highlighting.
avatar day-avatar Avatar with color and size options.
compound-input day-compound-input Compound input combining input and dropdown.
paginator day-paginator Pagination with items per page and page navigation.
skeleton day-skeleton-loader Skeleton loading states for various content types.
tree day-tree Tree view with custom node templates.