io.github.anousss007/ng-blatui

List ng-blatui's 157 Angular components, optionally filtered by category.

List 16 prebuilt blocks (login, signup, …).

List 70 chart examples.

List 35 full page templates.

Search the ng-blatui registry (components, blocks, charts, templates) by keyword.

Get a component/block/chart/template's docs by slug: install, import and the full structured API (inputs, two-way models, outputs, types).

Focused: just the typed API (inputs, two-way models, outputs and referenced types) of a component, by slug.

Applies BlatUI button styling to a native `<button>` or `<a>`, keeping native semantics, focus and keyboard behavior (accessibility for free).

BlatUI badge. Brand variants (`default | secondary | destructive | outline`) or semantic `tone` (`primary | success | warning | danger | info | neutral`) where `variant` then selects intensity (`soft …

BlatUI card container. Use `variant="sectioned"` with the header/content/footer parts.

BlatUI alert. `role="alert"` for assistive tech. Brand `variant` (`default | destructive`) or semantic `tone` (`success | warning | danger | info | neutral`).

Applies BlatUI input styling to a native `<input>` (keeps native validation & a11y).

A batteries-included text field: label, control, hint and error wired together with the right `for` / `id` / `aria-describedby` / `aria-invalid` relationships, on top of the `buiField` + `buiInput` pr…

Applies BlatUI textarea styling to a native `<textarea>`. Auto-grows with its content via CSS `field-sizing-content` (no JS). Set `[maxRows]` to cap the growth — past it the field scrolls.

BlatUI label. Apply to a native `<label>` (use `for`/`id` to associate it with a control) so the click-to-focus and screen-reader association work natively.

BlatUI separator. `decorative` (default) renders `role="none"`; set `[decorative]="false"` for a semantic `role="separator"` with `aria-orientation`.

BlatUI skeleton placeholder. Marked `aria-hidden` so assistive tech ignores the shimmering placeholder; announce real loading state separately (e.g. aria-busy).

BlatUI avatar. Renders the image when `src` is set and loads; otherwise shows the projected fallback (initials, icon). Falls back automatically on load error.

BlatUI linear progress bar. Exposes the full `progressbar` ARIA contract (valuemin/max/now/text). Set `[indeterminate]="true"` for an unknown-duration bar.

BlatUI checkbox. A native `<button role="checkbox">` (Space/Enter toggle for free) with `[(checked)]` two-way binding and tri-state `[(indeterminate)]`.

BlatUI switch. A native `<button role="switch">` with `[(checked)]` two-way binding; keyboard activation (Space/Enter) and focus come from the native button.

BlatUI radio group. `role="radiogroup"` with arrow-key roving focus across the `buiRadioItem` buttons; `[(value)]` two-way binds the selected value.

BlatUI tooltip. Shows an accessible `role="tooltip"` bubble via the Angular CDK overlay and wires `aria-describedby` on the host. It opens on hover, and on focus only when the focus came from the keyb…

Breadcrumb navigation landmark (`<nav aria-label="breadcrumb">`).

Groups buttons (and inputs) into a single segmented control.

Keyboard key styling, applied to a native `<kbd>` element.

Constrains projected content to a given aspect ratio (e.g. `16 / 9`).

Accessible disclosure: a trigger toggles the visibility of its content.

Empty-state container.

A form field row grouping a label, control, description and error.

Centered, padded page container with a max-width scale.

A two-state toggle button (`aria-pressed`).

A spinning loading indicator (`role="status"`).

Copy-to-clipboard button: copies `value`, flips to a check, announces "Copied".

Full-width announcement bar. Optionally dismissible and (with `persistKey`) remembers the dismissal in localStorage. SSR-safe — localStorage is only touched in the browser.

Overlapping stack of avatars with an optional "+N" overflow counter.

Pagination navigation landmark.

Click-triggered popover on the Angular CDK overlay. Bind the content template: `<button [buiPopover]="tpl">…</button>` with `<ng-template #tpl><div buiPopoverContent>…`. Closes on outside click and Es…

A list/row item; use on a `<div>` or an `<a>`.

A scrollable region with a thin, themed scrollbar and a focusable viewport.

A bordered group that composes inputs with addons (icons, text, buttons).

A labelled meter (`role="meter"`) for a measurement within a known range.

A KPI / statistic card: label, big value, and a trend-coloured change.

Visually hides content while keeping it available to assistive tech (sr-only).

Hover-triggered card on the Angular CDK overlay. Opens after a delay on hover, and on focus only when the focus came from the keyboard — a focus restored by a closing dialog is not the user asking for…

A dark code panel with an optional filename header and a copy button.

A slider (`role="slider"`) with pointer drag and full keyboard support (arrows, Home/End, PageUp/PageDown). Single value, or a two-thumb `range` (binds `value` + `endValue`). Horizontal or vertical. S…

A star rating (`role="radiogroup"`) with hover preview and keyboard support.

Primary confirm action button.

Application menu bar styling on Angular Aria's `ngMenuBar`. Each top-level entry is a `ngMenuTrigger` opening a `ngMenu` (style the menus with `buiDropdownMenu` / `buiDropdownMenuItem`). `MenuBar` is …

Applies a typographic style. Put it on the matching element (e.g. `<h1 buiTypography variant="h1">`).

A single-select segmented control (`role="radiogroup"`) with arrow-key navigation.

Decorative dotted background layer. Drop inside a `relative` container.

Decorative grid background layer. Drop inside a `relative` container.

A terminal / console window (always dark). Put prompt + output lines in the content; helper classes `.prompt .ok .dim .path .warn` colour them.

A data-driven feature-comparison / pricing table.

A card that flips to reveal its back. Default content is the front; project the back with `[buiFlipBack]`. `trigger="hover"` (default) or `"click"` (keyboard-accessible).

A card with a radial spotlight glow that follows the cursor on hover.

A card that tilts in 3D toward the cursor. SSR-safe (geometry read on mousemove).

An accessible select (combobox + listbox) using the `aria-activedescendant` pattern: focus stays on the trigger while arrows move the active option. Full keyboard support (arrows, Home/End, Enter, Esc…

A filterable combobox: a text input (`role="combobox"`, `aria-autocomplete="list"`) over a filtered listbox, using the `aria-activedescendant` pattern. Full keyboard + outside-click.

A floating "scroll to top" button that reveals itself once the page scrolls past `threshold` px. SSR-safe — the scroll position is only read in the browser.

A live countdown to a target time (`role="timer"`). SSR-safe — ticks only in the browser.

Animates a number counting up to its target on first render. The animated digits are `aria-hidden`; an sr-only span carries the final value (SSR/no-JS read the real number).

A styled anchor. Set `external` for `target=_blank` + safe `rel`.

Renders accessible text painted with a CSS gradient, with an optional shimmer.

A page title block with optional description and a slot for actions (`[buiPageHeaderActions]`). Provide the title via the `heading` input or by projecting content.

A styled blockquote / testimonial with optional attribution (author, role, avatar).

A price display with optional compare-at (strikethrough) and a discount badge.

A flexbox stack layout helper (direction, gap, alignment).

Re-themes everything inside it to a custom accent colour by overriding the primary design tokens locally. Renders as `display: contents` so it adds no box.

Groups several `<kbd>` keys into one inline cluster.

A small status dot (online/away/busy/offline). Status is never colour-only — the label is always present.

A vertical timeline list. Use `li[buiTimelineItem]` for each entry.

A description list (`<dl>`). Children should be `bui-description-item`.

A Pinterest-style masonry grid using native CSS multi-column layout.

A bento grid container. Use `bui-bento-item` for cells.

A responsive thumbnail grid.

A veil with a spinner shown over its projected content while `show` is true.

A numeric stepper: − / + buttons around a number field, with min/max/step clamping.

A radio-group of product variants, rendered as pills or colour swatches.

A tiny inline SVG trend chart (line + optional area). Pure, SSR-safe.

A stateful add-to-cart button: idle → adding → added → idle. Emits `triggered` on click.

A password field with a live strength meter and (optional) requirement checklist.

A product card: image, badge, wishlist, title, rating, price, and an action slot.

Types and deletes a cycling list of words. The animated text is `aria-hidden`; an sr-only span carries the full word list so assistive tech reads it once. SSR-safe.

Reveals a passage token-by-token (LLM-style) once. The streamed copy is `aria-hidden`; an `aria-live` region carries the full passage up front. SSR-safe.

A card whose border has a light beam continuously travelling around it.

Animated falling meteor streaks behind content. Decorative + SSR-safe.

An animated aurora / northern-lights gradient background with content overlaid.

A seamless infinite scroll of `items` (logos, badges, testimonials…).

A mobile bottom tab bar. Use `[buiBottomNavItem]` on each `<a>`/`<button>`.

Dims its words, then brightens them one by one as the element scrolls up through the viewport. Server-renders fully revealed (no-JS safe). SSR-safe.

Shifts its content relative to scroll for a depth/parallax effect. SSR-safe.

A "on this page" nav that highlights the section currently in view (IntersectionObserver).

A styled time field: a native `<input type="time">`, or hour/minute selects in `select` mode. The value is always 24-hour `HH:mm`, whatever the clock shown. **Locale:** `select` mode follows `locale`…

A group of toggle buttons (single or multiple selection). Use `button[buiToggleGroupItem]`.

A free-text tags input: type and press Enter (or comma) to add chips; Backspace removes. Pass `suggestions` and the field becomes a combobox over the tags that already exist, while still accepting an…

Click-to-edit inline text: shows a value, swaps to an input on click. Enter commits, Escape cancels.

A floating action button that expands to a stack of actions. Closes on Escape / outside click.

A rotary dial input (role="slider"). Drag, scroll, or use the keyboard. 270° sweep.

A lazy image with a blurred placeholder / skeleton and a graceful error state.

A collapsible "reasoning" / chain-of-thought disclosure.

An AI tool-call card with a status indicator and collapsible arguments / result.

A scrollable conversation log (`role="log"`). Use `bui-chat-message` for bubbles.

A celebratory particle burst. Project a trigger (or use the default button) to fire it.

A step indicator. The `value` (1-based) marks the active step. Use `li[buiStepperItem]`.

A one-time-password input: a row of single-character boxes with focus management + paste.

A phone number field with a country-code selector.

A localized currency input backed by `Intl.NumberFormat`. Stores a numeric amount and displays it formatted while unfocused; while focused it shows a plain editable number so the caret and typing beha…

A chat composer: an autosizing textarea with a send button. Emits `submitted` on send.

A contribution-style heatmap grid (7 rows). Pass `data` or get a deterministic demo.

An inline citation marker that reveals a source popover on hover / focus / click.

The draggable divider between two resizable panels.

A styled HTML5 video with a poster + play-button facade.

A colour picker: a native colour well, a hex field, and a swatch palette.

A GDPR cookie banner. Persists the choice in localStorage (skipped in `demo` mode).

Emits `more` when a sentinel scrolls into view (IntersectionObserver) or the fallback "Load more" button is pressed. Drive `loading` / `finished` from the consumer. SSR-safe.

A compact audio player around a native `<audio>`: play/pause, seek, time, mute.

A canvas signature pad with draw, undo and clear. SSR-safe (canvas set up in the browser).

A macOS-style dock with a cursor-following fisheye magnify. Use `bui-dock-item` tiles.

A collapsible, data-driven hierarchical tree (`role="tree"`).

A dynamic list of repeatable form rows with add/remove and min/max bounds.

A bell trigger with a dropdown feed of notifications and an unread badge.

A collapsible JSON tree viewer. Accepts an object/array or a JSON string.

A top-down organizational chart with pure-CSS connectors. Recursively renders nodes.

A cart trigger with an item-count badge and a dropdown with line items + subtotal.

An SVG beam connecting two elements (by selector) with a travelling light. SSR-safe.

A line-by-line text diff (LCS) rendered with +/- gutters.

A table whose rows can nest and expand/collapse (flattened to visible rows).

A markdown textarea with a formatting toolbar and a live, sanitized HTML preview.

A date calendar. Modes: `single` (one day), `range` (start–end), `multiple` (a set of days). Render several months side by side with `months`. SSR-safe.

A date input that opens a calendar popover. The popover renders in a CDK overlay, so it escapes any `overflow: hidden` ancestor (no clipping) and flips to stay on-screen.

A start→end date range picker: a trigger that opens a two-month calendar (in a CDK overlay, so it is never clipped by an `overflow: hidden` ancestor) alongside quick-pick presets. Two-way bind the ran…

A slide carousel. Project slides as direct children; arrows + dots navigate. SSR-safe.

A command palette: a filterable, keyboard-navigable list of grouped actions.

A right-click context menu. Project the target; pass menu `items`.

A data table with search, sortable columns, row selection and pagination. Its toolbar row also takes a page-size select (`perPageOptions`), a column-visibility menu (`toggleableColumns`) and anything …

A lightweight SVG chart (line / area / bar / donut). Pure + SSR-safe.

A combined date + time picker in a popover. Value is `YYYY-MM-DDTHH:mm`. The popover renders in a CDK overlay, so it escapes any `overflow: hidden` ancestor (no clipping) and flips on-screen.

A free-text input with a filtered suggestion list.

A before/after image comparison with a draggable, keyboard-operable divider.

A drag-and-drop file upload zone with a selected-files list. Files reach it three ways and all three behave the same: the picker, a drop onto the zone, and `value` — the file the record already holds…

An NProgress-style top loading bar. Drive it with `start()` / `set(0..1)` / `done()`, or with `top-progress:start` / `top-progress:set` / `top-progress:done` window events.

A slide-in panel anchored to a screen edge. Toggle with the `open` model.

A text input that formats its value against a mask (9 = digit, a = letter, * = alnum).

A sheet overlay sliding in from a screen edge. Toggle with the `open` model.

The toast viewport. Drives off the store.

A horizontal navigation menu with hover/click dropdown panels. The panels open in a CDK overlay so they escape any `overflow: hidden` ancestor (e.g. a clipping header) and flip when they would run off…

A textarea that suggests mentions when you type the trigger character.

A keyless OpenStreetMap embed centred on a coordinate. SSR-safe.

A horizontal Gantt chart positioning task bars over a date range. SSR-safe.

A week/day calendar grid with positioned events. SSR-safe.

A drag-and-drop kanban board (Angular CDK drag-drop).

A contenteditable rich-text editor with a basic formatting toolbar.

A collapsible vertical navigation sidebar. Standalone it toggles via the `open` model; inside a it reads shared state and becomes a mobile off-canvas drawer + desktop icon-rail automatically.

A guided product tour with a spotlight on each step's target element. SSR-safe.

Renders a value as a scannable QR code (SVG). Level M, byte mode. SSR-safe.

Insert and use an ng-blatui component (import + usage + typed API).

Scaffold a page from ng-blatui templates/blocks.