yukit-web

v0.3.2

Published

a day ago

Angular UI component library for Yurest web applications.

0High
0Medium
0Low

pabloclaramunt

d.sancho.yurest

yurest

yukit-web

Angular UI component library for Yurest web applications. Built on Spartan (Tailwind CSS v4 + @spartan-ng/brain) and themed with the Yurest design tokens.

Requirements

Installation

npm install yukit-web \
  @spartan-ng/brain @angular/cdk @tanstack/angular-table \
  @ng-icons/core @ng-icons/lucide embla-carousel-angular ngx-scrollbar

Plus the Tailwind toolchain, as dev dependencies:

npm install -D tailwindcss @tailwindcss/postcss tw-animate-css

tw-animate-css is required because @spartan-ng/brain/hlm-tailwind-preset.css imports it.

Setup

yukit-web does not ship compiled component CSS. Its templates carry Tailwind utility classes, and your Tailwind build is what turns them into real styles. Two things have to be true in your app, or the components render unstyled.

1. Set up `styles.css`

@layer theme, base, components, utilities;

@import 'tailwindcss';
@import '@spartan-ng/brain/hlm-tailwind-preset.css';
@import 'yukit-web/theme.css';

@source "../node_modules/yukit-web";

Order matters:

| Line | Why | | :---------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- | | @layer … | Fixes layer precedence before anything registers into a layer. | | @import "tailwindcss" | Must come first — everything below extends it. | | Spartan preset | Maps token names (--primary, --radius, …) onto Tailwind utilities and registers Spartan's variants (data-open, data-checked, …). | | yukit-web/theme.css | Supplies the Yurest token values. Without the preset above it, the custom properties exist but no utilities are generated. | | @source | Required. Tailwind only generates the classes it can see. yukit-web's classes live inside the published package, which Tailwind does not scan by default. |

Adjust the @source path so it resolves from the file it is written in — the example assumes src/styles.css with node_modules one level up.

If you skip @source, the components render with no styling at all. That is the expected failure mode, not a bug: nothing is missing from the package, Tailwind simply never saw it. node_modules being gitignored does not prevent the scan — an explicit @source overrides that.

2. Enable the Tailwind PostCSS plugin

.postcssrc.json at the project root:

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

3. Icons

Components register the icons they need themselves — nothing to configure for <yuw-badge>, <yuw-dialog>, <yuw-pagination> and friends to render their own glyphs.

You only need provideIcons for icons you project into a component ([yuwAlertIcon], [yuwItemMedia], a button's content, <yuw-spinner icon="…">) — or name in data you hand to a component, such as the icon field of a <yuw-sidebar [content]> entry:

import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideMail, lucidePlus } from '@ng-icons/lucide';

@Component({
  imports: [NgIcon, YuwButtonComponent],
  providers: [provideIcons({ lucideMail, lucidePlus })],
  template: `
    <yuw-button>
      <ng-icon name="lucidePlus" />
      New
    </yuw-button>
  `,
})
export class ExampleComponent {}

Quick start

Every export is standalone — import the component classes you use directly.

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { YuwButtonComponent, YuwInputComponent, yuwToast, YuwToasterComponent } from 'yukit-web';

@Component({
  selector: 'app-login',
  imports: [YuwInputComponent, YuwButtonComponent, YuwToasterComponent],
  template: `
    <yuw-input [(value)]="email" type="email" placeholder="[email protected]" />
    <yuw-button color="primary" (clicked)="submit()">Sign in</yuw-button>

    <yuw-toaster />
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LoginComponent {
  protected readonly email = signal('');

  protected submit(): void {
    yuwToast.success('Welcome back');
  }
}

Theming

yukit-web/theme.css is the only stylesheet the package exposes. It defines the Yurest palette in oklch under the token names Spartan expects, so bg-primary, text-muted-foreground, border-border and rounded-lg resolve to Yurest's design system instead of Spartan's default neutral gray.

Extra semantic tokens

It also adds Yurest-only semantic colors that Spartan has no equivalent for, registered so they behave like any other Tailwind color:

| Token | Utilities | | :----------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | | --success / --success-foreground | bg-success, text-success-foreground, … | | --warning / --warning-foreground | bg-warning, text-warning-foreground, … | | --info / --info-foreground | bg-info, text-info-foreground, … | | --destructive-foreground | text-destructive-foreground — Spartan defines only --destructive and hardcodes text-white; Yurest names a contrast color, so the pair is completed. |

To override a token, redefine it in your own :root after importing the theme.

The `color` input

Components that carry brand color (<yuw-button>, <yuw-badge>, <yuw-pagination>) accept a color input typed as YuwColorDto:

type YuwColorDto =
  | 'primary'
  | 'secondary'
  | 'neutral'
  | 'destructive'
  | 'success'
  | 'warning'
  | 'info'
  | 'muted'
  | 'violet'
  | 'orange'
  | 'pink'
  | 'teal';

It sets data-yuw-color on the host, and the theme remaps the Spartan semantic variables (--primary, --secondary, --border, …) for that subtree — so the whole component recolors consistently instead of one class being patched.

<yuw-button color="success" variant="outline">Approve</yuw-button>
<yuw-badge color="warning" dot />

Dark mode

Dark mode is supported via a .dark class on a root element, matching Tailwind v4's default dark variant. The consuming app toggles it:

document.documentElement.classList.toggle('dark');

Note that <yuw-toaster> defaults to theme="light" — pass theme="dark" or theme="system" explicitly in apps that render dark.

Reveal on hover

Repeated secondary controls (a row's edit button, an item's "…" menu) can stay hidden until the user points at their container. Two plain CSS classes, shipped in theme.css, do it with a fade:

<li class="yuw-reveal-host">
  Item name
  <yuw-button class="yuw-reveal" variant="ghost" size="icon" ariaLabel="Edit">…</yuw-button>
</li>

yuw-reveal-host goes on the hover area, yuw-reveal on the element that fades.
It shows on hover, on keyboard focus (:focus-visible, so a mouse click does not pin it open), and on an ancestor carrying data-highlighted.
Devices that cannot hover (phones, tablets) never hide the element, so the control stays reachable by touch.
Respects prefers-reduced-motion.

yuw-datatable rows already carry yuw-reveal-host, and the actions column applies yuw-reveal.

Conventions

A few rules hold across the whole library. Knowing them removes most of the per-component surprises.

Text is always yours. No component hardcodes a translatable string. Anything a user reads — labels, empty-state messages, accessible names for icon-only controls — is an input, often a required one (ariaLabel, previousLabel, emptyText, label). Pass it already translated.

Presence implies the feature. Instead of a removable flag plus a removeLabel string, there is one input: set removeLabel and the remove control appears, omit it and there is nothing to remove. The same shape applies to clearAriaLabel (search input, combobox), closeLabel (dialog, sheet) and revealAriaLabel (password input).

Two-way state uses model(). [(value)], [(open)], [(checked)], [(page)], [(activeTab)] are all two-way bindable, and each also emits a …Change output you can listen to one-way.

Class passthrough. Components whose host is display: contents accept your classes on a dedicated input so they actually reach the rendered element — class on most components, panelClass on overlays, tableClass on the datatable. They are merged last through tailwind-merge, so your class always beats the component default without !important.

Forms. <yuw-input>, <yuw-textarea>, <yuw-search-input>, <yuw-password-input>, <yuw-input-otp>, <yuw-checkbox>, <yuw-switch>, <yuw-radio-group>, <yuw-combobox> and <yuw-datepicker> implement ControlValueAccessor:

<form [formGroup]="form">
  <label yuwLabel for="email">Email</label>
  <yuw-input inputId="email" formControlName="email" type="email" [invalid]="emailInvalid()" />

  <yuw-checkbox formControlName="terms">Accept terms</yuw-checkbox>
</form>

disabled from the forms API (control.disable()) and the disabled input are OR'd together, so neither source silently overrides the other.

Components

Button

Single action button, link, or a welded group of buttons.

<yuw-button variant="outline" color="primary" (clicked)="save()">Save</yuw-button>

<yuw-button href="/dashboard" target="_blank">Dashboard</yuw-button>

<yuw-button size="icon" ariaLabel="Add item">
  <ng-icon name="lucidePlus" />
</yuw-button>

<!-- Button group -->
<yuw-button [buttons]="actions" groupAriaLabel="Alignment" (buttonClicked)="onAction($event)" />

Inputs

Outputs

| Output | Payload | Description | | :-------------- | :----------------------- | :---------------------------- | | clicked | MouseEvent | Single-button mode. | | buttonClicked | YuwButtonGroupClickDto | Group mode — { id, event }. |

Content slots

YuwButtonGroupItemDto entries are { id, label } plus optional variant, size, color, disabled, href, target, type, ariaLabel, transparent — each falling back to the component-level input of the same name.

Input

Single-line text field with addon slots and form integration.

<yuw-input [(value)]="username" placeholder="Enter username…" />

<yuw-input formControlName="email" type="email">
  <yuw-left-addon><ng-icon name="lucideMail" /></yuw-left-addon>
</yuw-input>

Inputs

Outputs

Content slots

yuw-left-addon, yuw-right-addon — import YuwInputAddonImports.

Input file

File picker with two layouts. avatar (default) shows a yuw-avatar with the chosen image (or src) beside an upload button. inline is a full-width outline button with an upload icon; a chosen file replaces the button with one line showing its name, size and a remove icon, and several files collapse into one line (countLabel(n)) that opens a list with one removable row each — a popover from md up, a bottom sheet below. Removing never edits the value: the icon emits removed with the File and the consumer decides. The value is a File[]; writing [] or null clears the picker. All text comes from the consumer.

<yuw-input-file
  [(value)]="files"
  accept="image/*"
  [src]="imageUrl"
  [alt]="name"
  [fallback]="initials"
  uploadLabel="Upload photo"
/>
<yuw-input-file
  variant="inline"
  multiple
  [(value)]="files"
  uploadLabel="Upload files"
  removeLabel="Remove"
  [countLabel]="countLabel"
  (removed)="files.set(files().filter((f) => f !== $event))"
/>

Inputs

Outputs

Textarea

Multi-line text field. Auto-grows where field-sizing is supported.

<yuw-textarea [(value)]="bio" placeholder="Write your biography…" [rows]="4" [maxlength]="500" />
<yuw-textarea formControlName="comments" invalid />

Inputs

Same contract as Input, minus type / inputmode, plus:

Outputs

Search input

Text field with a leading search icon and an optional clear button.

<yuw-search-input
  [(value)]="query"
  placeholder="Search items…"
  clearAriaLabel="Clear search"
  (searched)="onSearch($event)"
/>

Inputs

Same contract as Input, minus type / inputmode / maxlength, plus:

Outputs

Password input

Password field with an optional reveal toggle.

<yuw-password-input [(value)]="password" revealAriaLabel="Toggle password visibility" />
<yuw-password-input formControlName="password" autocomplete="current-password" />

Inputs

Same contract as Input, minus type / inputmode / maxlength, plus:

Outputs

Input OTP

One-time password / verification code field, rendered as grouped slots.

<yuw-input-otp [(value)]="code" [groupSizes]="[3, 3]" (completed)="verify($event)" />
<yuw-input-otp formControlName="otpCode" mode="numeric" />

Inputs

Outputs

Label

Styled form label, applied to a native <label>.

<label yuwLabel for="username">Username</label>
<yuw-input inputId="username" [(value)]="username" />

Accepts the native for / id attributes.

Checkbox

Projected content becomes the clickable label — the control is wrapped in a <label>, so clicking the text toggles it and the text is announced as the accessible name.

<yuw-checkbox [(checked)]="acceptedTerms">Accept terms</yuw-checkbox>
<yuw-checkbox [(indeterminate)]="isMixed" [(checked)]="allSelected">Select all</yuw-checkbox>
<yuw-checkbox formControlName="rememberMe" />

Inputs

Switch

Toggle for binary settings. Projected content becomes the clickable label.

<yuw-switch [(checked)]="notificationsEnabled">Enable notifications</yuw-switch>
<yuw-switch formControlName="darkMode" size="sm" />

Inputs

Radio group

<yuw-radio-group [options]="planOptions" [(value)]="selectedPlan" ariaLabel="Plan" />
<yuw-radio-group [options]="genderOptions" formControlName="gender" ariaLabelledby="gender-heading" />

interface YuwRadioOptionDto {
  value: string;
  label: string;
  disabled?: boolean;
}

Inputs

Combobox

Searchable select. Single or multiple selection, in-place search or a read-only trigger, with optional custom option templates.

<!-- Type-to-filter field -->
<yuw-combobox
  [options]="userOptions"
  [(value)]="selectedUser"
  placeholder="Select user…"
  emptyText="No user found."
  triggerAriaLabel="Toggle options"
  clearAriaLabel="Clear selection"
/>

<!-- Classic select shape -->
<yuw-combobox
  readonlyTrigger
  [options]="colorOptions"
  [(value)]="color"
  searchPlaceholder="Search colors…"
  triggerAriaLabel="Toggle options"
/>

<!-- Multiple, with chips -->
<yuw-combobox multiple [options]="categoryOptions" [(value)]="categories" triggerAriaLabel="Toggle options" />

<!-- Custom option template -->
<yuw-combobox [options]="users" [(value)]="userId" triggerAriaLabel="Toggle options">
  <ng-template yuwComboboxItem let-option let-selected="selected">
    <img [src]="option.data.avatar" />
    {{ option.label }}
  </ng-template>
</yuw-combobox>

interface YuwComboboxOptionDto<TData = unknown> {
  value: string;
  label: string;
  disabled?: boolean;
  data?: TData; // available as `option.data` in a custom item template
}

Inputs

Datepicker

<yuw-datepicker [(value)]="selectedDate" placeholder="Select date…" />
<yuw-datepicker mode="range" [(value)]="dateRange" captionLayout="dropdown" />
<yuw-datepicker mode="monthYear" [(value)]="selectedMonth" />

Inputs

captionLayout is ignored in monthYear mode, which renders its own month/year grid.

Avatar

<yuw-avatar src="/user.png" alt="Jane Doe" fallback="JD" />
<yuw-avatar alt="Jane Doe" fallback="JD" badge />
<yuw-avatar [group]="teamMembers" alt="Team" groupCount="+5" />

interface YuwAvatarGroupItemDto {
  alt: string;
  src?: string;
  fallback: string;
}

Inputs

Content slots

[yuwAvatarBadgeIcon] — projecting an icon turns the status dot into a role/verification marker.

Badge

<yuw-badge color="primary">New</yuw-badge>
<yuw-badge variant="outline" removeLabel="Remove tag" (removed)="onRemove()">Category</yuw-badge>
<yuw-badge dot color="success" />

Inputs

Outputs

Content slots

[yuwBadgeIcon] — leading icon.

Card

Directives applied to your own elements — no wrapper element is inserted.

<div yuwCard size="sm">
  <div yuwCardHeader>
    <h3 yuwCardTitle>Monthly report</h3>
    <p yuwCardDescription>Summary of the last 30 days.</p>
    <div yuwCardAction><yuw-button size="sm" variant="ghost">Export</yuw-button></div>
  </div>
  <div yuwCardContent>…</div>
  <div yuwCardFooter>…</div>
</div>

Import them all at once with YuwCardImports.

Item

Row/list layout primitive.

<div yuwItem variant="outline" size="sm">
  <div yuwItemMedia variant="icon"><ng-icon name="lucideMail" /></div>
  <div yuwItemContent>
    <div yuwItemTitle>New message</div>
    <div yuwItemDescription>You have a message from Ada Lovelace.</div>
  </div>
  <div yuwItemActions><yuw-button size="sm">Open</yuw-button></div>
</div>

Import them all at once with YuwItemImports. Each directive also accepts the yuw-item-* element form (<yuw-item-title>).

Attachment

File attachment card, with upload states.

<div yuwAttachment state="uploading" size="sm">
  <div yuwAttachmentMedia variant="icon"><ng-icon name="lucideFileText" /></div>
  <div yuwAttachmentContent>
    <span yuwAttachmentTitle>report.pdf</span>
    <span yuwAttachmentDescription>2.4 MB</span>
  </div>
  <div yuwAttachmentActions>
    <button yuwAttachmentAction><ng-icon name="lucideX" /></button>
  </div>
</div>

Table

Styling directives for a table you write yourself.

<div yuwTableContainer>
  <table yuwTable>
    <caption yuwCaption>Team members and their roles.</caption>
    <thead yuwTHead>
      <tr yuwTr>
        <th yuwTh>Name</th>
        <th yuwTh>Role</th>
      </tr>
    </thead>
    <tbody yuwTBody>
      <tr yuwTr>
        <td yuwTd>Ada Lovelace</td>
        <td yuwTd>Engineer</td>
      </tr>
    </tbody>
    <tfoot yuwTFoot>…</tfoot>
  </table>
</div>

Import them all at once with YuwTableImports.

Datatable

Sorting, pagination, row selection, column visibility and a loading skeleton, over TanStack Table.

<yuw-datatable
  [columns]="columns"
  [data]="users"
  sortable
  paginated
  selectable
  [loading]="loading()"
  [(columnVisibility)]="columnVisibility"
  emptyText="No users found."
  previousPageLabel="Previous page"
  nextPageLabel="Next page"
  (selectedRowsChange)="onSelect($event)"
/>

Inputs

| Input | Type | Default | | :------------------ | :------------------------------------------ | :------------------------------- | | columns | YuwDatatableColumnDef<TData>[] | [] | | data | TData[] | [] | | sortable | boolean | false | | paginated | boolean | false | | selectable | boolean | false | | loading | boolean — renders skeleton rows | false | | loadingRows | number | 5 | | emptyText | string｜undefined | undefined | | previousPageLabel | string — required | — | | nextPageLabel | string — required | — | | caption | string｜undefined | undefined | | tableClass | string｜undefined — merged onto <table> | undefined | | sorting | SortingState — two-way | [] | | columnFilters | ColumnFiltersState — two-way | [] | | columnVisibility | ColumnVisibilityState — two-way | {} | | rowSelection | RowSelectionState — two-way | {} | | pagination | PaginationState — two-way | { pageIndex: 0, pageSize: 10 } |

Outputs

buildYuwActionsColumn(label, onEdit, cellClass?, header?) builds an edit-button column whose button is revealed on row hover (see Reveal on hover). Because the button is hidden by default, pass header (already translated) to give the column a visible title.

selectable enables the selection state; the checkbox column itself is a display column you provide (id: 'select', with flexRenderComponent(...) header/cell calling TanStack's toggle handlers).

Empty

Empty-state panel ("no results", "inbox empty").

<div yuwEmpty>
  <div yuwEmptyHeader>
    <div yuwEmptyMedia variant="icon"><ng-icon name="lucideFolderOpen" /></div>
    <h3 yuwEmptyTitle>No files found</h3>
    <p yuwEmptyDescription>Try uploading a file or changing your query.</p>
  </div>
  <div yuwEmptyContent>
    <yuw-button>Upload file</yuw-button>
  </div>
</div>

[yuwEmptyMedia] accepts variant: 'default'｜'icon'. Import them all at once with YuwEmptyImports.

Skeleton

<div yuwSkeleton class="h-4 w-32 rounded"></div>
<div yuwSkeleton class="size-10 rounded-full"></div>

Sized with standard CSS height/width classes on the host element.

Spinner

<yuw-spinner label="Loading" />
<yuw-spinner label="Refreshing" icon="lucideRefreshCw" />

Inputs

The spinner inherits its size from the container's font size — wrap it in text-2xl to scale it.

Accordion

<yuw-accordion type="multiple">
  <yuw-accordion-item [disabled]="false" (openedChange)="onToggle($event)">
    <yuw-accordion-trigger>Shipping</yuw-accordion-trigger>
    <yuw-accordion-content>Delivered in 24–48 h.</yuw-accordion-content>
  </yuw-accordion-item>
</yuw-accordion>

Import them all at once with YuwAccordionImports.

Breadcrumb

<yuw-breadcrumb [items]="[{ label: 'Home', href: '/' }, { label: 'Settings' }]" ariaLabel="Breadcrumb" />

interface YuwBreadcrumbItemDto {
  label: string;
  href?: string;
}

Inputs

The last item is announced as the current page (aria-current="page"); intermediate items render as links when they have an href.

Pagination

<yuw-pagination
  [(page)]="currentPage"
  [totalPages]="20"
  previousLabel="Previous page"
  nextLabel="Next page"
  ellipsisSrText="More pages"
  ariaLabel="Pagination"
/>

Inputs

getPaginationRange(page, totalPages) is exported if you need the same page/ellipsis sequence elsewhere.

Tabs

Triggers come from the tabs input; each panel is an <ng-template yuwTabPanel="id"> whose id matches a tab. Panels are lazy — instantiated the first time their tab becomes active.

<yuw-tabs [tabs]="settingsTabs" [(activeTab)]="selected" variant="line">
  <ng-template yuwTabPanel="general">Workspace name, timezone and locale.</ng-template>
  <ng-template yuwTabPanel="billing">Plan, invoices and payment method.</ng-template>
</yuw-tabs>

interface YuwTabItemDto {
  id: string;
  label: string;
  disabled?: boolean;
}

Inputs

Sidebar

Collapsible navigation sidebar — a fixed panel on desktop, a slide-in sheet on mobile. Open state lives in YuwSidebarService, so <yuw-sidebar-trigger> works from anywhere on the page.

<div yuwSidebarWrapper>
  <yuw-sidebar collapsible="icon">
    <div yuwSidebarHeader>Yurest</div>

    <div yuwSidebarContent>
      <div yuwSidebarGroup>
        <div yuwSidebarGroupLabel>Management</div>
        <div yuwSidebarGroupContent>
          <ul yuwSidebarMenu>
            <li yuwSidebarMenuItem>
              <a yuwSidebarMenuButton [isActive]="true" tooltip="Orders">
                <ng-icon name="lucideShoppingCart" />
                <span>Orders</span>
              </a>
              <span yuwSidebarMenuBadge>12</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div yuwSidebarFooter>…</div>
  </yuw-sidebar>

  <main yuwSidebarInset>
    <yuw-sidebar-trigger label="Toggle sidebar" />
  </main>
</div>

Object form — `[content]` and `[footer]`

Instead of hand-writing the group/menu/item tree, hand the sidebar a YuwSidebarContentDto. Header stays projected markup.

<yuw-sidebar collapsible="icon" [content]="nav" [footer]="account" (itemClicked)="onAction($event.id)">
  <div yuwSidebarHeader>Yurest</div>
</yuw-sidebar>

nav: YuwSidebarContentDto = {
  groups: [
    {
      id: 'management',
      label: 'Management',
      separatorAfter: true,
      items: [
        // route → routerLink anchor; active state resolves itself
        { id: 'orders', label: 'Orders', icon: 'lucideShoppingCart', route: '/orders', badge: '12' },
        // children → one nested submenu level
        { id: 'reports', label: 'Reports', children: [{ id: 'sales', label: 'Sales', route: '/reports/sales' }] },
        // href → plain anchor, full navigation
        { id: 'docs', label: 'Docs', href: 'https://example.com', target: '_blank' },
        // neither → <button>, reported through (itemClicked)
        { id: 'sync', label: 'Sync now' },
      ],
    },
  ],
};

An item's shape follows from its data — no kind field to keep in sync:

| Item has | Renders as | Active state | | :------- | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | route | [routerLink] anchor | Automatic via routerLinkActive → aria-current="page" and pointer-events: none, so an active entry takes no hover, click or tooltip. Set exact: true for a root path like /. | | href | plain <a href> | None — the browser leaves the page. | | neither | <button> | None — emits itemClicked with {id, event}. |

label and tooltip are consumer-supplied strings, already translated — the sidebar owns no user-facing copy. icon names an icon your app registers with provideIcons (see Icons).

Both forms compose: content/footer render their own regions, and anything projected still renders too. To place hand-written markup inside an object-rendered region — where it scrolls with the nav and shares the content area's flex sizing — mark it [yuwSidebarContentExtra] or [yuwSidebarFooterExtra].

`<yuw-sidebar>` inputs

Output: itemClicked → YuwSidebarItemClickDto ({id, event}), for entries with no route/href.

Structure directives

| Directive | Notes | | :----------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [yuwSidebarWrapper] | sidebarWidth, sidebarWidthIcon | | [yuwSidebarHeader] / [yuwSidebarContent] / [yuwSidebarFooter] | | | [yuwSidebarGroup] / [yuwSidebarGroupLabel] / [yuwSidebarGroupContent] | | | ul[yuwSidebarMenu] / li[yuwSidebarMenuItem] | | | a[yuwSidebarMenuButton], button[…] | variant: 'default'｜'outline', size: 'default'｜'sm'｜'lg', isActive, closeMobileSidebarOnClick; add Spartan's tooltip to label items while collapsed to icons | | [yuwSidebarMenuBadge] | Trailing count/status. | | ul[yuwSidebarMenuSub] / li[yuwSidebarMenuSubItem] / a[yuwSidebarMenuSubButton] | Nested level. | | [yuwSidebarSeparator] | | | [yuwSidebarContentExtra] / [yuwSidebarFooterExtra] | Projection markers: place hand-written markup inside the region rendered from content/footer. Inert when that input is unset. | | button[yuwSidebarRail] | label — required, thin edge toggle. | | main[yuwSidebarInset] | Main content area. | | <yuw-sidebar-trigger> | label — required, screen-reader-only. |

Inject YuwSidebarService to read or drive the state (state(), isMobile(), openMobile(), toggle()); configure defaults app-wide with provideYuwSidebarConfig({ … }).

Dialog

Modal overlay for focused tasks and forms. The body scrolls internally when taller than the viewport.

Provide either title or ariaLabel — a modal without an accessible name is announced as an anonymous dialog by screen readers.

<yuw-dialog [(open)]="isOpen" title="Create project" description="Give it a name to get started." closeLabel="Close">
  <ng-container yuwDialogTrigger>Create project</ng-container>

  <yuw-input [(value)]="name" placeholder="Project name" />

  <div yuwDialogFooter>
    <yuw-button (clicked)="save()">Save</yuw-button>
  </div>
</yuw-dialog>

Inputs

Content slots

[yuwDialogTrigger], [yuwDialogFooter] (the footer renders only when filled), and the default slot for the body. Import with YuwDialogImports.

Alert dialog

Blocking confirmation for destructive or irreversible actions. Unlike <yuw-dialog> it cannot be dismissed by clicking the backdrop.

<yuw-alert-dialog
  [(open)]="isOpen"
  title="Delete invoice?"
  description="This action cannot be undone."
  confirmLabel="Delete"
  cancelLabel="Cancel"
  confirmVariant="destructive"
  (confirmed)="delete()"
/>

Inputs

Outputs

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

yukit-web

Table of contents

Requirements

Installation

Setup

1. Set up styles.css

2. Enable the Tailwind PostCSS plugin

3. Icons

Quick start

Theming

Extra semantic tokens

The color input

Dark mode

Reveal on hover

Conventions

Components

Button

Inputs

Outputs

Content slots

Input

Inputs

Outputs

Content slots

Input file

Inputs

Outputs

Textarea

Inputs

Outputs

Search input

Inputs

Outputs

Password input

Inputs

Outputs

Input OTP

Inputs

Outputs

Label

Checkbox

Inputs

Switch

Inputs

Radio group

Inputs

Combobox

Inputs

Datepicker

Inputs

Avatar

Inputs

Content slots

Badge

Inputs

Outputs

Content slots

Card

Item

Attachment

Table

Datatable

Inputs

Outputs

Empty

Skeleton

Spinner

Inputs

Accordion

Breadcrumb

Inputs

Pagination

Inputs

Tabs

1. Set up `styles.css`

The `color` input

Object form — `[content]` and `[footer]`

`<yuw-sidebar>` inputs