Component Catalog

August 20, 2026 · View on GitHub

Auto-generated component reference for the base-theme Angular library. All components, directives, pipes, and services are standalone by default.

Styling & Customization Rules

Read these before composing components into pages — they prevent the most common integration mistakes.

Utility-class conflicts with component base classes

Button directives (base-button, base-stroked-button, base-icon-button, base-icon-stroked-button) apply their own base classes through a host [class] binding, including relative (position) and rounded-lg. Angular merges your static class attribute with the directive's host classes, so both end up on the element — and the winner of a conflict is decided by the order of the utilities inside the generated Tailwind stylesheet, not by their order in the class attribute. In practice the base classes win, so this silently fails:

<!-- WRONG: stays `relative` and `rounded-lg` -->
<button base-icon-button color="white" class="absolute right-3 top-3 rounded-full">…</button>

Use Tailwind v4's important suffix (utility!) whenever you override position, radius, or any other utility the component already sets:

<!-- RIGHT: anchored white circle, e.g. a wishlist button floating on a product image -->
<button base-icon-button color="white" class="absolute! right-3 top-3 rounded-full! shadow-md">…</button>

The same rule applies to any component whose host binding sets layout utilities (position, radius, width/height, display): when an override "doesn't apply", inspect the element for a conflicting base class first — don't debug your own CSS.

Icons: line vs. filled

<base-icon> renders symbols from assets/icons.svg. The outline symbols hard-code fill="none", which always beats an inherited CSS fill — a fill-* class can never fill a line icon. For solid glyphs (active wishlist heart, rating stars) use the filled input, which switches to assets/icons-filled.svg whose symbols use fill="currentColor", and color them with text-* classes:

<base-icon name="heart" [filled]="wishlisted()" class="text-red-500"></base-icon>

`base-drawer` requires an animations provider

The drawer animates with @angular/animations triggers. Without a provider, opening it throws NG05105: Unexpected synthetic property @slideLeft. Register provideAnimationsAsync() in app.config.ts.

Overlays do not close themselves when the user clicks a link inside them:

base-popover exposes a public close() method — capture the component as a template ref and call it from panel links:
```
<base-popover #menu>
  …
  <a routerLink="…" (click)="menu.close()">Link</a>
</base-popover>
```

base-drawer is closed by emitting its closed output (the trigger directive subscribes to it and detaches the overlay):

<base-drawer #drawer>
  …
  <a routerLink="…" (click)="drawer.closed.emit()">Link</a>
</base-drawer>

Layout Components

BaseLayoutHeroFeaturesComponent

Selector: base-layout-hero-features Standalone: true

A complete marketing landing page layout: sticky header with anchor navigation and scroll shadow, hero with tilt-on-scroll product mockup, animated stats strip, logo cloud, features grid with scroll reveal, testimonials carousel, pricing with monthly/yearly toggle, install snippet tabs, roadmap timeline, FAQ accordion, CTA band and footer with newsletter signup. Renders a full page out of the box from demo defaults; sections whose array input is empty are omitted. Includes a built-in theme toggle (ThemeService) and a focus-trapped mobile drawer navigation.

Inputs:

Name	Type	Default	Description
brandName	`string`	'Acme'	Brand name shown in header, footer and copy.
badgeText	`string`	'New — v2.0 is out'	Announcement badge above the hero title.
heroTitle	`string`	'Build your next product,'	First line of the hero title.
heroHighlight	`string`	'faster than ever'	Colored second line of the hero title.
heroSubtitle	`string`	(demo copy)	Hero subtitle paragraph.
primaryCtaText	`string`	'Get Started for Free'	Primary hero CTA label.
secondaryCtaText	`string`	'View Demo'	Secondary hero button label.
finePrint	`string`	(demo copy)	Fine print under the hero buttons.
showThemeToggle	`boolean`	true	Shows the light/dark toggle in the header.
navLinks	`HeroFeaturesNavLink[]`	Features/Testimonials/Pricing/FAQ	Anchor links to section ids.
stats	`HeroFeaturesStat[]`	4 demo stats	Animated counters strip. Empty hides section.
logos	`HeroFeaturesLogo[]`	6 demo brands	"Trusted by" logo cloud. Empty hides section.
features	`HeroFeaturesFeature[]`	6 demo cards	Features grid. Empty hides section.
testimonials	`HeroFeaturesTestimonial[]`	5 demo quotes	Testimonials carousel. Empty hides section.
plans	`HeroFeaturesPlan[]`	3 demo tiers	Pricing tiers. Empty hides section.
installTabs	`HeroFeaturesInstallTab[]`	npm/yarn/pnpm	Install command tabs. Empty hides section.
usageSnippet	`string`	(demo snippet)	TypeScript usage snippet under the install tabs. Empty string hides it.
roadmap	`HeroFeaturesRoadmapItem[]`	4 demo items	Roadmap timeline. Empty hides section.
faqs	`HeroFeaturesFaq[]`	5 demo entries	FAQ accordion. Empty hides section.

Outputs:

Name	Payload	Description
primaryCtaClick	`void`	Primary CTA clicked (hero, header, drawer or CTA band).
secondaryCtaClick	`void`	Secondary hero button clicked (e.g. open a demo dialog).
signInClick	`void`	"Sign in" clicked.
planSelected	`HeroFeaturesPlan`	A pricing plan CTA clicked.
newsletterSubmit	`string`	Newsletter form submitted, payload is the email.
navClicked	`string`	Navigation link clicked, payload is the section id.

Content projection:

[hero-media] — replaces the default browser mockup in the hero.
[header-actions] — extra elements in the header action area.

Exported interfaces: HeroFeaturesNavLink, HeroFeaturesStat, HeroFeaturesFeature, HeroFeaturesLogo, HeroFeaturesTestimonial, HeroFeaturesPlan, HeroFeaturesFaq, HeroFeaturesInstallTab, HeroFeaturesRoadmapItem.

HeroDemoDialogComponent

Selector: base-hero-demo-dialog Standalone: true

Product-demo dialog opened by BaseLayoutHeroFeaturesComponent's "View Demo" secondary CTA (secondaryCtaClick). Shows a gradient video-placeholder panel with a play button and a caption, plus a footer with "Close" and "Get Started" buttons that both close the dialog via base-dialog-close. Has no inputs or outputs; all content is static demo copy.

PageMainComponent

Selector: base-page-main Standalone: true

The primary layout wrapper for a main page view. Sets up a full-width/height flex column container. Free shell (npx base-ui-cli add page-main).

No inputs or outputs. Use with <base-page-main-header>, <base-page-main-body>, <base-page-main-footer>.

PageMainHeaderComponent

Selector: base-page-main-header Standalone: true

A header section for base-page-main.

No inputs or outputs.

PageMainBodyComponent

Selector: base-page-main-body Standalone: true

A body content section for base-page-main.

No inputs or outputs.

PageMainFooterComponent

Selector: base-page-main-footer Standalone: true

A footer section for base-page-main.

No inputs or outputs.

CardComponent

Selector: base-card Standalone: true

A flexible card container component used for grouping related content.

Inputs:

Name	Type	Default	Description
horizontal	`boolean`	false	If true, the card lays out its children horizontally instead of vertically.

CardHeaderComponent

Selector: base-card-header Standalone: true

The header section of a base-card. Usually contains the title and optional actions.

No inputs or outputs.

CardBodyComponent

Selector: base-card-body Standalone: true

The main content container of a base-card. Provides correct padding and spacing.

No inputs or outputs.

CardFooterComponent

Selector: base-card-footer Standalone: true

The footer section of a base-card. Usually contains action buttons (Save, Cancel, etc).

No inputs or outputs.

AccordionComponent

Selector: base-accordion Standalone: true

A container component for accordion items. Allows users to toggle sections of content.

Inputs:

Name	Type	Default	Description
multi	`boolean`	false	Whether multiple accordion items can be open simultaneously.

AccordionItemComponent

Selector: base-accordion-item Standalone: true

A single item within a base-accordion containing a header and body.

Inputs:

Name	Type	Default	Description
isOpen	`boolean`	false	Whether the accordion item is expanded.
disabled	`boolean`	false	Prevents toggling of the item.

Outputs:

Name	Emit Type	Description
toggled	`boolean`	Emitted when the item is opened or closed.

AccordionItemHeaderComponent

Selector: base-accordion-item-header Standalone: true

The clickable header of an accordion item that toggles the body visibility.

No inputs or outputs.

AccordionItemBodyComponent

Selector: base-accordion-item-body Standalone: true

The body content of an accordion item.

No inputs or outputs.

TabsComponent

Selector: base-tabs Standalone: true

A container component for rendering tabbed navigation and content. Manages active states, handles tab switching, and provides scrollable tabs if they overflow horizontally.

Inputs:

Name	Type	Default	Description
defaultTab	`number`	0	The zero-based index of the tab to open by default.
type	`'pills' \| 'underline' \| 'default' \| string`	—	The visual style type of the tabs.
position	`'top' \| 'left' \| 'right' \| 'bottom' \| string`	—	The positioning of the tab list relative to the content.
icon	`string`	—	A global icon to apply if applicable.
scrollRestricted	`boolean`	false	If true, restricts automatic scrolling behavior on the tab list.

Outputs:

Name	Emit Type	Description
tabChanged	`Subject<TabComponent>`	Emitted whenever the active tab changes.

TabComponent

Selector: base-tab Standalone: true

The wrapper element for a single tab in a base-tabs group.

Inputs:

Name	Type	Default	Description
label	`string`	''	A simple string label for the tab. If complex HTML is needed, project a `base-tab-label` inside instead.
isActive	`boolean`	false	Tracks whether this tab is currently selected.
tabClass	`string`	'cursor-pointer'	Additional CSS classes to apply to the tab trigger.

TabLabelComponent

Selector: base-tab-label Standalone: true

A custom label for a base-tab. Allows you to add rich content (icons, badges, etc.) as the tab label.

No inputs or outputs.

TabBodyComponent

Selector: base-tab-body Standalone: true

The actual content wrapper for a base-tab. Content inside this tag is only rendered/visible when the parent tab is active.

No inputs or outputs.

DividerComponent

Selector: base-divider Standalone: true

A layout component used to separate content visually. Can be rendered horizontally (default) or vertically.

Inputs:

Name	Type	Default	Description
vertical	`boolean`	false	If true, renders the divider vertically instead of horizontally.

BaseLayoutAdminDataTableComponent

Selector: base-layout-admin-data-table Standalone: true

Full-page admin CRUD layout (pro tier) rendering a self-contained "Team Members" management screen backed by 24 seeded demo UserRecord rows: a debounce-free search box, status/role select filters, sortable column headers (asc → desc → unsorted cycle), page-size-8 pagination, and multi-row checkbox selection with a bulk-action bar (activate, deactivate, export selected, delete). Rows open a right-side base-drawer with a read-only detail view and a reactive-forms create/edit mode (simulated 500ms save); deletes go through a confirm dialog via injected DialogService, mutations surface injected ToastService toasts, and Export downloads a CSV of the selected (or all filtered) rows. Shows skeleton rows during a simulated 700ms initial load and a base-empty-state when filters match nothing; sortable headers and rows are keyboard-operable (Enter/Space) with aria-sort and per-row aria-labels, and an effect clamps the current page when mutations shrink the record set. Has no inputs or outputs — all state is internal signals; also exports the UserRecord interface and RecordStatus/RecordRole union types.

BaseAdminDataTableConfirmDialogComponent

Selector: base-admin-data-table-confirm-dialog Standalone: true

Confirmation dialog used by the admin data table for single and bulk deletes, opened via DialogService.open with a ConfirmDialogData payload (title, message, confirmLabel, optional danger flag that switches the confirm button from primary to danger color). Receives its data through an injected DialogContext<ConfirmDialogData, boolean> and closes with true on confirm; Cancel and the close icon dismiss via base-dialog-close. In ngAfterViewInit it upgrades the ancestor dialog container's role to alertdialog and wires aria-labelledby/aria-describedby to the rendered title and message. Has no inputs or outputs; the ConfirmDialogData interface is exported from this file.

BaseLayoutBentoGridComponent

Selector: base-layout-bento-grid Standalone: true

Self-contained full-page marketing/dashboard layout (pro tier) for a fictional "Arc" platform: sticky navbar, hero section, an interactive bento grid, a CTA band, and a footer. The grid's seven cards (performance stats, code-deploy terminal, activity bar chart, integrations, security, changelog, global regions map) are drag-reorderable via CDK DragDrop handles, with a "Reset Layout" button restoring the default order and a comfortable/compact density toggle that switches gap and padding classes. All state is signal-based with OnPush change detection; a skeleton placeholder grid is shown for the first 700ms via a constructor setTimeout. Injects ToastService to confirm integration connect/disconnect toggles, clipboard copies of the code snippet (navigator.clipboard), and layout resets; the changelog card expands/collapses between 3 and all 6 entries, and activity bars show tooltips via base-tooltip. Has no inputs or outputs; host is styled with a static w-full h-full overflow-y-scroll block class (no class input / cn() merge).

BaseLayoutBlogSidebarComponent

Selector: base-layout-blog-sidebar Standalone: true

Full-page blog article layout with a sticky navbar, article body, and a sticky right sidebar (table of contents, tags, newsletter signup, related posts) — all content is hardcoded demo data. The host element scrolls (overflow-y-scroll) and listens to its own scroll events to drive a reading-progress bar in the navbar and toggle a floating "back to top" button; an IntersectionObserver keeps the active table-of-contents entry highlighted as sections scroll into view, and TOC clicks smooth-scroll to the target section. Below the xl breakpoint the sidebar is hidden and a collapsible mobile TOC is shown instead; injects ToastService for copy-link and newsletter-subscribe feedback (with basic email validation). Uses OnPush change detection with signal-based state.

BaseLayoutDashboardComponent

Selector: base-layout-dashboard Standalone: true

Full-page admin dashboard layout (pro tier) with a responsive dark sidebar (fixed slide-in on mobile, icon-only mini rail on lg, full labels on xl), a sticky header (breadcrumb, order search, theme toggle, notifications popover, profile dropdown menu), and six switchable views driven by internal signals: an Overview view (stat cards, CSS bar chart with monthly/yearly toggle, top-products list, and a recent-orders table that opens a right-side order-details drawer and a per-row actions dropdown), an Analytics view (animated KPI counters plus sortable/pageable data tables in pill tabs), and empty-state placeholders for Projects/Team/Messages/Settings. Includes a Cmd/Ctrl+K command palette (document-level keydown listener) for navigation and actions, and a simulated 900ms loading state rendered with skeletons. All content is hardcoded demo data — the component takes no inputs and emits no outputs; it injects ThemeService (dark-mode toggle) and ToastService (feedback for demo actions like export, refund, refresh), and uses OnPush change detection with a static host class w-full h-full overflow-y-scroll block.

BaseLayoutDocsKbComponent

Selector: base-layout-docs-kb Standalone: true

Full-page documentation / knowledge-base layout template (pro tier) with a sticky header, a left base-tree navigation sidebar, a center content column of documentation sections with base-code snippets, and a right "On this page" TOC that scrollspies the reader's position via an IntersectionObserver rooted on the scrollable host. Opens a base-command-palette on Cmd+K / Ctrl+K (palette commands scroll to sections, toggle the theme via the injected ThemeService, or copy the page URL to the clipboard with a ToastService confirmation); a back-to-top button appears after the host scrolls past 400px. On smaller viewports the nav tree and TOC collapse into fixed overlay drawers that use cdkTrapFocus cdkTrapFocusAutoCapture, close on Escape or backdrop click, and restore focus to their toggle buttons. Uses OnPush change detection with all mutable state held in signals; has no inputs or outputs — all content and navigation data is defined internally.

BaseLayoutEcommerceGridComponent

Selector: base-layout-ecommerce-grid Standalone: true

Full-page e-commerce storefront layout (pro tier) with a sticky navbar (cart/wishlist count badges), breadcrumb + sort/view-mode toolbar, a filter sidebar (categories, price-range checkboxes, color swatches, star ratings — rendered as a desktop column and a mobile slide-in panel), a paginated product grid/list with active-filter chips, a 300ms loading skeleton, an empty state, cart and wishlist base-drawer panels (with a free-shipping progress bar at a $75 threshold), and a footer. Entirely self-contained: it renders a hardcoded demo Product[] and manages all filter/sort/cart/wishlist state internally with signals and computed values (OnPush, zoneless-safe) — it has no inputs or outputs. Injects DialogService to open BaseProductQuickViewComponent for product quick view and ToastService for add-to-cart/wishlist notifications; also exports the Product and CartItem interfaces. Host class: w-full h-full overflow-y-scroll block.

BaseProductQuickViewComponent

Selector: base-product-quick-view-dialog Standalone: true

Product quick-view dialog body built from the base-dialog sub-components (header with close icon-button, body, footer). It is opened via DialogService.open() and receives its Product through the injected DialogContext rather than an input; it renders the badge/discount, star rating, price with strikethrough original price, color, and stock status, and closes the dialog with result 'add-to-cart' or 'wishlist' (the Add to Cart button is disabled when the product is out of stock). No inputs or outputs.

BaseLayoutInboxMessagingComponent

Selector: base-layout-inbox-messaging Standalone: true

A three-pane inbox / support-ticket messaging layout: a searchable, status-filterable conversation list (All / Unread / Open / Closed), a message thread with an @-mention reply composer (auto-growing textarea, Enter sends, Shift+Enter for a newline, Enter is ignored while the mention dropdown is open) plus multi-file attachments, and a collapsible contact/ticket detail panel showing tags, participants, and all thread attachments. Fully self-contained demo component with no inputs or outputs — conversation data is seeded internally in signals, and actions (select, send, mark unread, archive) mutate that local state; on small screens it switches between list/thread/detail as single mobile panes, list rows are keyboard-activatable (Enter/Space), and the thread uses role="log" with aria-live="polite". Empty states render via base-empty-state when no conversations match the search/filter or no conversation is selected; exports the InboxConversation, InboxMessage, InboxAttachment, TicketStatus, and InboxConversationFilter types.

BaseLayoutSchedulerComponent

Selector: base-layout-scheduler Standalone: true

Full-page scheduler / full-calendar application layout (pro tier): month, week, and day views with seeded demo events, Work/Personal/Team calendar filters, search, a mini base-calendar sidebar, create/edit/delete via BaseSchedulerEventFormDialogComponent + DialogService, toasts via ToastService, and CDK drag-and-drop to reschedule events across days (time preserved). Install: npx base-ui-cli add layout-scheduler.

BaseSchedulerEventFormDialogComponent

Selector: base-scheduler-event-form-dialog Standalone: true

Create/edit dialog for scheduler events. Opened via DialogService.open with SchedulerEventFormData; closes with SchedulerEventFormResult (or delete: true when editing). Reactive form fields: title, description, start/end (datetime-local), calendar, color, all-day.

BaseLayoutFileManagerComponent

Selector: base-layout-file-manager Standalone: true

Full-page file manager application layout (pro tier): base-tree folder sidebar, path breadcrumbs, grid/list views, search + starred filter, base-file-upload dropzone, item actions (open/rename/star/download/delete) via dropdown menus, rename via BaseFileManagerRenameDialogComponent, and file preview in a right base-drawer. Install: npx base-ui-cli add layout-file-manager.

BaseFileManagerRenameDialogComponent

Selector: base-file-manager-rename-dialog Standalone: true

Rename dialog for file manager items. Opened via DialogService.open with FileManagerRenameData (name, kind); closes with FileManagerRenameResult.

BaseLayoutKanbanBoardComponent

Selector: base-layout-kanban-board Standalone: true

Full-page kanban board demo layout (pro tier) with hardcoded sample data: a sticky app-shell top bar (project selector, task search, member avatar stack, notification button, New Task button), a filter toolbar, and horizontally scrollable columns of task cards. Cards are draggable within and across columns via @angular/cdk/drag-drop (cdkDropList/cdkDrag); state lives in internal signals (columns, searchQuery, activePriorities) with OnPush change detection, and a skeleton loading state is shown for 700ms on init. Injects DialogService to open BaseTaskDetailDialogComponent (card click; supports delete) and BaseTaskFormDialogComponent (New Task / per-column Add task), and ToastService for success toasts on task create/delete. Search filters by task title, the filter menu toggles per-priority chips (removable in the toolbar), filtered-out cards are hidden with a "No matching tasks" empty state per column, and an inline Add Column form supports Enter to confirm and Escape to cancel. Has no inputs or outputs — the component is self-contained demo content; the file also exports the Priority, Task, and Column types. Host classes are static (w-full h-full overflow-y-scroll block), with no class input override.

BaseTaskDetailDialogComponent

Selector: base-task-detail-dialog Standalone: true

Read-only task detail dialog for the kanban board, designed to be opened via DialogService.open() with a Task as dialog data (injects DialogContext<Task, TaskDetailResult>) rather than placed in templates — it has no inputs or outputs. Renders the task's tags, priority badge, title, description, and a metadata grid (assignee, due date, comments, attachments) inside base-dialog chrome. The Delete Task button closes the dialog with { action: 'delete' } (TaskDetailResult); the header X and Close buttons dismiss via base-dialog-close without a result.

BaseTaskFormDialogComponent

Selector: base-task-form-dialog

Standalone: true

New-task creation dialog for the kanban board, opened via DialogService.open() with TaskFormData (members list, column list, default column id) as dialog data — injects DialogContext<TaskFormData, TaskFormResult> and has no inputs or outputs. Hosts a reactive FormGroup with fields for title (required), description, column (required, defaults to defaultColumnId), priority (required, defaults to 'medium'), assignee (required, defaults to the first member), due date, and optional tag label, built from base-input-group/base-select library controls. Submitting an invalid form calls markAllAsTouched() and shows the title error; a valid submit closes the dialog with the form value as TaskFormResult.

BaseLayoutMagazineGridComponent

Selector: base-layout-magazine-grid Standalone: true

Full-page magazine/blog landing layout ("Meridian") with a sticky blurred navbar, mobile slide-in category menu, featured hero article (with expandable "reader mode" excerpt), secondary article stack, numbered Editor's Picks strip, a Latest Stories grid with 2-column/3-column/list view toggle, skeleton loading state (simulated 900ms delay), and "Load more" pagination (4 articles per page). A desktop-only sidebar provides trending-tag filtering, a newsletter signup with regex email validation, and social links; a category nav, tag toggle, and text search combine into filters with a sticky active-filter chip bar and empty states when nothing matches. Injects ToastService for feedback on bookmarking (per-article reading list held in an internal Set signal), opening articles, and newsletter subscription. All article data is hardcoded demo content and all state is internal signals — the component has no inputs or outputs; the host is styled w-full h-full overflow-y-scroll block and uses OnPush change detection.

BaseLayoutOnboardingFlowComponent

Selector: base-onboarding-flow-layout Standalone: true

Full-page four-step signup/onboarding layout (Account, Verify, Workspace, Invite) built on BaseStepper/BaseStep with hidden built-in navigation and its own Back/Next/Submit controls; step progression is gated per step (account created, OTP verified, workspace form valid) and clicking the stepper only allows jumping back to completed steps. Includes a reactive account form with password-match validation, show/hide password toggles and a base-password-strength meter, a 6-digit base-otp-input verification step with a 30-second resend cooldown timer (cleared in ngOnDestroy), workspace industry/team-size selects, and chip-based teammate invites (validated, deduplicated, max 5). Injects ToastService for feedback; account creation, OTP verification, and finalization are simulated with setTimeout, ending in a finalizing spinner and a welcome screen whose button routes to /layouts/dashboard via RouterLink. All internal state is signal-based (OnPush change detection); the component exposes no inputs or outputs.

BaseLayoutPortfolioGalleryComponent

Selector: base-layout-portfolio-gallery Standalone: true

Full-page portfolio/agency layout ("Aria Studio") with sticky navbar, mobile slide-in menu, hero with featured project card, stats strip, services grid, filterable masonry project gallery, testimonials, process steps, gradient CTA, and footer. All content (projects, stats, clients, services, testimonials, process steps) is hard-coded demo data; the gallery supports category filter tabs with counts, an empty state when a filter has no matches, and incremental "load more" pagination (6 projects initially, +3 per click) driven by signals/computed with OnPush change detection. Injects DialogService to open BaseProjectCaseStudyComponent (per-project case study) and BaseContactDialogComponent (contact form, showing a success toast on submit), and ToastService for demo "visit live site"/client-click actions; in-page navigation uses smooth scrollIntoView. Host is styled w-full h-full overflow-y-scroll block. No inputs or outputs.

BaseProjectCaseStudyComponent

Selector: base-project-case-study-dialog Standalone: true

Case-study dialog (width 640) for a single Project, opened via DialogService — reads the project from an injected DialogContext<Project> rather than inputs. Renders a gradient banner with the project icon, category badge and year, plus title, client, description, and tag pills; the footer offers a Close button (base-dialog-close) and a "Visit Live Site" button that shows an info toast via ToastService (demo action). No inputs or outputs.

BaseContactDialogComponent

Selector: base-portfolio-contact-dialog Standalone: true

Contact-form dialog (width 480) opened via DialogService. Contains a reactive FormGroup with name (required), email (required + email), project type select (defaults to 'Branding'), and message (required, min length 10), showing inline validation errors once fields are touched. On valid submit it closes the dialog through the injected DialogContext, resolving with a ContactFormResult; if invalid it marks all controls touched instead. No inputs or outputs.

BaseLayoutPricingComponent

Selector: base-layout-pricing-page Standalone: true

Full-page pricing layout (pro tier): sticky navbar, hero with a monthly/annual billing toggle and a team-size base-input-spinner (1–500 seats), three hardcoded plan cards (Starter/Professional/Enterprise), a trusted-by logo strip, a feature comparison table, an FAQ accordion, a gradient CTA band, and a footer. Prices react to billing cycle and seat count via signals (billingCycle, seatCount); annual view shows a "Save N%" line and multi-seat totals. Injects DialogService and ToastService: every plan CTA opens BasePlanSignupDialogComponent (mode 'contact' when the plan's cta is "Contact Sales", otherwise 'trial') and shows a success toast when the dialog returns a PlanSignupResult. Simulates loading with skeleton cards for 700ms after construction. All plan/comparison/FAQ content is internal — the component has no inputs or outputs; host is a full-size scrollable block.

BasePlanSignupDialogComponent

Selector: base-plan-signup-dialog Standalone: true

Dialog content component intended to be opened through DialogService.open() rather than placed in templates — it injects DialogContext<PlanSignupData, PlanSignupResult> for its data (planName plus mode 'trial' | 'contact', which switches the heading, intro copy, and submit label). Renders a reactive form (name required, email required + valid format, company optional) inside a 440px base-dialog with close/cancel buttons; submit() marks all fields touched when invalid, otherwise closes the dialog with the form value as PlanSignupResult (name, email, company). Has no inputs or outputs.

BaseLayoutSettingsAccountComponent

Selector: base-layout-settings-account Standalone: true

Full-page account settings layout with a desktop sidebar (avatar/user header, "Back to Dashboard" routerLink to /layouts/dashboard) and a sticky mobile tab bar, switching between five tabs — Profile, Billing, Notifications, and Team delegate to base-form-profile-settings, base-form-billing, base-form-notifications, and base-form-team-invite, while the Security tab is built inline: a change-password reactive form (required current password, min-length-8 new password, cross-field passwords-match validator, per-field show/hide toggles, base-password-strength meter, aria-invalid/aria-describedby error wiring), a two-factor base-toggle, an active-sessions list with per-session and "Sign out all others" actions, and a base-form-delete-account danger zone. Injects FormBuilder and ToastService (success/info toasts on password save, 2FA toggle, and session sign-out) and uses OnPush change detection with signal-based state. All data is hard-coded demo content (user "Sarah Mitchell", three sessions); on init it renders base-skeleton placeholders for ~700ms before showing content, and the simulated password save resets the form after ~800ms. Has no inputs or outputs.

BaseLayoutSplitScreenComponent

Selector: base-layout-split-screen Standalone: true

Full-page SaaS marketing landing layout (fictional "Pulse" product) built from alternating 50/50 split sections: sticky navbar, hero split with a simulated dashboard card (Deployments/Analytics/Logs tabs driven by a signal), "trusted by" logo strip, terminal-simulation feature split with numbered steps, 6-card features grid, testimonial split with a carousel (auto-advances every 5s via setInterval, cleared in ngOnDestroy; prev/next/dot controls), gradient CTA band, and footer. Shows a skeleton placeholder for ~700ms on init before revealing content, and the host element is a full-size scroll container (w-full h-full overflow-y-scroll block). Injects DialogService to open the demo and signup dialogs and ToastService to show a success toast with the submitted name/email after signup; a "Features" nav button smooth-scrolls to the features section. No inputs or outputs — all content is hardcoded demo data.

BaseSplitScreenDemoDialogComponent

Selector: base-split-screen-demo-dialog

Static 640px-wide dialog opened from the landing page's "Watch Demo" buttons. Renders a gradient video-placeholder panel with a decorative play button and duration label, a short description paragraph, and a footer whose Close and "Get Started Free" buttons both close the dialog via base-dialog-close. No inputs, outputs, or logic.

BaseSplitScreenSignupDialogComponent

Selector: base-split-screen-signup-dialog

420px-wide signup dialog with a reactive form (name required, email required + email-validated, company optional) rendered with base-input-group fields and inline error messages shown once a control is touched. Injects DialogContext<unknown, SignupResult>; on submit, an invalid form is marked all-touched, while a valid form closes the dialog with a SignupResult ({ name, email, company }) that the opener receives. Cancel and the header close button dismiss without a result. No inputs or outputs.

Data Display

AvatarComponent

Selector: base-avatar Standalone: true

A highly customizable avatar component for displaying user profile images or initials. Includes support for presence indicators (active/inactive) and various shapes/sizes.

Inputs:

Name	Type	Default	Description
avatarUrl	`string`	''	The URL of the image to display. Falls back to initials or a placeholder icon.
shape	`'circle' \| 'square'`	'square'	The geometric shape of the avatar.
status	`'active' \| 'inactive'`	—	Optional presence status to display an indicator dot (e.g. green for active).
size	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	'md'	The size of the avatar.
initials	`string`	''	Text initials to display if no avatarUrl is provided.

BadgeComponent

Selector: base-badge Standalone: true

A configurable badge component to display tiny statuses, counts, or tags.

Inputs:

Name	Type	Default	Description
color	`'primary' \| 'danger' \| 'success' \| 'accent' \| 'warning' \| 'slate-light' \| 'primary-light' \| 'danger-light' \| 'success-light' \| 'accent-light' \| 'warning-light'`	'primary'	The visual color mapping.
size	`'sm' \| 'md' \| 'lg' \| 'xl'`	'md'	The size of the badge.
shape	`'rectangular' \| 'circle'`	'circle'	The shape (roundness) of the badge.

KbdComponent

Selector: base-kbd Standalone: true

Inline keyboard glyph for shortcuts in copy, menus, and docs. Renders a native <kbd> so assistive tech treats it as a key.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra Tailwind classes merged onto the inner `<kbd>` via `cn()`.

AspectRatioComponent

Selector: base-aspect-ratio Standalone: true

Box that preserves a width-to-height ratio via CSS aspect-ratio. Project media or any block inside; the inner slot is stretched to fill the box.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra host classes merged via `cn()`.
ratio	`string`	'16/9'	CSS `aspect-ratio` value (`16/9`, `1`, `4/3`, …).

ScrollAreaComponent

Selector: base-scroll-area Standalone: true

Overflow container with a thin, theme-aware scrollbar. Give it an explicit height (for example class="h-64") so the inner content can scroll.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra host classes merged via `cn()`. Include a height so overflow can scroll.

TreeComponent

Selector: base-tree Standalone: true

A hierarchical tree view component for displaying nested data structures. Supports expanding/collapsing folders and node selection. Pro tier.

Inputs:

Name	Type	Default	Description
nodes	`{ label: string; icon?: string; children?: TreeNode[]; expanded?: boolean; selected?: boolean; data?: Record<string, unknown> }[]`	[]	The hierarchical array of nodes to render.

Outputs:

Name	Emit Type	Description
nodeClick	`{ label: string; icon?: string; children?: TreeNode[]; expanded?: boolean; selected?: boolean; data?: Record<string, unknown> }`	Emitted when a user clicks on a node's label/body.
nodeExpand	`{ label: string; icon?: string; children?: TreeNode[]; expanded?: boolean; selected?: boolean; data?: Record<string, unknown> }`	Emitted when a folder node is expanded.
nodeCollapse	`{ label: string; icon?: string; children?: TreeNode[]; expanded?: boolean; selected?: boolean; data?: Record<string, unknown> }`	Emitted when a folder node is collapsed.

SelectTreeComponent

Selector: base-select-tree Standalone: true

Pro single-select dropdown that presents options as an expandable tree (combobox trigger + fixed panel). Supports label search (auto-expands ancestors of matches), leaf-only selection, clearable reset to null, disabled nodes, and keyboard navigation. Implements ControlValueAccessor — the form value is the selected node’s value.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra classes merged into the host via `cn()`.
nodes	`SelectTreeNode[]`	[]	Hierarchical options (`label`, `value`, optional `children` / `icon` / `expanded` / `disabled` / `data`).
placeholder	`string`	'Select…'	Shown when nothing is selected; also used as the trigger aria-label.
onlyLeaf	`boolean`	false	When true, only nodes without children can be selected (folders still expand/collapse).
clearable	`boolean`	false	Shows a clear control that writes `null`.
disabled	`boolean`	false	(two-way) Disables the control; also set by forms via `setDisabledState`.

Outputs:

Name	Payload	Description
selectionChange	`unknown \| null`	Emitted whenever the selected value changes (including clear).

CalendarComponent

Selector: base-calendar Standalone: true

A date picker calendar component that supports single date and date-range selection. Free tier. (base-datepicker and base-date-range-picker remain Pro.) Month view, day grid, and keyboard focus are signals (viewDate, days, focusedDate) so the grid stays current under OnPush / zoneless. The grid is a keyboard-operable date grid: arrows move by day/week, Home/End jump to month start/end, PageUp/PageDown change month, Enter/Space select.

Inputs:

Name	Type	Default	Description
mode	`'single' \| 'range'`	'single'	The selection mode. 'single' allows picking one day, 'range' allows picking start and end dates.
selectedDate	`Date \| null`	null	The currently selected date (only used in 'single' mode).
rangeStart	`Date \| null`	null	The start date of the selected range (only used in 'range' mode).
rangeEnd	`Date \| null`	null	The end date of the selected range (only used in 'range' mode).

Outputs:

Name	Emit Type	Description
dateSelected	`Date`	Emits the selected Date when mode is 'single' and a day is clicked.
rangeSelected	`{ start: Date \| null; end: Date \| null }`	Emits an object containing start and end Dates when mode is 'range'.

AnimatedCounterComponent

Selector: base-animated-counter Standalone: true

Free tier. Animates a number from a start value to the target the first time the host element enters the viewport (IntersectionObserver, threshold 0.2). The count runs on requestAnimationFrame outside the Angular zone with a cubic ease-out curve, re-entering the zone to update a displayed signal rendered in a tabular-nums span; formatting supports fixed decimals, a thousands separator, and prefix/suffix strings. On the server (non-browser platform) it skips animation and renders the final formatted value immediately; on any input change it resets the display to the formatted from value. Host classes are merged via cn() with a base inline-block class.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra classes merged into the host's `inline-block` class via `cn()`.
value	`number`	0	Target number to count up to.
from	`number`	0	Starting number the animation begins from.
duration	`number`	1500	Animation duration in milliseconds.
decimals	`number`	0	Number of decimal places shown in the formatted output.
prefix	`string`	''	String prepended to the formatted number (e.g. `$`).
suffix	`string`	''	String appended to the formatted number (e.g. `%`).
separator	`string`	','	Thousands separator; pass an empty string to disable grouping.

AvatarGroupComponent

Selector: base-avatar-group Standalone: true

Displays a stack of overlapping circular avatars with an overflow count badge. Renders at most max items; the remainder collapses into a "+N" bubble. Each avatar shows its image when avatarUrl is set, otherwise falls back to initials, then the uppercased first letter of name, then "?". Avatars overlap tightly at rest and spread apart on hover of the group (animated margin transition). Uses OnPush change detection with signal inputs; host classes are merged with the class input via cn().

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra classes merged into the host's base classes (`flex items-center group`) via `cn()`.
items	`AvatarGroupItem[]`	[]	Avatar entries (`avatarUrl`/`initials`/`name`) to render. Empty array renders nothing.
max	`number`	4	Maximum avatars shown before the rest collapse into a "+N" counter bubble.
size	`AvatarSize`	'md'	Avatar size (`xs`–`xl` or `full`); controls width/height and text size. Unknown values fall back to `md`.

CountdownComponent

Selector: base-countdown Standalone: true

Countdown timer that renders a horizontal row (flex gap-2 host) of boxed digit tiles — days, hours, minutes, seconds — each with a label underneath. Remaining time is computed once for SSR/prerender HTML; the 1s client ticker starts in afterNextRender (gated on a clientReady signal) so it survives hydration on static hosts where ngOnInit does not re-run. Ticks toward targetDate (clamped at zero, values zero-padded, state held in signals for zoneless CD); the timer restarts whenever targetDate changes and the interval is cleared on finish and on destroy. Also exports the CountdownTime interface (days, hours, minutes, seconds, total ms).

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra host classes, merged with the base `flex gap-2` via `cn()`.
targetDate	`Date \| string`	required	Date/time to count down to; changing it restarts the timer.
showDays	`boolean`	true	Whether to render the days tile (`booleanAttribute` transform).
daysLabel	`string`	'Days'	Label under the days tile.
hoursLabel	`string`	'Hours'	Label under the hours tile.
minutesLabel	`string`	'Min'	Label under the minutes tile.
secondsLabel	`string`	'Sec'	Label under the seconds tile.

Outputs:

Name	Payload	Description
tick	`CountdownTime`	Emitted every second (and immediately on start) with the remaining time breakdown.
finished	`void`	Emitted once when the countdown reaches zero; the interval then stops.

DataTableComponent

Selector: base-data-table Standalone: true

Pro tier. Install: npx base-ui-cli add data-table. Feature-rich table (generic over row type T extends DataTableRow) that renders cells as raw row[column.key] values from TableColumn[] — no custom cell templates. Client-side sort/page by default; set serverSide to skip client sort/slice (parent fetches the current page into data and the full count into totalItems). Sortable headers (requires both the sortable input and column.sortable) cycle asc → desc → unsorted, reset to page 1, set aria-sort, and support Enter/Space. Pagination is a windowed paginator (max 5 page buttons) when pageable is true. selectable adds a checkbox column bound to selected (identity via rowKey, default 'id'). resizable lets users drag header edges (column.width start width, column.minWidth, per-column resizable: false to lock). virtualize windows rows in a fixed-height viewport (viewportHeight, rowHeight) — best with pageable off and large data. loading shows skeleton rows (capped at 5); empty pages show emptyMessage. Checkbox clicks do not emit rowClick. OnPush; host class block merged with class via cn(). Cookbook: /cookbooks/invoice-table/.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra classes merged into the host's `block` class via `cn()`.
columns	`TableColumn[]`	[]	Column definitions (`key`, `label`, optional `sortable` / `width` / `minWidth` / `resizable` / `align`).
data	`T[]`	[]	Row objects. When `serverSide` is set, pass the current page only.
sortable	`boolean`	false	Enables header click sorting for columns with `sortable: true`. Accepts attribute shorthand via `booleanAttribute`.
pageable	`boolean`	false	Shows the paginator when the row count exceeds `pageSize` (or when `serverSide` + `totalItems` require it).
pageSize	`number`	10	Rows per page (client slice, or the page size advertised to the server).
loading	`boolean`	false	Shows pulsing skeleton rows instead of data.
striped	`boolean`	false	Tints odd rows with a subtle background.
bordered	`boolean`	false	Adds outer table border and per-row bottom borders.
hoverable	`boolean`	true	Applies a hover background to body rows.
emptyMessage	`string`	'No data available'	Text shown when `data` is empty and not loading.
selectable	`boolean`	false	Adds a checkbox column. Bind `selected` to an array of `rowKey` values.
rowKey	`string`	'id'	Property used as the selection identity.
selected	`Array<string \| number>`	[]	Selected row ids (or whatever `rowKey` points at). Two-way (`model`).
resizable	`boolean`	false	Drag the header edge to resize columns. Uses `column.width` as the start width.
serverSide	`boolean`	false	Skip client sort/slice. Parent fetches; pass the current page in `data` and the full count in `totalItems`.
totalItems	`number`	0	Total rows across all pages. Required for the paginator when `serverSide` is set.
virtualize	`boolean`	false	Window rows in a fixed-height viewport. Best with `pageable` off and large `data`.
rowHeight	`number`	44	Fixed row height in pixels used for windowing. Must match the rendered row.
viewportHeight	`number`	400	Viewport height in pixels when `virtualize` is set.
currentPage	`number`	1	Current page (1-based). Two-way (`model`) for server-driven tables.

Outputs:

Name	Payload	Description
rowClick	`T`	Emitted with the row object when a body row is clicked. Checkbox clicks do not fire this.
sortChange	`DataTableSortChange` (`{ key: string; direction: TableSortDirection }`)	Emitted after each sort toggle; `key` is '' and `direction` is '' when sorting is cleared (third click).
pageChange	`DataTablePageChange` (`{ page: number; pageSize: number }`)	Emitted when the paginator changes page. Always fired in `serverSide` mode.
selectionChange	`T[]`	Emitted with the selected row objects whenever the checkbox column changes.

SkeletonComponent

Selector: base-skeleton Standalone: true

Loading-placeholder skeleton that renders count pulsing gray blocks (animate-pulse, light/dark aware) in the chosen variant. text, circular, and rectangular render simple blocks sized via the width/height inputs (circular defaults to 40px × 40px); card renders a composite card layout (avatar circle, title/subtitle bars, three text lines) and table-row renders avatar + text + trailing-cell rows, both repeated count times. Uses OnPush change detection and signal inputs; the host gets block merged with the class input via cn().

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra classes merged into the host element's class list via `cn()` (aliased to internal `extraClass`).
variant	`SkeletonVariant`	'text'	Skeleton shape: `'text' \| 'circular' \| 'rectangular' \| 'card' \| 'table-row'`.
count	`number`	1	Number of skeleton items to repeat.
width	`string \| undefined`	—	Inline CSS width applied to simple variants (text/circular/rectangular); ignored by card and table-row layouts.
height	`string \| undefined`	—	Inline CSS height applied to simple variants; ignored by card and table-row layouts.
animated	`boolean`	true	Toggles the `animate-pulse` shimmer animation (accepts boolean attribute via `booleanAttribute` transform).

StatCardComponent

Selector: base-stat-card Standalone: true

Dashboard metric card with two layouts. Classic (default): large value over a label, optional tinted icon bubble on the left, and an optional trend row (green arrow-up or red arrow-down with preformatted trend text) plus a muted caption. Metric (variant="metric"): Motif Admin–style vertical KPI — uppercase micro-label, delta pill from a ratio (delta), large value, inline SVG sparkline from series (no Pro base-chart dependency), and footer caption. Host classes merge via cn() (block for classic; bordered flex column with hover for metric). OnPush with signal inputs. Exports StatCardVariant ('classic' | 'metric').

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra classes merged into the host classes via `cn()`.
variant	`StatCardVariant`	'classic'	`classic` = icon-left tile; `metric` = delta pill + sparkline stack.
value	`string`	''	The large metric value (e.g. "$48,295").
label	`string`	''	Label above the value (classic) or uppercase header (metric).
trend	`string \| undefined`	—	Classic: preformatted trend text (e.g. "+12.5%"); omitting it hides the trend row.
trendUp	`boolean \| undefined`	—	Classic: true = green up arrow, false = red down arrow.
icon	`string \| undefined`	—	Classic: optional icon name in a tinted bubble.
color	`StatCardColor`	'primary'	Classic: tint for the icon bubble and stroke.
caption	`string \| undefined`	—	Classic: beside trend when set. Metric: under sparkline when non-empty.
delta	`number \| undefined`	—	Metric: period change as a ratio (`0.062` → "+6.2%"); drives the pill and sparkline color.
series	`readonly number[]`	`[]`	Metric: sparkline values; empty hides the chart.

TimelineComponent

Selector: base-timeline Standalone: true

Vertical timeline container (flex flex-col host) that projects base-timeline-item children via ng-content. OnPush change detection.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra classes merged into the host classes via `cn()`.

TimelineItemComponent

Selector: base-timeline-item Standalone: true

A single event within a base-timeline: a colored dot (optionally containing a sprite icon) with a connecting line to the next item, an optional timestamp label, and projected content. OnPush change detection.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra classes merged into the host classes via `cn()`.
color	`TimelineColor`	'primary'	Dot color (primary/success/danger/warning/accent/default).
icon	`string \| undefined`	—	Optional icon name from the sprite displayed inside the dot.
time	`string \| undefined`	—	Optional timestamp label shown above the content.
last	`boolean`	false	Set on the final item to hide the connecting line (`booleanAttribute` — bare attribute works).

Form Controls

CustomSelectComponent

Selector: base-custom-select Standalone: true

A highly customizable dropdown select component. Allows mapping arrays of objects to display labels and selection values.

Inputs:

Name	Type	Default	Description
label	`string`	''	Optional label text displayed above the select field.
placeholder	`string`	'Select an option'	Text shown when no option is selected.
options	`unknown[]`	[]	The array of items to show in the dropdown.
displayKey	`string`	'label'	The object property key to display as the label.
valueKey	`string`	'value'	The object property key to use as the emitted value.
disabled	`boolean`	false	Disables the dropdown from opening.
multiple	`boolean`	false	(Experimental) Set to true to allow multiple selection.

Outputs:

Name	Emit Type	Description
selectionChange	`unknown`	Emits the selected value whenever the user clicks an option.

ComboboxComponent

Selector: base-combobox Standalone: true

Searchable single-select with keyboard navigation, optional create, local or async filtering, and Angular Forms (string | null). The results panel is a CDK overlay attached to the viewport (not position: absolute inside the field), aligned to the trigger’s start edge, so it is not clipped by a parent overflow: hidden. Use filterMode="none" with (queryChange) for server search.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra host classes merged via `cn()`.
label	`string`	''	Visible label above the field.
placeholder	`string`	'Search…'	Placeholder when nothing is selected.
options	`ComboboxOption[]`	[]	Listbox options (`value`, `label`, optional `description` / `disabled`).
filterMode	`'local' \| 'none'`	'local'	`local` filters by label; `none` shows `options` as-is.
loading	`boolean`	false	Spinner in the panel (async search).
allowCreate	`boolean`	false	Create the current query when it matches no option.
emptyText	`string`	'No results'	Empty-state copy.
disabled	`boolean`	false	Disables the field (also set by forms).

Outputs:

Name	Emit Type	Description
queryChange	`string`	Typed query on every change.
create	`string`	Emitted when the user creates a value not in `options`.
selectionChange	`string \| null`	Selected option value.

TagsInputComponent

Selector: base-tags-input Standalone: true

Tag field bound to string[] via Angular Forms. Enter, comma, or Tab adds a tag; Backspace removes the last. Optional suggestions dropdown.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra host classes merged via `cn()`.
label	`string`	''	Visible label above the field.
placeholder	`string`	'Add a tag…'	Placeholder when there are no tags.
suggestions	`string[]`	[]	Optional suggestion list.
max	`number`	0	Maximum tags; `0` is unlimited.
allowCreate	`boolean`	true	Allow tags that are not in `suggestions`.
disabled	`boolean`	false	Disables the field (also set by forms).

Outputs:

Name	Emit Type	Description
tagsChange	`string[]`	Emits whenever the tag list changes.

TimePickerComponent

Selector: base-time-picker Standalone: true

Overlay time picker bound to an HH:mm string via Angular Forms. Pair with base-datepicker showTime for a full datetime. The dropdown is a CDK overlay with a transparent backdrop, aligned to the field’s start edge; it opens below the input and flips above when there is not enough space. [inline]="true" keeps the panel in-flow (used by the datepicker datetime overlay).

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra host classes merged via `cn()`.
label	`string`	''	Visible label above the field.
placeholder	`string`	'Select time'	Placeholder when no time is selected.
hourCycle	`'12' \| '24'`	'24'	12-hour or 24-hour clock.
minuteStep	`number`	5	Minute increment.
inline	`boolean`	false	Inline panel instead of an overlay.
disabled	`boolean`	false	Disables the field (also set by forms).

Outputs:

Name	Emit Type	Description
timeChange	`string`	Emits `HH:mm` when the time changes.

ChatComponent

Selector: base-chat Standalone: true

AI chat kit: message list, streaming cursor, tool-call rows, and a prompt composer. Bind [messages], handle (send), and set [streaming] while a reply is in flight. Related: base-chat-message, base-chat-prompt.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra host classes merged via `cn()`.
messages	`ChatMessage[]`	[]	Ordered conversation turns.
streaming	`boolean`	false	True while an assistant reply is streaming.
placeholder	`string`	'Send a message…'	Composer placeholder.
disabled	`boolean`	false	Disables the composer.
emptyTitle	`string`	'How can I help?'	Empty-state title.
emptyDescription	`string`	'Send a message to start the conversation.'	Empty-state description.

Outputs:

Name	Emit Type	Description
send	`string`	User prompt.
stop	`void`	User stopped generation.

ChatMessageComponent

Selector: base-chat-message Standalone: true

A single chat turn — user, assistant, system, or tool call. Used by base-chat; can also be composed on its own.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra host classes merged via `cn()`.
message	`ChatMessage`	required	Message to render (`id`, `role`, `content`, optional `name` / `avatarUrl` / `streaming` / `toolName` / `toolStatus`).

No outputs.

ChatPromptComponent

Selector: base-chat-prompt Standalone: true

Composer for base-chat: textarea, send, and stop while streaming. Enter sends; Shift+Enter inserts a newline.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra host classes merged via `cn()`.
placeholder	`string`	'Send a message…'	Composer placeholder.
streaming	`boolean`	false	When true, Enter emits Stop instead of Send.
disabled	`boolean`	false	Disables the composer.

Outputs:

Name	Emit Type	Description
send	`string`	Trimmed user prompt.
stop	`void`	User stopped generation.

SelectComponent

Selector: base-select Standalone: true

A native HTML <select> wrapper component. Integrates natively with Angular Forms.

Inputs:

Name	Type	Default	Description
placeholder	`string`	''	Placeholder text shown when no valid option is selected.
disabled	`boolean`	false	Disables the select input.
value	`unknown`	—	The current selected value.

No outputs.

CheckboxComponent

Selector: base-checkbox Standalone: true

A custom styled checkbox component that integrates seamlessly with Angular Forms.

Inputs:

Name	Type	Default	Description
color	`'primary' \| 'danger' \| 'success' \| 'accent' \| 'warning'`	'primary'	The semantic visual color.
disabled	`boolean`	false	Disables the checkbox.
checked	`boolean`	false	The checked state of the checkbox. Bound via ngModel.
indeterminate	`boolean`	false	Parent-driven mixed visual state (e.g. select-all).

No outputs.

TriStateCheckboxComponent

Selector: base-tri-state-checkbox Standalone: true

Free three-state checkbox that cycles unchecked → checked → indeterminate on each click. Implements ControlValueAccessor; the form value is TriCheckboxState (true | false | 'indeterminate'). Use base-checkbox with [indeterminate] when a parent derives the mixed state instead.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra host classes merged via `cn()`.
color	`'primary' \| 'danger' \| 'success' \| 'accent' \| 'warning'`	'primary'	Semantic visual color.
disabled	`boolean`	false	(two-way) Disables the control; also set by forms via `setDisabledState`.
state	`TriCheckboxState`	false	(two-way) Current value; prefer `[(ngModel)]` / `formControlName` in forms.
ariaLabel	`string`	—	Accessible name when there is no projected label text.

Two-way: [(state)] / [(ngModel)] — value is TriCheckboxState.

ToggleComponent

Selector: base-toggle Standalone: true

A highly customizable toggle/switch component. Integrates natively with Angular Forms.

Inputs:

Name	Type	Default	Description
color	`'primary' \| 'danger' \| 'success' \| 'accent' \| 'warning'`	'primary'	The semantic color variant applied when the toggle is checked.
size	`'sm' \| 'md' \| 'lg'`	'md'	The physical size of the toggle switch.
shape	`'rounded' \| 'square' \| 'smooth'`	'smooth'	The border-radius style of the toggle track and thumb.
disabled	`boolean`	false	Disables the toggle, preventing interaction.
checked	`boolean`	false	The current checked/unchecked state.

No outputs.

RadioGroupComponent

Selector: base-radio-group Standalone: true

A container component for a group of base-radio-button elements. Manages the selected state and integrates with Angular Forms.

Inputs:

Name	Type	Default	Description
value	`unknown`	—	The currently selected value within the group.
disabled	`boolean`	false	Disables all radio buttons within this group when true.

No outputs.

RadioButtonComponent

Selector: base-radio-button Standalone: true

An individual radio option inside a base-radio-group.

Inputs:

Name	Type	Default	Description
name	`string`	—	The native `name` attribute for the radio input.
value	`unknown`	—	The value represented by this radio button.
color	`'primary' \| 'danger' \| 'success' \| 'accent' \| 'warning'`	'primary'	Semantic color variant.
disabled	`boolean`	false	Disables this specific radio button.

No outputs.

DatepickerComponent

Selector: base-datepicker Standalone: true

A standard date picker input field that opens an overlay calendar popup. Supports Angular Forms with Date objects.

Inputs:

Name	Type	Default	Description
placeholder	`string`	'Select date'	The placeholder text shown when no date is selected.
label	`string`	''	An optional label text displayed above the input.
disabled	`boolean`	false	Disables the input and prevents the calendar from opening.

No outputs.

DateRangePickerComponent

Selector: base-date-range-picker Standalone: true

An input field that opens a calendar popup specifically for picking start and end date ranges.

Inputs:

Name	Type	Default	Description
placeholder	`string`	'Select range'	The placeholder text shown when no date range is selected.
label	`string`	''	An optional label text displayed above the input.
disabled	`boolean`	false	Disables the input and prevents the calendar from opening.

No outputs.

InputGroupComponent

Selector: base-input-group Standalone: true

A structural container component that wraps form controls like inputs, selects, and textareas. Can automatically detect Angular FormControl state to conditionally display nested base-error components.

No inputs or outputs.

LabelComponent

Selector: base-label Standalone: true

A label element for use inside a base-input-group.

No inputs or outputs.

LightboxComponent

Selector: base-lightbox Standalone: true

Free lightbox gallery. Project one or more [base-lightbox-thumb] images; thumb size and aspect ratio are controlled with Tailwind on each thumb (class on base-lightbox lays out the thumbs wrapper — host itself is contents). Clicking a thumb opens a focus-trapped full-viewport overlay (cdkTrapFocus) with body scroll lock. Toolbar: flip horizontal/vertical, rotate 90°, zoom in/out (also mouse wheel), download, and browser fullscreen (maximize/minimize). Prev/next and a counter appear when there is more than one thumb. Keyboard: Esc closes, ←/→ navigate, +/− zoom. Transforms reset on index change and close. When a thumb or overlay image fails to load, initials from alt are shown ("Jane Doe" → JD) unless initialsFallback is false. Also exports lightboxInitialsFromAlt(). SSR-safe (PLATFORM_ID / injected DOCUMENT). Public methods: open(index?), close(), next(), prev().

Inputs:

Name	Type	Default	Description
class	`string`	''	Classes for the thumbs layout wrapper (e.g. `grid grid-cols-3 gap-2`).
loop	`boolean`	true	Wrap prev/next at the ends (`booleanAttribute`).
showToolbar	`boolean`	true	Show the transform / download toolbar (`booleanAttribute`).
showCounter	`boolean`	true	Show `n / total` when there is more than one image (`booleanAttribute`).
closeOnBackdrop	`boolean`	true	Close when the backdrop is clicked (`booleanAttribute`).
dialogLabel	`string`	'Image lightbox'	Accessible name for the dialog.
initialsFallback	`boolean`	true	Show alt-derived initials in the overlay when the image is missing/broken (`booleanAttribute`).

Outputs:

Name	Payload	Description
opened	`number`	Emitted when the lightbox opens, with the active index.
closed	`void`	Emitted when the lightbox closes.
indexChange	`number`	Emitted whenever the active index changes while open.

LightboxThumbDirective

Selector: [base-lightbox-thumb] Standalone: true

Marks a projected image (or other host with a resolvable URL) as a lightbox thumbnail. Click or Enter/Space opens the parent base-lightbox at this thumb's index. Size and aspect ratio are entirely Tailwind on the host element. On <img>, use native src / alt so the thumbnail paints — do not bind directive inputs that shadow those attributes. On load error (or empty src), replaces the broken thumb with an initials placeholder from alt when initialsFallback is true.

Inputs:

Name	Type	Default	Description
fullSrc	`string`	''	Full-resolution URL for the overlay; falls back to native `src` / `imageSrc`.
imageSrc	`string`	''	URL for non-`<img>` hosts only.
imageAlt	`string`	''	Alt/label override for non-`<img>` hosts; on `<img>` use native `alt`.
downloadName	`string`	''	Suggested filename for the download action.
initialsFallback	`boolean`	true	Show alt-derived initials when the thumb image is missing/broken (`booleanAttribute`).

ErrorComponent

Selector: base-error Standalone: true

An error message element for use inside a base-input-group.

No inputs or outputs.

InfoTextComponent

Selector: base-info-text Standalone: true

A helper/info text element for use inside a base-input-group.

No inputs or outputs.

InputAutocompleteComponent

Selector: base-input-autocomplete Standalone: true

A wrapper component that combines an input field with a native HTML datalist for autocomplete suggestions.

Inputs:

Name	Type	Default	Description
suggestions	`string`	''	A unique ID string to link the input list attribute with the datalist id.

InputSpinnerComponent

Selector: base-input-spinner Standalone: true

A numeric input component with increment and decrement buttons. Integrates directly with Angular Forms.

Inputs:

Name	Type	Default	Description
disabled	`boolean`	false	Disables the entire input and its buttons.
classes	`string`	''	Additional CSS classes to apply to the input field wrapper.
min	`number`	0	The minimum allowed value.
max	`number`	Infinity	The maximum allowed value.
step	`number`	1	The numeric step size for incrementing/decrementing.

No outputs.

ButtonGroupComponent

Selector: base-button-group Standalone: true

A container for grouping multiple toggle buttons. Integrates with Angular Forms via ControlValueAccessor.

Inputs:

Name	Type	Default	Description
ngModel	`unknown`	—	Connects to Angular FormsModule for two-way data binding.

Outputs:

Name	Emit Type	Description
change	`unknown`	Emits the value of the clicked button when the selection changes.

GroupButtonComponent

Selector: base-group-button-item Standalone: true

An individual button item designed to be used inside a base-button-group.

Inputs:

Name	Type	Default	Description
icon	`string`	—	Optional icon name to display inside the button.
disabled	`boolean`	false	Disables the button, preventing interaction.
active	`boolean`	false	Whether the button is currently in the toggled/active state.
value	`unknown`	—	The specific value this button represents.

No outputs.

ChipComponent

Selector: base-chip Standalone: true

Pill-shaped chip that projects its label via ng-content, with an optional leading base-icon and an optional remove button. The inner span gets role="button" and tabindex="0" (removed when disabled) and activates on click, Enter, or Space; active swaps to a solid filled color variant and is reflected via aria-pressed, while disabled applies opacity/pointer-events-none styling and suppresses both outputs. Host element receives inline-block merged with the class input via cn(); uses OnPush change detection.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra classes merged onto the host element via `cn()`.
color	`ChipColor`	''	Color variant; empty string renders the neutral slate style. Maps to tinted background/border with a solid variant when `active`.
size	`ChipSize`	'md'	Size variant (`sm`/`md`/`lg`) controlling text size, padding, and icon dimensions.
removable	`boolean`	false	Shows a close button that emits `removed` on click (accepts boolean attribute).
disabled	`boolean`	false	Disables interaction: removes `role`/`tabindex`, dims the chip, blocks pointer events, and suppresses output emissions (accepts boolean attribute).
icon	`string \| undefined`	—	Name of a leading `base-icon` rendered before the projected content.
active	`boolean`	false	Renders the solid "selected" color variant and sets `aria-pressed` (accepts boolean attribute).
removeLabel	`string`	'Remove'	`aria-label` for the remove button.

Outputs:

Name	Payload	Description
removed	`void`	Emitted when the remove button is clicked (click propagation is stopped); not emitted while disabled.
clicked	`void`	Emitted when the chip is clicked or activated via Enter/Space; not emitted while disabled.

ColorPickerComponent

Selector: base-color-picker Standalone: true

Color picker rendered as a swatch trigger button that opens a position: fixed panel containing a native <input type="color">, a hex text field (validated against #RRGGBB before committing), and a grid of preset swatches. Implements ControlValueAccessor for ngModel/reactive forms (internal value defaults to #3b82f6); the panel repositions itself on window scroll/resize, flips above the trigger when there is no room below, and closes on outside click or Escape. When disabled is set (or via setDisabledState), the trigger is dimmed and the panel will not open.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra classes merged into the host's `inline-block` class via `cn()` (input alias for `extraClass`).
pickerLabel	`string`	'Color picker'	Accessible label prefix for the trigger button's `aria-label` (combined with the current value).
swatches	`string[]`	12 preset hex colors	Hex color strings rendered as the preset swatch grid; the active swatch is highlighted and marked `aria-pressed`.
disabled	`boolean`	false	(two-way) Disables the trigger and prevents the panel from opening; also driven by the forms API via `setDisabledState`.

FloatingInputComponent

Selector: base-floating-input Standalone: true

Text input with a material-style floating label: the label sits inside the field and shrinks/floats up (via Tailwind peer classes) when the input is focused or has a value. Implements ControlValueAccessor, so it works with [(ngModel)] and reactive forms, including disabled state (setDisabledState renders the native input disabled with reduced opacity). Host element gets block w-full merged with the class input via cn(); internal state (value, isDisabled) is signal-based with OnPush change detection.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra classes merged into the host's `block w-full` classes via `cn()`.
label	`string`	'Label'	Floating label text displayed inside the field.
type	`string`	'text'	Native input `type` attribute (e.g. `text`, `email`, `password`).

MentionInputComponent

Selector: base-mention-input Standalone: true

Pro tier. Wrapper that adds @-mention autocomplete to a projected native <input> or <textarea> (via <ng-content>). Typing @ followed by word characters opens a fixed-position suggestion panel anchored at the text caret (measured with a hidden mirror element), filtering users by username or name; the panel repositions on scroll/resize, flips above the caret when space below is insufficient, and hides when no users match. Full keyboard support (ArrowUp/ArrowDown, Home, End, Enter to select, Escape to close) plus click-outside dismissal; ARIA combobox/listbox attributes (role, aria-expanded, aria-activedescendant, etc.) are applied to the projected input while open. Selecting a user inserts @username at the caret and dispatches a bubbling input event so Angular forms bindings on the projected control stay in sync. Implements ControlValueAccessor — bind [(ngModel)] on the wrapper (do not also bind the projected field to the same model). Exports the MentionUser interface (id, username, optional avatar/name); options render an avatar image or an initial-letter fallback bubble.

Inputs:

Name	Type	Default	Description
users	`MentionUser[]`	[]	Candidate users for mention suggestions; filtered case-insensitively against the text typed after `@` (matches `username` or `name`).

MultiSelectComponent

Selector: base-multi-select Standalone: true

Searchable multi-select dropdown that renders selected values as removable chips inside a combobox trigger. Opening the trigger reveals a text search box that filters options by label (already-selected options are hidden from the list); the option panel is position-fixed, repositions itself on window scroll/resize, and flips to a drop-up when there is not enough space below. Implements ControlValueAccessor (NG_VALUE_ACCESSOR) for Angular Forms integration, supports full keyboard navigation (ArrowUp/ArrowDown, Enter/Space to toggle, Home/End, Escape to close), closes on outside document click, and shows a "No options found" message when the filtered list is empty. Option values are typed via the exported MultiSelectOption interface ({ label, value, disabled? }).

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra classes merged into the host classes via `cn()` (aliased to internal `extraClass`).
options	`MultiSelectOption[]`	[]	Options to display; entries with `disabled: true` cannot be toggled. Empty array yields the "No options found" state when open.
placeholder	`string`	'Select options…'	Placeholder text shown when nothing is selected; also used as the trigger's aria-label and the search input placeholder.
max	`number`	0	Maximum number of selections; further selections are ignored once reached. 0 means unlimited.
disabled	`boolean`	false	(two-way) Disables the control (also set by forms via `setDisabledState`); prevents opening and dims the trigger.

Outputs:

Name	Payload	Description
selectionChange	`unknown[]`	Emitted with the full array of selected values whenever an option is added or a chip is removed.

PickListComponent

Selector: base-pick-list Standalone: true

Pro dual-listbox that moves items between available (source) and selected (target) panes. Click highlights items (⌘/Ctrl-click for multi-select), transfer buttons move highlighted or all items, and double-click moves a single item. Optional per-pane filters. Implements ControlValueAccessor — the form value is unknown[] of selected option values. Option model: exported PickListItem ({ label, value, disabled? }).

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra host classes merged via `cn()`.
options	`PickListItem[]`	[]	Full option catalog; selected values are hidden from the source pane.
sourceHeader	`string`	'Available'	Title above the source list.
targetHeader	`string`	'Selected'	Title above the target list.
filter	`boolean`	false	Shows filter inputs above each list.
disabled	`boolean`	false	(two-way) Disables the control; also set by forms via `setDisabledState`.

Outputs:

Name	Payload	Description
selectionChange	`unknown[]`	Emitted whenever the selected values array changes.

KnobComponent

Selector: base-knob Standalone: true

Pro rotary dial for selecting a numeric value along a 270° arc. Pointer drag and keyboard (arrows, PageUp/PageDown, Home/End). Implements ControlValueAccessor for Angular Forms. Exported size type: KnobSize ('sm' | 'default' | 'lg').

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra host classes merged via `cn()`.
min	`number`	0	Minimum value.
max	`number`	100	Maximum value.
step	`number`	1	Step increment for drag and keyboard.
color	`SliderColor`	'primary'	Accent color for track and indicator.
size	`KnobSize`	'default'	Dial diameter (`sm` 96px / `default` 128px / `lg` 160px).
showValue	`boolean`	false	Shows the current value in the dial center.
disabled	`boolean`	false	(two-way) Disables interaction; also set by forms via `setDisabledState`.
ariaLabel	`string`	'Knob'	Accessible name (`role="slider"`).

Outputs:

Name	Payload	Description
valueChange	`number`	Emitted whenever the value changes.

OtpInputComponent

Selector: base-otp-input Standalone: true

PIN / OTP input rendering length individually-focusable single-character boxes. Implements ControlValueAccessor (registers NG_VALUE_ACCESSOR) so it works with Angular Forms; typing auto-advances focus, Backspace clears and moves back, ArrowLeft/ArrowRight navigate, and paste distributes characters across boxes. Boxes use autocomplete="one-time-code" and switch to type="password" when masked; setDisabledState writes to the disabled model.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra classes merged into the host's `flex gap-2` classes via `cn()`.
length	`number`	6	Number of digit boxes to render.
mask	`boolean`	false	Renders boxes as `type="password"` to hide entered characters (accepts boolean attribute).
numbersOnly	`boolean`	true	Strips non-digit characters on input/paste and uses `type="tel"` with numeric inputmode (accepts boolean attribute).
disabled	`boolean`	false	(two-way) Disables all boxes; also set by Angular Forms via `setDisabledState`.

Outputs:

Name	Payload	Description
completed	`string`	Emitted with the full code string once every box is filled.

PasswordStrengthComponent

Selector: base-password-strength Standalone: true

Four-segment password strength meter bar with a text label below it. Computes a 0–4 score from the password input (one point each for length ≥ 8, mixed upper/lowercase, a digit, and a special character) and colors the active segments red/orange/yellow/green accordingly, with a matching "Weak" / "Fair" / "Good" / "Strong" label. When password is empty, all segments render inactive (slate) and the label is hidden. Uses OnPush change detection; purely presentational — no outputs and no form integration.

Inputs:

Name	Type	Default	Description
password	`string`	''	The password value to evaluate; the strength score and label are recomputed whenever it changes.

PhoneInputComponent

Selector: base-phone-input Standalone: true

Phone number field with a country dial-code selector. Renders a trigger button (flag emoji + dial code + chevron) beside a type="tel" input; clicking the trigger opens a fixed-position dropdown listing 14 hardcoded countries (COMMON_COUNTRIES: Country[], also exported from this file) that flips above the trigger when viewport space below is insufficient, repositions on scroll/resize, and closes on outside click. Implements ControlValueAccessor: keystrokes are sanitized to digits/spaces/hyphens, and the emitted value is the dial code plus the stripped digits (e.g. +15551234), or '' when the local part is empty; writeValue parses an incoming value's dial-code prefix (longest match first) to restore the country selection, and setDisabledState dims and disables the whole control. Has no inputs or outputs — the country list is not configurable.

CurrencyInputComponent

Selector: base-currency-input Standalone: true

Locale-aware currency field. Stores a number | null via Angular forms (ControlValueAccessor). Shows a formatted value when idle and a raw editable amount while focused. Do not nest inside base-input-group — it is a composite control (the group only projects [base-input], [base-textarea], and base-mention-input). Prefixes the ISO currency symbol from Intl.NumberFormat formatToParts.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra host classes merged via `cn()`.
currency	`string`	'USD'	ISO 4217 currency code used for formatting and the prefix symbol.
locale	`string`	'en-US'	BCP 47 locale passed to `Intl.NumberFormat`.
placeholder	`string`	'0.00'	Placeholder when the value is empty and the field is not focused.
ariaLabel	`string`	'Amount'	Accessible name for the inner text field.
min	`number \| null`	null	Minimum allowed value (applied on blur).
max	`number \| null`	null	Maximum allowed value (applied on blur).
showSymbol	`boolean`	true	Hide the currency symbol prefix when false (the formatted value still uses the currency).

RangeSliderComponent

Selector: base-range-slider Standalone: true

Single-value range slider built on a native <input type="range">, styled with Tailwind accent-color classes per color. Implements ControlValueAccessor (registered via NG_VALUE_ACCESSOR), so it works with ngModel and reactive forms; non-numeric written values coerce to 0. Optionally renders the min/max bounds beside the track and the current value (shown with one decimal place when non-integer). Sets aria-label, aria-valuemin, aria-valuemax, and aria-valuenow on the input.

Inputs:

Name	Type	Default	Description
min	`number`	0	Minimum value of the slider.
max	`number`	100	Maximum value of the slider.
step	`number`	1	Step increment between selectable values.
color	`SliderColor`	'primary'	Accent color of the slider track/thumb (primary/success/danger/warning/accent).
disabled	`boolean`	false	(two-way) Disables the slider; also set by forms via `setDisabledState`.
showValue	`boolean`	false	Shows the current value label after the track (accepts boolean attribute).
showMinMax	`boolean`	false	Shows the min and max labels on either side of the track (accepts boolean attribute).
ariaLabel	`string`	'Slider'	Accessible label applied to the native range input.

DualRangeSliderComponent

Selector: base-dual-range-slider Standalone: true

Dual-thumb range slider for selecting a numeric span ({ start, end }) within min–max. Thumbs cannot cross. On hover/focus, tip bubbles appear above each thumb (disable with [showTip]="false"). Implements ControlValueAccessor for Angular Forms.

Inputs:

Name	Type	Default	Description
min	`number`	0	Track minimum.
max	`number`	100	Track maximum.
step	`number`	1	Step increment.
color	`SliderColor`	'primary'	Accent for fill and thumbs.
disabled	`boolean`	false	(two-way) Disables both thumbs.
showValue	`boolean`	false	Shows `start – end` after the track.
showMinMax	`boolean`	false	Shows track min/max labels.
showTip	`boolean`	true	Hover/focus tips above each thumb.
ariaLabel	`string`	'Range'	Accessible name for the control group.
class	`string`	`''`	Extra host classes.

Form value: DualRangeValue = { start: number; end: number }

SplitterComponent

Selector: base-splitter Standalone: true

Two-pane resizable layout. Project panes with attributes base-splitter-start and base-splitter-end. Drag the gutter, use arrow keys (Home/End for min/max), or double-click to reset to 50%. Supports nesting. Pro tier. Install: npx base-ui-cli add splitter.

Inputs:

Name	Type	Default	Description
size	`number` (model)	50	Primary (start) pane size as a percentage.
orientation	`'horizontal' \| 'vertical'`	`'horizontal'`	Side-by-side or stacked panes.
min	`number`	10	Minimum primary size (%).
max	`number`	90	Maximum primary size (%).
step	`number`	2	Keyboard arrow step (%).
disabled	`boolean`	false	Locks resizing.
ariaLabel	`string`	`'Resize panels'`	Accessible name for the separator.
class	`string`	`''`	Extra host classes (set height for vertical).

Projection: [base-splitter-start], [base-splitter-end]

Overlay

DialogComponent

Selector: base-dialog Standalone: true

The main wrapper component for dialog/modal content. Should be used inside a component that is passed to DialogService.open(). Pair with loading/disabled footer actions (base-progress-button) when a submit cannot be retried.

Inputs:

Name	Type	Default	Description
width	`number`	—	Explicit width in pixels.
height	`number`	—	Explicit height in pixels.

DialogContainerComponent

Selector: base-dialog-container Standalone: true

Internal container component that renders the dialog overlay and handles click-outside behavior. Created dynamically by DialogService. Traps keyboard focus with Angular CDK FocusTrapFactory while open.

No inputs or outputs.

DialogHeaderComponent

Selector: base-dialog-header Standalone: true

A header section for a dialog, rendered as part of base-dialog.

No inputs or outputs.

DialogBodyComponent

Selector: base-dialog-body Standalone: true

A body section for a dialog, rendered as part of base-dialog.

Inputs:

Name	Type	Default	Description
height	`number`	—	Explicit height in pixels. Usually set automatically by parent `base-dialog`.

DialogFooterComponent

Selector: base-dialog-footer Standalone: true

A footer section for a dialog, rendered as part of base-dialog.

No inputs or outputs.

DrawerComponent

Selector: base-drawer Standalone: true

A side-drawer/offcanvas component that slides in from the edge of the screen.

Inputs:

Name	Type	Default	Description
size	`'sm' \| 'md' \| 'lg' \| 'xl' \| string`	'md'	The size of the drawer.
position	`'left' \| 'right' \| 'top' \| 'bottom'`	'right'	The edge of the screen to slide in from.
close	`boolean`	false	Triggers the closing animation when set to true.

Outputs:

Name	Emit Type	Description
closed	`void`	Event emitted when the drawer has fully closed.

DropdownMenuComponent

Selector: base-dropdown-menu Standalone: true

The container component for a dropdown menu. Designed to be passed into a [base-dropdown-menu-trigger] directive.

Inputs:

Name	Type	Default	Description
size	`string`	—	Optional custom width size for the dropdown container.

Outputs:

Name	Emit Type	Description
closed	`void`	Event emitted when the menu has fully closed.

ScrollTopComponent

Selector: base-scroll-top Standalone: true

Floating scroll-to-top button. Shows after scrollTop exceeds threshold. Targets window, nearest scrollable ancestor, or a CSS selector. Install: npx base-ui-cli add scroll-buttons.

Inputs: target, threshold, color, size, position, fixed, behavior, ariaLabel, class

ScrollBottomComponent

Selector: base-scroll-bottom Standalone: true

Floating scroll-to-bottom button. Shows when more than threshold pixels remain below the viewport. Same targeting API as base-scroll-top. Install: npx base-ui-cli add scroll-buttons.

Inputs: target, threshold, color, size, position, fixed, behavior, ariaLabel, class

SpeedDialComponent

Selector: base-speed-dial Standalone: true

Free floating action button that expands a stack of secondary actions. Supports up / down / left / right expansion, corner position, fixed or absolute placement, optional labels, and closes on outside click, Escape, or action press (configurable).

Inputs:

Name	Type	Default	Description
actions	`SpeedDialAction[]`	[]	Secondary actions (`icon`, optional `label` / `color` / `disabled` / `id` / `ariaLabel`).
direction	`'up' \| 'down' \| 'left' \| 'right'`	'up'	Expansion direction from the trigger.
position	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	'bottom-right'	Corner placement.
fixed	`boolean`	true	`true` = viewport fixed; `false` = absolute inside a relative parent.
color	`IconButtonColor \| string`	'primary'	Trigger button color.
size	`IconButtonSize`	'lg'	Trigger and action button size.
openIcon	`string`	'plus'	Trigger icon when closed.
closeIcon	`string`	'x'	Trigger icon when open.
showLabels	`boolean`	false	Shows each action’s `label` beside the button.
closeOnAction	`boolean`	true	Closes the dial after an action click.
ariaLabel	`string`	'Speed dial'	Accessible name for the group / trigger.
class	`string`	''	Extra host classes merged via `cn()`.
open	`boolean`	false	(two-way) Open state.

Outputs:

Name	Payload	Description
actionClick	`SpeedDialAction`	Emitted when an enabled action is clicked.

ContextMenuComponent

Selector: base-context-menu Standalone: true

Right-click context menu panel. Pass into [base-context-menu-trigger]. Opens at the pointer (or host center for Shift+F10 / ContextMenu key). Install: npx base-ui-cli add context-menu.

Inputs:

Name	Type	Default	Description
size	`string`	—	Optional custom width for the menu panel.

Outputs:

Name	Emit Type	Description
closed	`void`	Emitted when the menu should close.

ContextMenuDirective

Selector: [base-context-menu-trigger] Standalone: true

Opens a base-context-menu on contextmenu, Shift+F10, or the ContextMenu key. Positions via CDK Overlay at the pointer.

Inputs:

Name	Type	Default	Description
base-context-menu-trigger	`ContextMenuPanel`	—	Menu panel reference.
disabled	`boolean`	`false`	Disables the custom menu.

BaseContextMenuItemDirective

Selector: [base-context-menu-item] Standalone: true

Styles a button or link as a context menu item (role="menuitem").

DropdownMenuItemComponent

Selector: base-dropdown-menu-item Standalone: true

An individual item within a base-dropdown-menu. Clicking a normal item closes the menu. Bind checked (or set stayOpen) for selectable items that toggle without dismissing the dropdown.

Inputs:

Name	Type	Default	Description
class	`string`	`''`	Extra host classes merged via `cn()`.
stayOpen	`boolean`	`false`	Keep the dropdown open after this item is clicked. Implied when `checked` is bound.
checked	`boolean \| undefined`	`undefined`	When set, renders as `menuitemcheckbox` and two-way toggles without closing the menu.

Outputs:

Name	Emit Type	Description
checkedChange	`boolean \| undefined`	Emitted when a checkbox item is toggled.

AlertComponent

Selector: base-alert Standalone: true

A highly configurable alert component for displaying important messages. Includes support for auto-dismissal, manual closing, and multiple visual variants.

Inputs:

Name	Type	Default	Description
color	`'' \| 'primary' \| 'success' \| 'danger' \| 'accent' \| 'warning'`	''	The semantic color variant.
variant	`'soft' \| 'solid' \| 'outline'`	'soft'	The stylistic appearance (soft, solid, outline).
icon	`string`	—	An optional icon name to display at the start of the alert.
close	`boolean`	false	Whether the alert should display a close button.
duration	`number`	0	Auto-dismiss duration in milliseconds. 0 disables auto-dismiss.

Outputs:

Name	Emit Type	Description
closed	`void`	Emitted when the alert is closed (either manually or via timeout).

AlertActionsComponent

Selector: base-alert-actions Standalone: true

Container for action buttons within an alert component.

No inputs or outputs.

TooltipDirective

Selector: [base-tooltip] Standalone: true

An attribute directive that attaches a floating tooltip to any element. Hover or focus shows the tooltip; mouse leave, blur, Escape, or scroll (window or nested overflow containers) hides it.

Important: use tooltipPlacement for position — never bare placement. Dropdown, popover, and drawer also bind placement on the same host; a value like end breaks tooltip positioning.

Inputs:

Name	Type	Default	Description
tooltipTitle (via `[base-tooltip]`)	`string`	''	The text content to display inside the tooltip.
tooltipPlacement	`TooltipPlacement \| string` (`'top' \| 'bottom' \| 'left' \| 'right'`)	'top'	Tooltip position relative to the host. Namespaced so it does not collide with dropdown/popover/drawer `placement`.
tooltipClass	`string`	''	Additional custom CSS classes to apply to the tooltip element.
delay	`string`	'0'	Milliseconds to delay before showing the tooltip.
type	`'dark' \| 'light' \| string`	'dark'	The visual theme variant.
canShow	`boolean`	true	Whether the tooltip is permitted to show at all.

Example:

<button
  base-tooltip="Account"
  tooltipPlacement="bottom"
  [base-dropdown-menu-trigger]="menu"
  placement="end"
>
  …
</button>

RippleDirective

Selector: [base-ripple] Standalone: true

Material-style ink ripple on pointer press (primary button) or Enter/Space. Ensures the host is positioned and clips overflow so the ink stays inside rounded corners. Skips when disabled / aria-disabled, rippleDisabled, SSR, or prefers-reduced-motion. Free tier. CLI: npx base-ui-cli add ripple.

Inputs:

Name	Type	Default	Description
rippleColor	`string`	`'rgba(255, 255, 255, 0.55)'`	Ink color (use a dark rgba on light surfaces).
rippleCentered	`boolean`	false	Always expand from the host center.
rippleDisabled	`boolean`	false	Disables ripple creation while the directive stays attached.
rippleDuration	`number`	550	Animation duration in milliseconds.

BottomSheetComponent

Selector: base-bottom-sheet Standalone: true

Mobile-style modal panel that slides up from the bottom of the screen with a fading, blurred backdrop. Supports swipe-down-to-dismiss via a drag handle (closes after 120px of drag or a fast flick), Escape-key and backdrop-click dismissal (all gated by dismissible), an optional close button, and focus trapping via cdkTrapFocus cdkTrapFocusAutoCapture with role="dialog"/aria-modal. Locks body scroll while open and restores it on destroy. Host class is contents and can be extended via the class input.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra classes merged into the host class via `cn()` (alias for `extraClass`).
open	`boolean`	false	(two-way) Open state of the sheet; bind with `[(open)]`.
height	`BottomSheetHeight`	'auto'	Sheet height: 'auto' (max 85vh), 'half' (50vh), 'full' (94vh), or any custom CSS height string applied as an inline style.
showHandle	`boolean`	true	Shows the drag handle bar at the top (the swipe-down-to-dismiss target). Accepts boolean attribute.
showClose	`boolean`	false	Shows a close (X) icon button in the top-right corner. Accepts boolean attribute.
sheetLabel	`string`	'Bottom sheet'	Accessible name applied as `aria-label` on the dialog.
dismissible	`boolean`	true	Whether backdrop click, swipe-down gesture, or Escape key can dismiss the sheet. Accepts boolean attribute.

Outputs:

Name	Payload	Description
closed	`void`	Emitted when the sheet closes, regardless of how the close was triggered.

CommandPaletteComponent

Selector: base-command-palette Standalone: true

Cmd+K style command palette: when open is true it renders a full-screen backdrop plus a centered dialog panel with a search input, grouped command list, and keyboard-hints footer. Filters items by substring match against label, description, and group; supports two-way binding via [(open)] (input + openChange output pair), traps focus with cdkTrapFocus, and restores focus to the previously focused element on close. Keyboard support via a document:keydown listener: ArrowUp/ArrowDown/Home/End move the active option, Enter selects it (emits selected then closes), Escape closes; when no items match the query a "No results" status message is shown. The CommandItem interface (id, label, optional group/icon/shortcut/description) is exported from the same file.

Inputs:

Name	Type	Default	Description
open	`boolean`	false	Whether the palette overlay is shown; uses `booleanAttribute` transform. Pair with `openChange` for `[(open)]` two-way binding.
items	`CommandItem[]`	[]	Commands to list, optionally grouped via each item's `group` field. Empty array renders the "No results" message.
placeholder	`string`	'Type a command or search…'	Placeholder text for the search input.

Outputs:

Name	Payload	Description
openChange	`boolean`	Emits `false` when the palette closes (Escape, backdrop click, item selection, or component destroy).
selected	`CommandItem`	Emitted when a command is chosen via click or Enter; the palette closes afterwards.

PopoverComponent

Selector: base-popover Standalone: true

Self-contained popover with a trigger slot and a panel slot: project the trigger element into [popover-trigger] and the panel content as default children. The panel is a CDK overlay on the viewport (not position: fixed inside the host), so it stays next to the trigger even inside overflow: hidden cards. Placement (bottom-start default) flips when there is not enough room. Opens/closes on trigger click, Enter, or Space; closes on backdrop click and Escape; on open it moves focus to the first focusable element inside the panel and restores focus on close. The trigger wrapper carries role="button" and aria-haspopup/aria-expanded/aria-controls; the panel has role="dialog".

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra Tailwind classes merged into the host element via `cn()`.
minWidth	`string`	'200px'	CSS min-width applied to the panel.
placement	`PopoverPlacement`	'bottom-start'	Preferred panel position relative to the trigger; may be overridden at runtime by an external trigger directive.

PopoverTriggerDirective

Selector: [base-popover-trigger] Standalone: true

Alternative external trigger for base-popover, for when the trigger button must live outside the <base-popover> element. On host click it calls toggleWithPlacement() on the referenced PopoverComponent, passing its own placement as an override. Closes the referenced popover when the directive is destroyed.

Inputs:

Name	Type	Default	Description
base-popover-trigger	`PopoverComponent`	required	Reference to the popover instance to toggle (bind a template reference variable).
placement	`PopoverPlacement`	'bottom-start'	Placement override applied to the popover when opened via this trigger.

HoverCardComponent

Selector: base-hover-card Standalone: true

Rich preview panel that opens when the pointer (or keyboard focus) rests on the trigger. Unlike base-popover, there is no backdrop — the pointer can move into the panel. Closes after closeDelay on leave, on outside pointer down, and on Escape. Project the trigger into [hover-card-trigger] and panel content as default children. The panel is a CDK overlay on the viewport so it is not clipped by overflow: hidden parents.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra Tailwind classes merged into the host element via `cn()`.
minWidth	`string`	'240px'	CSS min-width applied to the panel.
placement	`PopoverPlacement`	'bottom-start'	Preferred panel position relative to the trigger; flips when there is not enough room.
openDelay	`number`	200	Milliseconds to wait after pointer enter / focus before opening.
closeDelay	`number`	150	Milliseconds to wait after pointer leave before closing.

Outputs:

Name	Payload	Description
openChange	`boolean`	Emits whenever the panel opens or closes.

LoadingOverlayComponent

Selector: base-loading-overlay Standalone: true

Blocks a region (or the viewport) with base-spinner while work is in progress. Sets aria-busy on the host and a polite live region on the overlay. Prefer this over base-spinner-wrapper when you need a message, scroll locking, or fullscreen. Contained mode wraps projected content in a relative host; fullscreen covers the viewport with position: fixed.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra host classes merged via `cn()`. Include a min-height for contained overlays.
visible	`boolean`	false	Shows the blocking overlay (boolean attribute).
fullscreen	`boolean`	false	Cover the viewport instead of wrapping projected content.
lockScroll	`boolean`	false	Set `overflow: hidden` on `document.body` while visible. Also applied when `fullscreen` is true.
message	`string`	''	Optional status text announced via the live region.
size	`SpinnerSize`	'lg'	Spinner diameter.
color	`SpinnerColor`	'primary'	Spinner color. Use `inverted` on a dark backdrop.

CookieBannerComponent

Selector: base-cookie-banner Standalone: true

Fixed consent banner. Hidden until the client confirms localStorage has no stored choice (afterNextRender, SSR-safe). Accept / Reject persist 'accepted' or 'rejected' under storageKey and emit. Call reset() to clear storage and show the banner again.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra host classes merged via `cn()`.
storageKey	`string`	'base-cookie-consent'	`localStorage` key used to remember the choice.
title	`string`	'We use cookies'	Heading shown beside the cookie icon.
message	`string`	(default copy)	Supporting copy under the title.
acceptLabel	`string`	'Accept'	Label for the accept button.
rejectLabel	`string`	'Reject'	Label for the reject button.
policyHref	`string`	''	Optional privacy policy URL. Hidden when empty.
policyLabel	`string`	'Privacy policy'	Label for the privacy policy link.

Outputs:

Name	Payload	Description
accepted	`void`	Emitted after the user accepts (and the choice is stored).
rejected	`void`	Emitted after the user rejects (and the choice is stored).
consentChange	`CookieConsent`	Emitted with `'accepted'` or `'rejected'` after accept, reject, or a successful choice.

ToastComponent

Selector: base-toast-container Standalone: true

Toast renderer used programmatically by ToastService — you normally never place this selector yourself. The service creates one container attached to document.body (with aria-live="polite"), and the component groups active toasts by position (top-right, top-left, top-center, bottom-right, bottom-left, bottom-center), rendering each as a colored, bordered card with an icon, message, and dismiss button, animating out over 300ms. State is held in a toasts signal with addToast/removeToast/cleanToast/dismissToast methods called by the service. No inputs or outputs.

Use via ToastService (documented under Services): show(message, { color, duration, icon, position, action }) plus success/error/warning/info shorthands, promise(promiseOrFn, { loading, success, error }), dismiss(id), and clearAll(). Duration defaults to 4000ms; duration: 0 keeps a toast until dismissed. action is { label, onClick, dismiss? } and renders an inline button (Undo-style).

ResponsiveNavComponent

Selector: base-responsive-nav Standalone: true

Progressive (priority+) horizontal navigation. Project base-responsive-nav-item children; as many as fit stay visible and the rest spill into a "More" dropdown from the right. Leftmost items have the highest priority.

Inputs:

Name	Type	Default	Description
linkClass	`string`	(styled default)	Tailwind classes applied to each item link.
moreLabel	`string`	`'More navigation links'`	Accessible label for the overflow trigger.
class	`string`	`''`	Extra host classes merged via `cn()`.

Example:

<base-responsive-nav>
  <base-responsive-nav-item routerLink="/docs">
    <base-icon name="book" class="h-4 w-4 stroke-slate-500"></base-icon>
    Docs
  </base-responsive-nav-item>
  <base-responsive-nav-item routerLink="/blog">Blog</base-responsive-nav-item>
  <base-responsive-nav-item href="https://github.com" target="_blank">GitHub</base-responsive-nav-item>
</base-responsive-nav>

ResponsiveNavItemComponent

Selector: base-responsive-nav-item Standalone: true

Projected nav link for base-responsive-nav. Put the label and optional icon in the content.

Inputs:

Name	Type	Default	Description
routerLink	`string \| any[]`	—	In-app route (`RouterLink`). Wins over `href`.
href	`string`	—	External or hash URL when not using `routerLink`.
target	`string`	—	Optional `target` for `href` (e.g. `_blank`).
menuLabel	`string`	—	Overflow menu text; defaults to projected text.
class	`string`	`''`	Extra classes merged onto the inner link.

MenubarComponent

Selector: base-menubar Standalone: true

Horizontal application menubar. Project base-menubar-menu children; each menu opens a base-dropdown-menu of actions. Click a top-level trigger to open the first menu; after that, hover switches menus and opens nested submenus. Click a leaf / link or outside to close. Bind checked (or stayOpen) on items that should toggle without dismissing the menu. Arrow Left/Right move between menus (and switch the open menu); Arrow Down / Enter / Space open; Escape closes.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra host classes merged via `cn()`.

MenubarMenuComponent

Selector: base-menubar-menu Standalone: true

One top-level menu inside base-menubar. Project base-dropdown-menu-item children, plus nested base-dropdown-menu panels on items that use [base-dropdown-menu-trigger] with placement="right" (or left).

Inputs:

Name	Type	Default	Description
label	`string`	''	Visible label on the menubar trigger.
class	`string`	''	Extra host classes merged via `cn()`.
disabled	`boolean`	false	Disables the trigger so the menu cannot open.

BreadcrumbComponent

Selector: base-breadcrumb Standalone: true

A container component for breadcrumb navigation. Usually contains multiple base-breadcrumb-item components.

No inputs or outputs.

BreadcrumbItemComponent

Selector: base-breadcrumb-item Standalone: true

An individual breadcrumb link within a base-breadcrumb.

Inputs:

Name	Type	Default	Description
icon	`string`	—	Optional icon name to display before the label.
link	`string`	—	Optional URL link for this breadcrumb segment.
label	`string`	''	The text label of the breadcrumb segment.
separator	`string`	—	Optional custom separator string.

NavListComponent

Selector: base-nav-list Standalone: true

A navigation list container. Usually used inside sidebars or drawer menus. Expects base-list-item or similar navigation links as children.

No inputs or outputs.

ScrollNavComponent

Selector: base-scroll-nav Standalone: true

A highly interactive layout component that synchronizes a sidebar navigation list with scrollable content. As the user scrolls the content area, the active navigation link updates automatically. Free shell (npx base-ui-cli add scroll-nav).

No inputs or outputs.

ScrollNavSidebarComponent

Selector: base-scroll-nav-sidebar Standalone: true

A sidebar navigation panel for base-scroll-nav.

No inputs or outputs.

ScrollNavContentComponent

Selector: base-scroll-nav-content Standalone: true

The scrollable content area for base-scroll-nav.

No inputs or outputs.

ShellComponent

Selector: base-shell Standalone: true

Unified Pro application shell. mode="page" is a marketing/content frame (hamburger push drawer under 991px, optional footer). mode="dashboard" is an admin rail (expanded / mini / mobile at 1080px / 1360px). Project base-shell-sidebar, base-shell-header, base-shell-content, and optional base-shell-footer. Install: npx base-ui-cli add shell. Free-tier alternatives: sidenav, scroll-nav, page-main.

Input	Type	Default	Description
`class`	`string`	`''`	Extra host classes merged via `cn()`.
`mode`	`'page' \| 'dashboard'`	`'page'`	Product mode.
`layout`	`'auto' \| 'mobile' \| 'desktop'`	`'auto'`	Force chrome for demos, or follow breakpoints.
`width`	`number`	`280`	Dashboard expanded rail width (px).
`miniWidth`	`number`	`76`	Dashboard mini rail width (px).
`collapsed`	`boolean`	`false`	Dashboard icons-only rail (two-way bindable).

Output	Type	Description
`collapsedChange`	`boolean`	Emits when dashboard collapsed state changes.

ShellSidebarComponent

Selector: base-shell-sidebar Standalone: true

Sidebar for base-shell. Page mode: off-canvas push panel (side left/right). Dashboard mode: expanded / mini / mobile rail.

Input	Type	Default	Description
`class`	`string`	`''`	Extra host classes merged via `cn()`.
`side`	`'left' \| 'right'`	`'left'`	Edge for page-mode panels.
`width`	`number`	`280`	Panel / expanded rail width (px).

ShellHeaderComponent

Selector: base-shell-header Standalone: true

Top bar for base-shell. Built-in hamburger (page under 991px / dashboard mobile) and optional dashboard collapse toggle.

Input	Type	Default	Description
`class`	`string`	`''`	Extra host classes merged via `cn()`.
`showMenuToggle`	`boolean`	`true`	Show built-in hamburger.
`showCollapseToggle`	`boolean`	`true`	Show dashboard mini↔expanded control.

ShellContentComponent

Selector: base-shell-content Standalone: true

Main content slot for base-shell. Place <router-outlet> here. Page mode scrolls with the parent column; dashboard mode scrolls this host.

Input	Type	Default	Description
`class`	`string`	`''`	Extra host classes merged via `cn()`.

ShellFooterComponent

Selector: base-shell-footer Standalone: true

Optional footer slot for base-shell (typically page mode).

Input	Type	Default	Description
`class`	`string`	`''`	Extra host classes merged via `cn()`.

ShellToggleComponent

Selector: base-shell-toggle Standalone: true

Optional panel toggle for page-mode sidebars (e.g. a right panel). Transparent hamburger (menu / close) matching the header control. Prefer the built-in header hamburger for the primary left nav — do not add a second left toggle.

Input	Type	Default	Description
`class`	`string`	`''`	Extra host classes merged via `cn()`.
`side`	`'left' \| 'right'`	`'left'`	Which panel to toggle.

ShellNavComponent

Selector: base-shell-nav Standalone: true

Navigation list container for shell sidebar items.

Input	Type	Default	Description
`class`	`string`	`''`	Extra host classes merged via `cn()`.

ShellNavItemComponent

Selector: a[base-shell-nav-item], button[base-shell-nav-item], base-shell-nav-item Standalone: true

Nav item with icon + label. In dashboard mini mode the label hides. Clicking closes mobile / page drawers. Pair with routerLink / routerLinkActive.

Input	Type	Default	Description
`class`	`string`	`''`	Extra host classes merged via `cn()`.
`icon`	`string`	`''`	Icon sprite name.

ShellNavSectionComponent

Selector: base-shell-nav-section Standalone: true

Labeled group inside base-shell-nav. The heading fades out with the dashboard mini-rail width; a small gap still separates groups. Project base-shell-nav-item children.

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra host classes merged via `cn()`.
label	`string`	''	Visible section heading. Hidden when the dashboard rail is collapsed.

SidenavComponent

Selector: base-sidenav Standalone: true

Responsive section shell with a left nav rail and scrollable body. Pair with base-sidenav-nav and base-sidenav-body. Free shell (npx base-ui-cli add sidenav).

Input	Type	Default	Description
`class`	`string`	`''`	Extra host classes merged via `cn()`.
`color`	`string`	`undefined`	Color for the mobile nav toggle button.
`layout`	`'auto' \| 'mobile' \| 'desktop'`	`'auto'`	Force mobile/desktop chrome, or follow the viewport `lg` breakpoint.

SidenavNavComponent

Selector: base-sidenav-nav Standalone: true

Left navigation slot for base-sidenav.

Input	Type	Default	Description
`class`	`string`	`''`	Extra host classes merged via `cn()`.

SidenavBodyComponent

Selector: base-sidenav-body Standalone: true

Main content slot for base-sidenav (typically hosts a router outlet).

Input	Type	Default	Description
`class`	`string`	`''`	Extra host classes merged via `cn()`.

ScrollNavItemComponent

Selector: base-scroll-nav-item Standalone: true

A section within a scroll-nav component that is linked to a sidebar item.

No inputs or outputs.

PaginatorComponent

Selector: base-paginator Standalone: true

A pagination control component. Allows users to navigate between pages of data and change the page size.

Inputs:

Name	Type	Default	Description
basePaginator	`boolean`	false	If true, applies a distinct "base" visual variant.
arrows	`boolean`	false	If true, shows explicit previous/next arrow buttons instead of standard pagination.
itemsPerPage	`string \| number \| null`	null	The currently selected number of items per page.
pageSizeOptions	`number[]`	[10, 25, 50, 100]	The available options for "items per page" dropdown.

PPageComponent

Selector: base-p-page Standalone: true

Represents an individual page number button inside a base-paginator.

Inputs:

Name	Type	Default	Description
active	`boolean`	false	Indicates if this page is currently the active/selected page.

StepperComponent

Selector: base-stepper Standalone: true

A multi-step workflow container component. Automatically handles step transitions, active state, and visual progress lines.

Inputs:

Name	Type	Default	Description
activeStepIndex	`number`	0	The zero-based index of the currently active step.
linear	`boolean`	false	If true, the user is restricted from jumping ahead to uncompleted steps.
successTitle	`string`	'All done!'	The title displayed on the success screen after submission.
successMessage	`string`	'Your request has been successfully submitted.'	The message displayed on the success screen after submission.

Outputs:

Name	Emit Type	Description
stepChange	`number`	Emitted whenever the active step index changes.
stepperSubmit	`void`	Emitted when the stepper is submitted on the final step.

StepComponent

Selector: base-step Standalone: true

An individual step within a base-stepper. Contains the label, icon, and template content to render when active.

Inputs:

Name	Type	Default	Description
label	`string`	''	The primary title text for this step.
icon	`string`	''	Optional SVG icon name to display instead of a number.
description	`string`	''	Optional secondary subtitle text for this step.

MegaMenuComponent

Selector: base-mega-menu Standalone: true

Full-width mega menu with a trigger slot and a dropdown panel. Content projected into [mega-menu-trigger] becomes the clickable trigger (wrapped with role="button", toggled by click, Enter, or Space, with aria-haspopup/aria-expanded/aria-controls); default projected content becomes the panel body. The panel renders position: fixed at a fixed 1200px width, horizontally centered in the viewport (minimum 16px from the left edge) and 8px below the trigger, with z-index 9900, a slide-down enter/leave animation, and max-h-[85vh] scrolling. While open it repositions on window scroll/resize, closes on Escape or on clicks outside the trigger/panel, moves focus to the panel's first focusable element on open, and restores focus to the previously focused element (or the trigger) on close; the open listener teardown also runs in ngOnDestroy. The panel has role="navigation" labelled by menuLabel. Uses OnPush change detection with signal-based open state, and merges host classes (inline-block relative) with the class input via cn().

Inputs:

Name	Type	Default	Description
class	`string`	''	Extra classes merged into the host's `inline-block relative` classes via `cn()` (signal input, aliased from `extraClass`).
menuLabel	`string`	'Mega menu'	Accessible name applied to the panel's `role="navigation"` region via `aria-label`.

Media

IconComponent

Selector: base-icon Standalone: true

A highly optimized SVG icon component. By default it pulls SVG definitions from assets/icons.svg using the provided name. Inherits the current text color if not explicitly provided.

Inputs:

Name	Type	Default	Description
name	`string`	''	The SVG id/name of the icon to render (e.g. 'chevron-right').
path	`string`	'assets/icons.svg'	The path to the SVG sprite file.
color	`string`	''	Optional explicit CSS color.
size	`string \| number`	''	The size of the icon in pixels or CSS units.

StarRatingComponent

Selector: base-star-rating Standalone: true

A flexbox container wrapper for base-star components. Aligns stars horizontally with appropriate gap spacing.

No inputs or outputs.

StarComponent

Selector: base-star Standalone: true

A single star in the StarRatingComponent. Handles the SVG rendering for each star segment.

Inputs:

Name	Type	Default	Description
rating	`number`	0	The rating value.
editable	`boolean`	false	Whether the star rating is editable.

Outputs:

Name	Emit Type	Description
ratingChanged	`number`	Emitted when the rating changes (if editable).

GallerySliderComponent

Selector: base-gallery-slider, base-carousel Standalone: true

A highly configurable image/content carousel component. Supports auto-play, touch swiping, and slide/crossfade transitions.

Inputs:

Name	Type	Default	Description
activeIndex	`number`	0	The zero-based index of the currently active slide.
animate	`boolean`	true	Whether transitions are animated.
dark	`boolean`	false	Applies a dark-themed visual overlay/buttons.
direction	`'next' \| 'prev'`	'next'	Defines the transition direction explicitly.
interval	`number`	5000	Milliseconds before auto-advancing to the next slide. 0 to disable.
pause	`'hover' \| false`	'hover'	Whether to pause autoplay on hover.
touch	`boolean`	true	Whether touch swipe navigation is enabled.
transition	`'slide' \| 'crossfade'`	'slide'	The animation transition style.
wrap	`boolean`	true	Whether the carousel loops back to the start at the end.
slides	`string[]`	[]	Optional array of image source URLs for a quick image-only slider.

Outputs:

Name	Emit Type	Description
itemChange	`number`	Emitted whenever the active slide index changes.

CarouselItemComponent

Selector: base-carousel-item Standalone: true

An individual slide item within a gallery slider. Can contain arbitrary content, typically an image and an optional base-carousel-caption.

Inputs:

Name	Type	Default	Description
interval	`number`	-1	Optional override for the auto-play interval when this specific slide is active.

CarouselCaptionComponent

Selector: base-carousel-caption Standalone: true

A caption overlay for a gallery slider or carousel item, typically positioned over the image.

No inputs or outputs.

HorizontalCarouselComponent

Selector: base-horizontal-carousel Standalone: true

A horizontally scrollable container component for presenting multiple items in a row. Includes built-in smooth scrolling, mouse drag-to-scroll, and touch swipe support.

Inputs:

Name	Type	Default	Description
title	`string`	''	Optional title to display above the carousel controls.

No outputs.

FileUploadComponent

Selector: base-file-upload Standalone: true

A highly versatile file upload component supporting buttons, standard inputs, and drag-and-drop zones. Implements ControlValueAccessor — the form value is File[]. disabled (input or setDisabledState) blocks the native picker and dropzone. Do not nest inside base-input-group.

Inputs:

Name	Type	Default	Description
accept	`string`	'/'	The accepted file types.
multiple	`boolean`	false	Whether multiple files can be selected at once.
disabled	`boolean`	false	Disables the file input and drag-and-drop zones.
variant	`'input' \| 'button' \| 'dropzone'`	'input'	The visual presentation style of the uploader.
buttonColor	`'primary' \| 'danger' \| 'success' \| 'warning' \| 'accent' \| ''`	'primary'	Semantic color variant (only applies when variant is 'button').
buttonVariant	`'solid' \| 'stroked'`	'stroked'	Solid or stroked styling (only applies when variant is 'button').
label	`string`	'Choose file'	Text label displayed on the button or input field.

Outputs:

Name	Emit Type	Description
fileSelected	`File[]`	Emitted when files are selected via dialog or drag-and-drop.

CropImageComponent

Selector: base-crop-image Standalone: true

Pro tier. A component for cropping images, typically used for avatars or profile pictures.

Inputs:

Name	Type	Default	Description
imageFile	`File \| undefined`	—	File object from base-file-upload or programmatic use.
imageChangedEvent	`Event \| null`	null	Native file input change event (alternative to imageFile).
maintainAspectRatio	`boolean`	true	Whether to maintain aspect ratio during cropping.
aspectRatio	`number`	1	The aspect ratio (width/height) for the crop box.
hideIfEmpty	`boolean`	true	Whether to hide the component when no image is loaded.
cropperHeight	`string`	'400px'	Height of the crop viewport (CSS value).

Outputs:

Name	Emit Type	Description
cropped	`Blob \| null`	Emitted with the cropped image as a Blob when confirmed.
canceled	`void`	Emitted when the crop is canceled.

ProductGalleryComponent

Selector: base-product-gallery Standalone: true

Pro tier. A highly interactive product gallery component supporting images, videos, thumbnails, and zooming.

Inputs:

Name	Type	Default	Description
items	`{ id?: string \| number; src: string; thumbSrc?: string; alt?: string; type?: 'image' \| 'video' }[]`	[]	The array of media items to display in the gallery.
thumbnailsPosition	`'left' \| 'right' \| 'top' \| 'bottom'`	'left'	Position of the thumbnails strip relative to the main viewer.
showArrows	`boolean`	true	Whether to show previous/next navigation arrows on the main viewer.
objectFit	`'cover' \| 'contain'`	'cover'	CSS object-fit rule for the main image.
zoomOnClick	`boolean`	true	Enables an interactive magnifying zoom effect when clicking the main image.
aspectRatio	`string`	'16/9'	Aspect ratio constraint for the main viewer.
mainViewWidth	`string`	'100%'	Width of the main view container.
mainViewHeight	`string`	'auto'	Height of the main view container.

Outputs:

Name	Emit Type	Description
indexChange	`number`	Emitted whenever the active selected item changes.

Form Blocks

Pre-built, self-contained form flows (login, signup, checkout, billing, wizard, …). Free tier.

FormBillingComponent

Selector: base-form-billing Standalone: true

Pre-built billing/plan form block rendered inside a base-card: three selectable plan cards (Starter $9, Pro $29, Enterprise $99) with a "Popular" badge on Pro, a seat stepper, a promo-code input with Apply button, and a full-width "Upgrade Plan" button. Plan selection and seat count are internal signals (selectedPlan defaults to 'pro', seats defaults to 5, clamped 1–100 with the stepper buttons disabled at the bounds); the displayed monthly total is computed as seats × $29. Uses OnPush change detection and has no inputs or outputs — it is a static showcase composition of CardComponent, InputGroupComponent, LabelComponent, BaseInputDirective, BaseButtonDirective, BadgeComponent, and IconComponent.

FormCartComponent

Selector: base-form-cart Standalone: true

Prebuilt static shopping-cart card block composed of base-card/base-card-body with a "Cart" header showing two overlapping avatar images, two hardcoded product line items (thumbnail, name, quantity with +/- buttons, price), a totals breakdown (subtotal, promo code, tax, total), and "Pay with Card" (base-stroked-button) plus "Checkout" (base-button) action buttons. Purely presentational template with OnPush change detection and an empty class body — all content is hardcoded and the quantity/checkout buttons have no click handlers wired up.

FormCheckoutSummaryComponent

Selector: base-form-checkout-summary Standalone: true

Pre-built checkout confirmation/order summary block composed from base-card, base-card-body, base-icon, base-checkbox, and [base-button]. Renders a "Confirmation" header with three check-circle step icons, a hardcoded item list, shipping/delivery/payment sections (including static native radio buttons for VISA/PayPal selection), an itemized totals breakdown with promo-code discount, a Terms and Conditions base-checkbox, and "Proceed to Checkout" (primary button) plus "Back" actions. All content is static demo copy — the component has no inputs or outputs and no wired-up event handlers; it is a copyable layout template rather than a configurable widget. Uses OnPush change detection.

FormDeleteAccountComponent

Selector: base-form-delete-account Standalone: true

Pre-built "delete account" danger-zone form rendered inside a base-card: a red warning banner with an alert-triangle icon, static consequence bullet points (deleted projects, lost team access, cancelled subscriptions) with links to export data or transfer ownership, a type-to-confirm text input, and a full-width red "Delete Account Permanently" button. The confirmation value is tracked in an internal signal via the input's (input) event, and the delete button stays disabled until the user types exactly DELETE. Uses OnPush change detection; the button performs no action itself (no output is emitted on click), and the displayed counts/links are static demo content.

FormFeedbackComponent

Selector: base-form-feedback Standalone: true

Pre-composed "Feedback" form card built from library primitives: a base-card containing a heading, side-by-side Name and Email inputs, a feedback-type <select> (single "General" option) with a chevron-down end-addon icon, a 5-row Message textarea, and a full-width primary "Send Feedback" button. Purely presentational (OnPush) — it has no inputs, outputs, form bindings, or submit handling; the button performs no action.

FormFilterComponent

Selector: base-form-filter Standalone: true

Self-contained filter/search panel rendered inside a base-card: a search input with a start-addon icon, toggleable status chips, a from/to date range, a sort-by <select> with a chevron end-addon, toggleable tag chips, and Apply Filters / Reset actions. Chip data (statuses, tags) is hardcoded in internal signals and toggled on click; a computed activeCount shows a "Clear all (N)" button only when at least one chip is active, and clearAll() deactivates every chip. Uses OnPush change detection; has no inputs or outputs, so it is a fixed showcase widget rather than a configurable control.

FormLoginComponent

Selector: base-form-login Standalone: true

Prebuilt login form block rendered inside a base-card: email and password base-input-group fields, a "Keep me logged in" base-checkbox with a "Forgot password?" link, a full-width primary "Sign In" base-button, and a "Sign up" footer link. Purely presentational — the template is static markup with no form bindings, no submit handling, and no configurable state; uses OnPush change detection. Composes CardComponent, InputGroupComponent, LabelComponent, BaseInputDirective, CheckboxComponent, and BaseButtonDirective.

FormLoginTabsComponent

Selector: base-form-login-tabs Standalone: true

Prebuilt authentication block: a base-card containing an underline-style base-tabs with two tabs — "Sign Up" (name, lastname, phone, email, password, confirm-password inputs, a Terms and Conditions checkbox, and a primary Sign Up button) and "Login" (login and password inputs with an eye-icon addon button, a "Remember me" checkbox, a "Forgot password?" link, and a full-width primary Sign In button). Both tabs end with a row of stroked icon buttons for facebook, linkedin, and x-twitter social sign-in. Purely presentational static markup with OnPush change detection — no form bindings, no configurable inputs, and no outputs; composed from Card, Tabs, InputGroup, Label, Checkbox, Icon, and the button/input/link/addon directives.

FormNewsletterComponent

Selector: base-form-newsletter Standalone: true

Pre-built newsletter signup card: a base-card containing a centered email icon in a rounded tile, a "Subscribe to Our Weekly Newsletter" heading, a "no spam" tagline, a base-input-group with a center-aligned email text input, and a full-width primary Subscribe button. All copy is hardcoded and the component has no logic — the input is not bound to any form model and the button emits no events, so it serves as a static template/starting point rather than a functional form. Uses ChangeDetectionStrategy.OnPush.

FormNotificationsComponent

Selector: base-form-notifications Standalone: true

Prebuilt notification-settings card widget. Renders a base-card with a "Notifications" header, two toggle sections ("Activity notifications" and "Marketing", each row pairing a label with a base-toggle), and an "Add more contacts" panel containing name/email base-input-group fields (the email field shows a green check-circle icon via base-addon-end), a radio option, and Add (base-button color="primary") / Cancel (base-stroked-button) buttons. Purely presentational: it has no inputs, outputs, or component state — toggle/input values are not bound or emitted, so consumers must copy or wrap the template to wire up real behavior. Uses ChangeDetectionStrategy.OnPush.

FormPaymentComponent

Selector: base-form-payment Standalone: true

Prebuilt static payment form section: a base-card with a "Payment Info" header showing a 3-step progress indicator (two check-circle icons and a numbered dot), payment-method selector buttons (VISA active, PayPal dimmed), and inputs for cardholder name, card number, expiry date, and CVV via base-input-group/base-label/base-input. Footer holds a stroked "Back" button (with arrow-left icon) and a primary "Pay Now" button. Purely presentational template with no bound state, form logic, or validation — composes CardComponent, CardBodyComponent, InputGroupComponent, LabelComponent, BaseInputDirective, IconComponent, BaseButtonDirective, and StrokedButtonDirective; uses OnPush change detection.

FormProfileSettingsComponent

Selector: base-form-profile-settings Standalone: true

Prebuilt profile-settings form block rendered inside a base-card: a cover-image header with an overlaid title, avatar, and round icon-button actions (edit, delete, user, more), followed by a card body with two-column text inputs (first/last name, phone, email with a green check-circle end addon, zipcode, area), country/state <select> fields styled via base-input with chevron end addons, a bio textarea, and full-width Save (primary) / Cancel buttons. Entirely static template with hard-coded sample values (no Angular Forms wiring, no configurable state); uses OnPush change detection.

FormReviewComponent

Selector: base-form-review Standalone: true

Pre-composed "Write a Review" form card. Renders a base-card containing a header row with title and a close-icon button, a hardcoded product summary (watch image and name), a read-only star rating display (base-star-rating with a single base-star fixed at rating 4), a Title text input, a Review textarea, and a full-width primary "Write a Review" submit button. The component class is empty — it has no inputs, outputs, or form wiring; all content is static template markup (uses OnPush change detection), so it serves as a copyable layout block rather than a configurable widget.

FormShippingComponent

Selector: base-form-shipping Standalone: true

Prebuilt shipping-information form block rendered inside a base-card. The card header shows a "Shipping Info" title with a 3-step progress indicator (check icon, current step "2", x icon); the body contains two delivery-method toggle buttons (Free Delivery / Express Delivery), base-input-group fields for street address, first/last name, phone, email, and zipcode, native <select> dropdowns (with base-addon-end chevron icons) for country/state/city, an "Area" textarea, and Back / Next Step stroked buttons. All content is static demo markup — the component class is empty, with no inputs, outputs, form bindings, or event handlers; uses OnPush change detection.

FormSignupComponent

Selector: base-form-signup Standalone: true

Pre-built static sign-up form rendered inside a base-card: side-by-side First Name / Last Name inputs, Email and Password fields (each a base-input-group with base-label and base-input), a full-width primary base-button "Sign Up" button, and an "Already have an account? Log in" footer link. Purely presentational with OnPush change detection — no inputs, outputs, form bindings, or submit handling; the fields are plain uncontrolled native inputs and the button has no click handler.

FormSignupTabsComponent

Selector: base-form-signup-tabs Standalone: true

Pre-built signup/login form block: a base-card containing underline-style base-tabs with two tabs — "Sign Up" (name, lastname, phone, email, password and confirm-password inputs with eye-icon end addons, a Terms and Conditions checkbox, a primary Sign Up button, and Facebook/LinkedIn/X social sign-in icon buttons) and "Login" (login/password inputs, "Remember me" checkbox, "Forgot password?" link, full-width Sign In button, and the same social buttons). The template is purely static markup composed from library components (Card, Tabs, InputGroup, Label, Checkbox, Button/IconButton directives, Icon) — no form model, validation, or event wiring is included, so consumers copy or wrap it to add real form logic. Uses OnPush change detection.

FormSuccessMessageComponent

Selector: base-form-success-message Standalone: true

Pre-built order-confirmation success card (OnPush). Renders a base-card containing a large circled green check icon, a "Congratulations! Your order is accepted." message, a two-column summary strip (order number and delivery date), a primary "Track Your Order" button, and a "Back to home" text link. All content is hardcoded — there are no inputs or outputs; it is a static template block intended to be copied/customized rather than configured. Composes CardComponent, IconComponent, and BaseButtonDirective.

FormTeamInviteComponent

Selector: base-form-team-invite Standalone: true

Pre-composed "Invite Team Members" form block rendered inside a base-card: an email input paired with a role <select> (Admin/Member/Viewer, with a chevron-down icon via base-addon-end), a full-width primary "Send Invitation" button, and a static "Pending Invitations" list showing initial-avatar rows with status badges (Pending/Accepted/Expired). Purely presentational with hardcoded demo content — no inputs, outputs, form bindings, or injected services; uses OnPush change detection.

FormWizardComponent

Selector: base-form-wizard Standalone: true

Self-contained three-step account signup wizard rendered inside a base-card, with a progress stepper (completed steps show a check icon, the active step is highlighted), an account-details form step, a plan-selection step (Starter/Pro cards with a "Popular" badge), and a confirmation summary step with a terms base-checkbox. Navigation is driven by internal signals (currentStep, selectedPlan) via Back/Continue buttons; step labels and form content are hardcoded, and the component exposes no inputs or outputs. Uses OnPush change detection and composes CardComponent, InputGroupComponent, LabelComponent, BaseInputDirective, BaseButtonDirective, BadgeComponent, IconComponent, and CheckboxComponent.

Blog Cards

Editorial blog/article card variants. Pro tier — requires a license (BASE_UI_LICENSE_KEY).

BlogCardCenteredHeroComponent

Selector: base-blog-card-centered-hero Standalone: true

Static blog-post card with a centered hero layout, composed from base-card, base-card-body, and base-card-footer. The body centers a category eyebrow label, title, and excerpt; the footer shows an author base-avatar with name on the left and calendar/comment-count base-icon metadata on the right (the date hides below the sm breakpoint). All text, avatar, and metadata content is hardcoded in the template — there are no inputs or outputs; the card uses OnPush change detection and has hover lift/shadow styling with dark-mode classes.

BlogCardCollageComponent

Selector: base-blog-card-collage Standalone: true

Pre-composed blog post card with a two-image collage header, a category eyebrow label ("Feature"), a title, and a footer showing an author avatar/name plus date and comment-count icon stats. All content (images, text, avatar URL, stats) is hard-coded in the template — this is a static pro-tier showcase block with no configurable API. Built by composing base-card, base-card-body, base-card-footer, base-avatar, and base-icon; uses OnPush change detection, lazy-loaded images, and hover effects (card lift, shadow, image zoom).

BlogCardCompactComponent

Selector: base-blog-card-compact Standalone: true

Compact blog-post card block (pro tier) composed from base-card, base-card-body, base-card-footer, base-avatar, and base-icon. Renders a lazy-loaded cover image that zooms on hover (with card lift/shadow), a category label, a title, and a footer row with author avatar/name plus calendar-date and comment-count icon groups. All content (image, category, title, author, date, comment count) is hardcoded in the template — the component has no inputs or outputs and uses OnPush change detection.

BlogCardFloatingPanelComponent

Selector: base-blog-card-floating-panel Standalone: true

Preset blog-post card rendering a full-height cover image with a frosted-glass (backdrop-blur) panel floating over its bottom edge; the panel shows a category eyebrow, post title, and a footer with author avatar/name plus calendar-date and comment-count icon stats. Hovering lifts the card, deepens the shadow, and zooms the image. All content (image, text, avatar URL, icons) is hardcoded — the component has no inputs or outputs — and it composes CardComponent, CardBodyComponent, CardFooterComponent, AvatarComponent, and IconComponent with OnPush change detection.

BlogCardGradientHeroComponent

Selector: base-blog-card-gradient-hero Standalone: true

Pre-composed blog hero card (pro tier) built from base-card, base-card-body, base-card-footer, base-avatar, and base-icon. Renders a full-bleed background image with a bottom-anchored dark gradient overlay containing a category eyebrow, headline, and a footer row with author avatar/name plus date and comment-count icons; on hover the card lifts and the image zooms. All content (image, text, author, date, comment count) is hard-coded in the template — there are no inputs or outputs, and the component uses OnPush change detection.

BlogCardHorizontalFeatureComponent

Selector: base-blog-card-horizontal-feature Standalone: true

Static horizontal featured blog card composed from base-card, base-card-body, base-card-footer, base-avatar, and base-icon. Renders a wide cover image (left 3/5 on lg screens, stacked above the text on smaller viewports) beside an eyebrow label, headline, excerpt, and a footer with author avatar/name plus calendar-date and comment-count metadata (date hidden below sm). All content (image, text, avatar URL, date, counts) is hardcoded in the template — the component has no inputs or outputs; hover applies a lift/shadow on the card and a slow zoom on the image, and it uses OnPush change detection.

BlogCardImageTopComponent

Selector: base-blog-card-image-top Standalone: true

Pre-composed blog/article preview card with a top cover image, built from base-card, base-card-body, base-card-footer, base-avatar, and base-icon. Renders a lazy-loaded cover image that zooms on hover (with card lift and shadow), a category label, an article title, and a footer with author avatar/name plus calendar-date and comment-count icon stats. All content (image, category, title, author, date, comment count) is hard-coded in the template — there are no inputs or outputs; it serves as a static pro-tier block meant to be copied and customized. Uses ChangeDetectionStrategy.OnPush.

BlogCardInlineImageComponent

Selector: base-blog-card-inline-image Standalone: true

Blog post card with the article image inset between the title block and the footer (title above, full-width 180px cover image in the middle, meta footer below). Composes base-card, base-card-body, base-card-footer, base-avatar, and base-icon; hover applies a lift, shadow, and a slow image zoom. All content is hard-coded in the template (a "Latest" tag, title, assets/images/office.jpeg image, author avatar/name, calendar date, and comment count) — it is a copy-and-adapt pro-tier template with no configurable API. Uses OnPush change detection.

BlogCardMiniGridComponent

Selector: base-blog-card-mini-grid Standalone: true

Compact blog-list card built on base-card/base-card-body, rendering four hardcoded mini blog entries (64px square thumbnail plus bold title) in a responsive grid — single column on small screens, 2x2 on lg. Content is entirely static (no inputs): image paths and titles are baked into the template, images are lazy-loaded, and each item shows a hover effect (image zoom, title tint to indigo) via group/item. Uses OnPush change detection.

BlogCardNewsletterComponent

Selector: base-blog-card-newsletter Standalone: true

Static newsletter signup promo card styled as an indigo gradient panel, composed from base-card, base-card-body, and base-card-footer with a large decorative base-icon ("mail") watermark. Renders a fixed "Join the Club" heading and tagline, a plain email <input>, and a "Subscribe Now" button — none of which are wired to Angular forms, bindings, or events; consumers must attach their own submit handling. Uses OnPush change detection and has no configurable API.

BlogCardOverlayFeaturedComponent

Selector: base-blog-card-overlay-featured Standalone: true

Featured blog card with a full-bleed background image and a left-side gradient overlay panel (dark slate to transparent) containing an eyebrow label, large title, and excerpt, plus a footer row with author avatar, name, and a publish date (date hidden below the sm breakpoint). Composed from base-card, base-card-body, base-card-footer, base-avatar, and base-icon; on hover the card lifts with a shadow and the image scales up. All content (image, text, avatar URL, date) is hardcoded in the template — the component has no inputs or outputs and uses OnPush change detection, so it serves as a copy-and-customize pro-tier template.

BlogCardOverlayMarketingComponent

Selector: base-blog-card-overlay-marketing Standalone: true

Pre-styled marketing blog card with a full-bleed cover image and a bottom-anchored text overlay on a dark gradient. Renders a hardcoded category label ("Marketing"), title, author avatar/name, date, and comment count — all content is static in the template (no inputs). Composes base-card, base-card-body, base-card-footer, base-avatar, and base-icon, with hover effects (lift, shadow, image zoom) and OnPush change detection; the date/calendar segment is hidden below the sm breakpoint.

BlogCardQuoteComponent

Selector: base-blog-card-quote Standalone: true

Pre-styled blog quote card with fully static content: an orange-tinted base-card (left orange accent border, light/dark variants) containing a large serif italic pull-quote, a decorative rotated quotation-mark SVG watermark, and a footer with a base-avatar plus hardcoded author role/name attribution. Composes CardComponent, CardBodyComponent, CardFooterComponent, and AvatarComponent; uses OnPush change detection. Has no inputs or outputs — the quote text, avatar URL, and attribution are hardcoded in the template, and hover applies a lift/shadow transition.

BlogCardSplitImageComponent

Selector: base-blog-card-split-image Standalone: true

Pre-composed blog post card with a split two-image header: two side-by-side cover images (each 50% width) above a category label, title, and a footer with author avatar/name plus date and comment-count icon stats. Built from base-card, base-card-body, base-card-footer, base-avatar, and base-icon; on hover the card lifts with a shadow and both images zoom slightly. All content (images, category, title, author, date, comment count) is hard-coded in the template — the component exposes no inputs or outputs, so customization requires copying the template. Uses OnPush change detection.

BlogCardStatsComponent

Selector: base-blog-card-stats Standalone: true

Preset statistic blog card built from base-card, base-card-body, and base-card-footer. Renders a large hardcoded stat number ("837") with a caption, and a footer row of three overlapping base-avatar circles (hardcoded pravatar.cc image URLs) that spread apart on hover. Fully static — all content is baked into the template with no inputs, outputs, or content projection; uses OnPush change detection and includes hover lift/shadow styling with light/dark theme classes.

BlogCardVideoComponent

Selector: base-blog-card-video Standalone: true

Static video-teaser blog card built on base-card/base-card-body: a full-bleed cover image (hardcoded to assets/images/modern_office_architecture_1776362675453.png) under a dark overlay with a centered frosted-glass "Play Video" pill containing a play-circle icon. On hover the card lifts with a larger shadow, the image scales up, and the overlay fades out. Uses OnPush change detection; it has no inputs or outputs, so the image, label, and click handling cannot be configured — consumers must bind their own click listener on the host.

Article Cards

Long-form article presentation blocks. Pro tier — requires a license.

ArticleCardEditorialComponent

Selector: base-article-card-editorial Standalone: true

Editorial-style article card with fully hard-coded demo content, composed from base-card/base-card-body. Renders a timestamp header with share/more icon buttons, a headline, lead paragraph, a base-quote pull quote with author attribution, a lazy-loaded hero image with photo credit and carousel-dot indicators, an author byline row (base-avatar + name) with Facebook/X/LinkedIn share icons, and a comments footer with a count and an outline "View comments" button. Uses OnPush change detection; it has no inputs or outputs, so it serves as a copyable layout template rather than a configurable component.

ArticleCardFullReaderComponent

Selector: base-article-card-full-reader Standalone: true

Full article reading experience rendered inside a base-card: byline header with prev/more icon buttons, centered title, view/comment/share stats, hero image with caption, numbered content sections (one with a side-by-side image layout), an avatar-left base-quote block, an author/share footer with social icons, a 3-column "Related News" grid, a threaded comments list (including a highlighted reply), and a comment composer (base-textarea with an attach icon button and a full-width "Post Comment" button). All content is hardcoded demo copy — the component has no inputs or outputs and uses OnPush change detection. Composes CardComponent, CardBodyComponent, QuoteComponent, AvatarComponent, IconComponent, InputGroupComponent, and the base-button / base-icon-button / base-textarea directives.

ArticleCardHeroGalleryComponent

Selector: base-article-card-hero-gallery Standalone: true

Static, pre-composed article card (pro tier) with a full-width hero image section and a mini image gallery. The hero area layers a dark overlay over the image and shows an "Explore" label, share/more icon buttons, date, title, and author avatar; the card body renders a lead paragraph, a base-quote (icon-top variant), a 3-image gallery grid with a hover zoom overlay on the middle image, a bullet list section, tag badges, a views/share row, and a comments footer with an "Add Comment" button. All content (text, images, counts) is hardcoded in the template — the component has no inputs or outputs and uses OnPush change detection; it composes CardComponent, CardBodyComponent, IconButtonDirective, IconComponent, QuoteComponent, AvatarComponent, BaseButtonDirective, and BadgeComponent.

ArticleCardHeroTagsComponent

Selector: base-article-card-hero-tags Standalone: true

Pre-composed article/blog-post card with a full-bleed hero image header (dark overlay, back/share/more icon buttons, date, title, and view count rendered over the image). The body contains static article copy with an inline image split, a tag row of base-badge chips, a share bar with social icons, and a comments section featuring a text comment, a mock voice-note comment with a play button and audio-waveform bars, and a "Login to add comment" footer. All content is hardcoded (no inputs/outputs); uses OnPush change detection and composes base-card, base-card-body, base-icon, base-avatar, base-badge, and the base-button/base-icon-button directives.

Ecommerce Blocks

Storefront sections (hero banners, product detail, promos). Pro tier — requires a license.

EcommerceBlockDualPromoComponent

Selector: base-ecommerce-block-dual-promo Standalone: true

Static two-column promo row (stacking to one column below lg): a product spotlight card with a "Just In" base-badge, product title, price, image, and a primary "Shop Now" button, alongside a full-bleed image sale banner with a dark overlay, headline, and a white "Shop Sale" button. The banner image zooms slightly on hover. All content (copy, prices, /assets/demo/ images) is hardcoded in the template — the component has no configurable API. Uses OnPush change detection; composes BadgeComponent and BaseButtonDirective.

EcommerceBlockHeroBannerComponent

Selector: base-ecommerce-block-hero-banner Standalone: true

Full-width ecommerce hero banner block with a fixed-height (600px) rounded background image, a dark overlay, and centered content: a heading, a subtitle, and a pill-shaped "Explore Now" CTA rendered with [base-button] (color="primary"). All content is hardcoded (including the background image at /assets/demo/drone.png) — the component exposes no inputs, outputs, or content projection. Uses OnPush change detection.

EcommerceBlockLifestyleGridComponent

Selector: base-ecommerce-block-lifestyle-grid Standalone: true

Static, presentational ecommerce lifestyle grid block with hardcoded demo content: a large hero image tile ("Denim Collection") with a gradient overlay and a "Shop Collection" button (via BaseButtonDirective), a featured product card (portable speaker with name and price), and a stacked column of two smaller cards (a wireless headphones product card and an "Accessories" lifestyle image tile). Responsive layout goes from a single column to 2 columns at md and 4 columns at lg, with hover scale/shadow transitions on each tile; uses OnPush change detection. Images are loaded lazily from /assets/demo/, and all content is fixed in the template — the component has no inputs, outputs, or content projection.

EcommerceBlockProductDetailComponent

Selector: base-ecommerce-block-product-detail Standalone: true

Pre-built (pro tier) horizontal product detail block: a two-column card with product info on the left and a full-bleed product image on the right. Renders a fixed 4.5-star rating (base-star) with review count, hardcoded product title/price/description, a size selector built from base-radio-group/base-radio-button, color swatch buttons, a quantity base-input-spinner (min 1, max 10), an "Add to Bag" base-button, and a heart base-icon-button wishlist action. All content is static demo copy — the component has no configurable API; uses OnPush change detection.

EcommerceBlockProductTabsComponent

Selector: base-ecommerce-block-product-tabs Standalone: true

Static pro-tier ecommerce block rendering a split product detail layout: a large product image panel on the left and, on the right, the product name, price with an "In Stock" tonal success badge, and an underline-type base-tabs group with three tabs — Overview (description plus a check-icon feature list), Specifications (label/value spec rows), and Reviews (a base-star 4.8 rating and a quoted review). Below the tabs it renders a full-width primary "Add to Cart" button and "Share" / "Ask a question" link buttons. All content (copy, price, rating, image) is hardcoded in the template; the component class is empty with ChangeDetectionStrategy.OnPush and composes BadgeComponent, IconComponent, StarComponent, the tabs family, and the base-button/base-link directives.

EcommerceBlockSplitBannerComponent

Selector: base-ecommerce-block-split-banner Standalone: true

Split ecommerce banner block with marketing copy on one side and a product image on the other, arranged in a responsive two-column grid (stacked on small screens) inside a rounded container. The copy side renders a "Limited Edition" base-badge, product heading, description, price, and a rounded "Shop Now" base-button; the image side shows a lazily loaded demo speaker image (/assets/demo/speaker.png). All content is hardcoded — the component has no inputs, outputs, or projected content, and uses OnPush change detection.

Media Widgets

Audio/video players, playlists and media cards. Pro tier — requires a license.

MediaWidgetAlbumCarouselComponent

Selector: base-media-widget-album-carousel Standalone: true

Pre-built media widget (pro tier) rendering a base-card containing a base-horizontal-carousel titled "Albums" with eight hard-coded album items. Each item shows a lazy-loaded square cover image with hover effects (lift, image zoom, dark blurred overlay revealing Play and Bookmark base-icon-buttons), album title, artist name, and a base-star-rating/base-star rating with a base-tooltip showing the numeric value. Uses OnPush change detection; entirely static content with no configurable API — customize by copying the template.

MediaWidgetAlbumPlayerComponent

Selector: base-media-widget-album-player Standalone: true

Static album-player media widget rendered inside a base-card: a cover-image panel with share/bookmark/download icon buttons and an album info overlay (artist, title, stats), beside a scrollable track list where the active track shows animated equalizer bars, plus a footer bar with previous/pause/next icon buttons and a mock volume slider (hidden below the sm breakpoint). All content (image, artist, tracks, durations) is hardcoded in the template — the component has no inputs, outputs, or state, uses OnPush change detection, and composes CardComponent, IconButtonDirective, and IconComponent. The playback controls and track rows are visual only; clicking them triggers no behavior.

MediaWidgetAudioPlayerCompactComponent

Selector: base-media-widget-audio-player-compact Standalone: true

Compact audio-player media widget rendered inside a base-card: a round stroked pause icon-button, hard-coded track title/artist ("Hold On, We're Going Home" / "Drake"), a "more" icon-button, a decorative static waveform made of bars, elapsed/total time labels, like and play-count stats, and a hover-revealed volume slider mock. Entirely presentational with all content hard-coded — no inputs, outputs, or playback logic; uses OnPush change detection and composes CardComponent, IconButtonDirective, IconStrokedButtonDirective, and IconComponent from the library.

MediaWidgetAudioPlayerDarkComponent

Selector: base-media-widget-audio-player-dark Standalone: true

Static dark-themed audio player widget rendered inside a base-card with a forced bg-slate-900! background (always dark regardless of theme). Displays hardcoded demo content: a "Radio NRJ 104.2" station header with a "more" icon button, a round stroked pause button, track title/artist ("Freedom" — Pharrell Williams), a decorative six-bar equalizer visualization, a listener count line, and a purely visual volume slider whose thumb appears on hover. Uses OnPush change detection; purely presentational — no inputs, outputs, or playback logic.

MediaWidgetAudioPlayerHeroComponent

Selector: base-media-widget-audio-player-hero Standalone: true

Full-height hero audio player card (pro tier) built on base-card. Renders a cover image with a dark gradient overlay containing a bookmark icon button, a genre badge, and the track title/artist, above a control panel with a static progress bar (hardcoded times and 1/3 progress) and shuffle/backward/play/forward/refresh icon buttons. Purely presentational: all content (image, track metadata, times) is hardcoded, the control buttons have aria-labels but no click handlers, and the component uses OnPush change detection with no state.

MediaWidgetPlaylistComponent

Selector: base-media-widget-playlist Standalone: true

Static (display-only) music playlist widget rendered inside a base-card: a "Playlist" header with a more-options icon button, a transport bar with backward/pause/forward icon buttons and a decorative hover-reveal volume slider (shown only at sm–lg and xl+ breakpoints), and a vertically scrollable list of ten hard-coded demo tracks, each with a play/pause icon button, artist/title text, and duration — one track is styled as active. Uses OnPush change detection and composes CardComponent, IconButtonDirective, and IconComponent; all content is fixed in the template, so the component has no inputs, outputs, or interactive logic beyond the static markup.

MediaWidgetRelatedVideosComponent

Selector: base-media-widget-related-videos Standalone: true

Static "Related Videos" showcase widget rendered inside a base-card: a header row with a "Related Videos" title and a transparent base-icon-button ("More"), above a vertically scrollable list of seven hardcoded video entries. Each entry shows a lazy-loaded thumbnail with a hover play-icon overlay and duration badge, a two-line clamped title, and views/age metadata, with hover scale/shadow/color transitions and full light/dark styling. Uses OnPush change detection; it has no inputs or outputs — all content (titles, durations, assets/images/gallery/slide-*.png thumbnails) is fixed demo data.

MediaWidgetTopSinglesComponent

Selector: base-media-widget-top-singles Standalone: true

Music chart card ("Top Singles") built on base-card, with a header row containing a "More" icon button, a Week/Month/Year tab strip (static, non-interactive — "Week" is styled as selected), and a hardcoded ranked list of 5 tracks showing rank number, cover image, title/artist, and an up/down/steady trend icon. Uses ChangeDetectionStrategy.OnPush; all content is static demo data (no inputs, outputs, or injected services) — track images load from assets/images/gallery/. Fully styled for light and dark mode.

MediaWidgetVideoHeroComponent

Selector: base-media-widget-video-hero Standalone: true

Pro-tier showcase widget rendering a static video-player hero inside a base-card with a 16:9 (aspect-video) frame. Shows a cover image with a centered play button that fades out on hover, while hover reveals a top overlay (avatar, title, share/info icon buttons) and a bottom control bar (backward/pause/forward transport buttons, timestamps, a decorative progress bar with hover scrubber thumb, a volume slider hidden below md, a quality base-select, and a maximize button). Purely presentational with hardcoded demo content — no inputs, outputs, or playback logic; composes CardComponent, IconButtonDirective, IconStrokedButtonDirective, IconComponent, AvatarComponent, and SelectComponent, and uses OnPush change detection.

MediaWidgetVideoPostComponent

Selector: base-media-widget-video-post Standalone: true

Pre-composed social video post card (pro tier) built on base-card, using OnPush change detection. Renders a hardcoded demo layout: a 21/10 cover image (loaded from assets/images/gallery/slide-3.png, with the avatar from assets/images/avatar2.jpeg) with gradient overlay, author avatar/name/follower count, a white "Follow" stroked button, a centered play icon button that fades out on hover, a faux red playback progress bar, hover-revealed duration and volume/settings/maximize control icons, followed by a date, title, clamped description, and a footer with likes/views/comments counters plus share/link/flag icon buttons. All content is static — the component class is empty with no inputs or outputs; customization requires editing the template or overriding classes.

Social feed, profile, chat and engagement blocks. Pro tier — requires a license.

SocialWidgetActivityComponent

Selector: base-social-widget-activity Standalone: true

Static, presentational social activity feed widget built on base-card with OnPush change detection. Renders a card header with an "Activity" title and a "Mark all read" button (visual only — no click handler is wired), followed by three hardcoded activity entries (a like, a comment with a quoted reply bubble, and a new follower), each with a colored circular base-icon bubble (heart, message, user-plus) joined by a dashed vertical timeline and an uppercase relative timestamp. All content is fixed in the template; there is no data binding, so it serves as a demo/showcase widget rather than a configurable component.

SocialWidgetArticleCommentsComponent

Selector: base-social-widget-article-comments Standalone: true

Static social-feed article card with a comment thread, composed from base-card, base-avatar, base-icon, base-icon-button, and base-button. Renders a hardcoded publisher header, article title/excerpt with hero image, an engagement row (overlapping liker avatars, like/comment/share counts), Like and Comment action buttons, two sample comments (the second indented as a reply), and a "Write a comment..." input with star and plus-circle icon buttons. Uses OnPush change detection; all content is placeholder copy with no inputs, outputs, or interactive logic — customize by editing the template.

SocialWidgetCalendarComponent

Selector: base-social-widget-calendar Standalone: true

Pro-tier social widget that renders the library's CalendarComponent (<base-calendar>) horizontally centered via mx-auto. A thin presentational wrapper with OnPush change detection; it exposes no configuration of its own — all calendar behavior comes from the embedded base-calendar.

SocialWidgetChatComponent

Selector: base-social-widget-chat Standalone: true

Static, fixed-height (540px) one-to-one chat conversation mockup rendered inside a base-card. Shows a header with the contact's avatar, green online-status dot, back and "more" buttons; a scrollable message thread with a "Today" date separator, incoming text and image bubbles, an outgoing bubble with timestamp and read-receipt check icon; and a composer footer with a text input plus attach, star, and send buttons. All content is hardcoded placeholder data — the component has no inputs, outputs, or interactive logic (buttons and input are visual only), and uses OnPush change detection. Composes CardComponent, AvatarComponent, IconComponent, and IconButtonDirective.

SocialWidgetFeedPostComponent

Selector: base-social-widget-feed-post Standalone: true

Pre-built social feed post widget: a base-card with a header row (avatar, author name, timestamp, and a "more" icon button), a fixed-height cover image, and a footer action bar with like, comment, and share buttons showing hardcoded counts. All content (avatar URL, name, image, counts) is static — the component has no inputs or outputs and uses OnPush change detection. Composes CardComponent, AvatarComponent, IconComponent, and IconButtonDirective; the action buttons apply hover color transitions but emit no events.

SocialWidgetFollowSuggestionsComponent

Selector: base-social-widget-follow-suggestions Standalone: true

Static "Who to follow" social suggestion card built from base-card, base-card-header, and base-card-body, with a "View All" text button in the header. Renders three hardcoded suggestion rows, each with a small circular base-avatar, name, @handle, and a Follow (base-stroked-button) or Following (base-button color="primary") action button. Uses OnPush change detection; all user data is hardcoded in the template and no click handlers are wired — it is a presentational demo widget with no configurable API.

SocialWidgetImageCaptionComponent

Selector: base-social-widget-image-caption Standalone: true

Social-media style image card (pro tier) rendering a fixed-height (h-80) base-card with a full-bleed background photo and gradient overlays. The top overlay shows a base-avatar with a username and a "more" icon button (base-icon-button with the more-horisontal icon); the bottom overlay shows a caption headline, a location row with a map-pin icon, and a heart icon with a like count. All content (image path, avatar URL, texts, counts) is hardcoded in the template — the component is a static showcase block with OnPush change detection and no configurable API.

SocialWidgetImageOverlayComponent

Selector: base-social-widget-image-overlay Standalone: true

Social media post card with a full-bleed background image and gradient overlays (fixed height h-80, OnPush). The top overlay shows a hardcoded author avatar (base-avatar), name ("Philip Drake"), and a "more-horisontal" stroked icon button; the bottom overlay shows hardcoded like (2.6k) and comment (384) counts with heart/message icons. All content is static — the component has no configurable API and composes CardComponent, AvatarComponent, IconComponent, and IconStrokedButtonDirective from the library.

SocialWidgetInboxComponent

Selector: base-social-widget-inbox Standalone: true

Compact inbox/message-list card: a header with an "Inbox" title, unread-count base-badge, and a search icon button, above a divided list of three conversation rows (avatar with online dot, sender name, one-line message preview, timestamp). The first row is styled as unread/active with a blue left border and tinted background. All conversations are hardcoded demo content — no inputs or outputs; OnPush change detection; composes base-card, base-card-header, base-card-body, base-avatar, base-badge, base-icon, and base-icon-button.

SocialWidgetPlatformStatsComponent

Selector: `base-social-widget-platform-stats$ \text{Standalone}: \text{true}

2 \times 2 \text{grid} \text{of} \text{social}-\text{platform} \text{stat} \text{tiles} (\text{Facebook} \text{likes}, \text{X}/\text{Twitter} \text{followers}, \text{Instagram} \text{tags}, \text{video} \text{subs}), \text{each} \text{a} $base-cardwith a platformbase-icon`, a large count, and an uppercase label, with hover lift/shadow effects. All four tiles are hardcoded demo content — no inputs or outputs; OnPush change detection.

SocialWidgetProfileCenteredComponent

Selector: base-social-widget-profile-centered Standalone: true

Centered profile card: gradient cover strip with a settings icon button, an overlapping circular base-avatar, name, @handle, an italic bio quote, and a 3-column Posts/Followers/Following stats row divided by hairlines. All profile content is hardcoded demo copy — no inputs or outputs; OnPush change detection; composes base-card, base-card-body, base-avatar, and base-icon.

SocialWidgetProfileCoverComponent

Selector: base-social-widget-profile-cover Standalone: true

Profile card with a photo cover: a 160px lazy-loaded cover image (hover zoom, dark gradient overlay) with the avatar, name, and role overlaid bottom-left; below it a 3-column Photos/Followers/Following stats row, "Send Message" (base-button primary) and "Follow" (base-stroked-button) actions, and a footer with a location pin and X/Instagram/link social icons. All content is hardcoded demo copy — no inputs or outputs; OnPush change detection. Note: the cover references assets/images/breathtaking_nature_mountain_*.png, which ships with the demo app, not the icon sprites — swap in your own image.

SocialWidgetSettingsMenuComponent

Selector: base-social-widget-settings-menu Standalone: true

Account/settings menu card: a blue gradient header with avatar, name, plan label and an "Upgrade to Pro" base-stroked-button, followed by a divided menu of three rows (Account Settings, Notifications with an unread dot, Privacy) each with a tinted icon bubble, title, subtitle, and chevron, and a "Log Out Everywhere" footer action. All content is hardcoded demo copy — no inputs or outputs; OnPush change detection; composes base-card, base-avatar, base-icon, and base-stroked-button.

SocialWidgetTextPostComponent

Selector: base-social-widget-text-post Standalone: true

Text-only social post card: author header (avatar, name, @handle · time, more icon button), a short text body, and a footer bar with reply/repost/like buttons and counts. All post content is hardcoded demo copy — no inputs or outputs; OnPush change detection; composes base-card, base-card-body, base-card-footer, base-avatar, base-icon, and base-icon-button.

SocialWidgetTrendingTopicsComponent

Selector: base-social-widget-trending-topics Standalone: true

"Trending Topics" card with a wrap of hashtag pill chips (#photography, #uiux, #angular highlighted in blue, #frontend, #webdesign) with hover states. All chips are hardcoded demo content — no inputs or outputs; OnPush change detection; composes base-card.

SocialWidgetUploadDropzoneComponent

Selector: base-social-widget-upload-dropzone Standalone: true

Thin preset wrapper around base-file-upload configured as a multi-file dropzone ("Drop files here to upload"). It exposes no inputs or outputs of its own — use FileUploadComponent directly for events and configuration; this block exists as a copy-ready showcase variant. OnPush change detection.

Utilities

SpinnerComponent

Selector: base-spinner Standalone: true

A standard circular loading spinner component. Uses CSS animations for a smooth spinning effect.

Inputs:

Name	Type	Default	Description
size	`'sm' \| 'md' \| 'lg' \| 'xl'`	'md'	The diameter/thickness of the loading spinner.
color	`'primary' \| 'success' \| 'danger' \| 'warning' \| 'accent' \| 'inverted'`	'primary'	The semantic color variant. Use 'inverted' for white spinners on dark backgrounds.

SpinnerWrapperComponent

Selector: base-spinner-wrapper Standalone: true

A wrapper to center a spinner within a block or the entire page. Provides a backdrop that can be dark or light.

Inputs:

Name	Type	Default	Description
backdrop	`'dark' \| 'light'`	'light'	The backdrop style behind the spinner.

ProgressComponent

Selector: base-progress Standalone: true

A linear progress bar. On hover (or keyboard focus), a tip bubble appears at the leading edge of the fill showing the current percentage. Disable with [showTip]="false".

Inputs:

Name	Type	Default	Description
value	`number`	0	The current progress value (0 to 100).
color	`'primary' \| 'success' \| 'danger' \| 'warning' \| 'accent'`	'primary'	The semantic color variant of the progress bar.
size	`'sm' \| 'md' \| 'lg' \| 'xl'`	'md'	The height/thickness of the progress bar.
showTip	`boolean`	`true`	Show the value tip at the fill edge on hover/focus.
class	`string`	`''`	Extra host classes.

MeterGroupComponent

Selector: base-meter-group Standalone: true

Stacked multi-value meter with optional legend. Pass MeterGroupItem[] (label, value, optional color / icon). Segment widths are proportional to values (or to optional max). Free tier. Install: npx base-ui-cli add meter-group.

Inputs:

Name	Type	Default	Description
value	`MeterGroupItem[]`	`[]`	Segments to render.
size	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Bar thickness.
max	`number`	sum of values	Optional capacity baseline.
showLegend	`boolean`	`true`	Show legend under the bar.
showValue	`boolean`	`true`	Show absolute values in the legend.
showPercent	`boolean`	`true`	Show percentage share in the legend.
class	`string`	`''`	Extra host classes.

CodeComponent

Selector: base-code Standalone: true

A component to display formatted code blocks with syntax highlighting and a copy-to-clipboard button. Supports HTML, TypeScript, JavaScript, and Bash highlighting.

Inputs:

Name	Type	Default	Description
language	`string`	''	The programming language of the code (e.g. 'HTML', 'TypeScript', 'Bash'). Used for syntax highlighting.
showCode	`boolean`	false	If true, the code block is expanded and visible by default.

ComingSoonComponent

Selector: base-coming-soon Standalone: true

A placeholder component used to indicate that a feature or page is under construction. Displays a shimmer effect and customizable text.

Inputs:

Name	Type	Default	Description
title	`string`	''	The primary heading text to display.
description	`string`	''	The secondary descriptive text providing more context.

EmptyStateComponent

Selector: base-empty-state Standalone: true

A standard layout component to display when a list or view has no data. Centers an icon, title, and description.

Inputs:

Name	Type	Default	Description
iconName	`string`	—	The name of the SVG icon to display at the top.
title	`string`	—	The primary heading text.
description	`string`	—	The secondary body text explaining the empty state.

QuoteComponent

Selector: base-quote Standalone: true

A stylized blockquote component for displaying testimonials, reviews, or pull quotes.

Inputs:

Name	Type	Default	Description
variant	`'default' \| 'border-left' \| 'icon-top' \| 'avatar-left'`	'default'	The structural and visual layout variant of the quote.
authorName	`string`	—	The name of the person being quoted.
authorRole	`string`	—	The subtitle or role of the author.
avatarUrl	`string`	—	The URL to the author's avatar image.
iconColor	`'primary' \| 'success' \| 'danger' \| 'warning' \| 'accent' \| 'default' \| string`	'primary'	The semantic color name for the quote icon.

RichTextEditorComponent

Selector: base-rich-text-editor Standalone: true

Lightweight WYSIWYG editor with a themed toolbar (base-stroked-icon-button, tooltips, dropdown, divider) and a contenteditable body. Implements ControlValueAccessor — value is an HTML string. Toolbar: undo/redo, block style (p/h1–h3), bold/italic/underline/strike, bullet/numbered lists, alignment, link, clear formatting. Pro tier (npx base-ui-cli add rich-text-editor).

Inputs:

Name	Type	Default	Description
class	`string`	`''`	Extra host classes merged via `cn()`.
placeholder	`string`	`'Write something...'`	Shown when the editor is empty.
minHeight	`number`	`180`	Minimum editable area height in pixels.
ariaLabel	`string`	`'Rich text editor'`	Accessible label for the editable region.

Directives

BaseButtonDirective

Selector: [base-button] Standalone: true

A standard button directive applying Lussos theme styles.

Inputs:

Name	Type	Default	Description
color	`'primary' \| 'success' \| 'danger' \| 'warning' \| 'accent' \| 'white' \| 'black' \| 'default' \| 'transparent' \| string`	'default'	The semantic visual color.
size	`'sm' \| 'default' \| 'lg' \| 'xl' \| 'xxl'`	'default'	The size of the button.
width	`string`	—	Optional custom width (e.g. '100%').

StrokedButtonDirective

Selector: [base-stroked-button] Standalone: true

A stroked button directive applying Lussos theme styles.

Inputs:

Name	Type	Default	Description
color	`'primary' \| 'success' \| 'danger' \| 'warning' \| 'accent' \| 'white' \| 'black' \| 'default'`	'default'	The semantic visual color.
size	`'sm' \| 'default' \| 'lg' \| 'xl' \| 'xxl'`	'default'	The size of the button.
width	`string`	—	Optional custom width (e.g. '100%').

IconButtonDirective

Selector: [base-icon-button] Standalone: true

An icon-only button directive applying Lussos theme styles.

Inputs:

Name	Type	Default	Description
color	`'primary' \| 'success' \| 'danger' \| 'warning' \| 'accent' \| 'white' \| 'black' \| 'default' \| 'transparent' \| string`	'default'	The semantic visual color.
size	`'sm' \| 'default' \| 'lg' \| 'xl' \| 'xxl'`	'default'	The size of the button.

IconStrokedButtonDirective

Selector: [base-stroked-icon-button] Standalone: true

A stroked icon-only button directive applying Lussos theme styles.

Inputs:

Name	Type	Default	Description
color	`'primary' \| 'success' \| 'danger' \| 'warning' \| 'accent' \| 'white' \| 'black' \| 'default'`	'default'	The semantic visual color.
size	`'sm' \| 'default' \| 'lg' \| 'xl' \| 'xxl'`	'default'	The size of the button.

BaseLinkDirective

Selector: [base-link] Standalone: true

A link directive applying Lussos theme styles. Use this to style inline anchors and links.

Inputs:

Name	Type	Default	Description
color	`'primary' \| 'success' \| 'danger' \| 'warning' \| 'accent' \| 'default'`	'default'	The semantic visual color.
size	`'sm' \| 'default' \| 'lg' \| 'xl'`	'default'	The size of the link.
width	`string`	—	Optional custom width (e.g. '100%').

BaseInputDirective

Selector: [base-input] Standalone: true

A standard input directive that applies consistent Lussos theme styling to native text inputs. Supports disabled and readonly states.

No inputs.

BaseMaskDirective

Selector: input[baseMask] Standalone: true

Dynamically masks a native <input> while typing. Pair with [base-input] for styling. Form controls receive the masked display value; use unmaskInputValue() / unmaskedValue() for raw characters.

Tokens: 0 digit, A letter, S alphanumeric; any other character is a literal.

Inputs:

Name	Type	Default	Description
baseMask	`string`	— (required)	Mask pattern, e.g. `(000) 000-0000`, `00/00/0000`, `AAAA-0000`.

Helpers (exported): applyInputMask(value, pattern), unmaskInputValue(masked, pattern).

BaseTextareaDirective

Selector: [base-textarea] Standalone: true

A standard textarea directive that applies consistent Lussos theme styling.

No inputs.

BaseAddonStartDirective

Selector: [base-addon-start] Standalone: true

An element positioned at the start of an input group.

No inputs.

BaseAddonEndDirective

Selector: [base-addon-end] Standalone: true

An element positioned at the end of an input group.

No inputs.

BaseHeadingDirective

Selector: [baseHeadingText] Standalone: true

Applies standardized heading typography styles to an element.

No inputs.

BaseListItemDirective

Selector: [base-list-item] Standalone: true

A stylistic directive that applies standardized padding, height, and hover effects for an item within a generic list view.

No inputs.

BaseGroupButtonDirective

Selector: [base-group-button] Standalone: true

A standard group button directive applying Lussos theme styles.

Inputs:

Name	Type	Default	Description
color	`'primary' \| 'success' \| 'danger' \| 'warning' \| 'accent' \| 'transparent' \| 'default' \| string`	'default'	The semantic visual color.
size	`'sm' \| 'default' \| 'lg' \| 'xl' \| 'xxl' \| string`	'default'	The size of the group button.
width	`string`	''	Optional custom width (e.g. '100%').

ContainerDirective

Selector: [container] Standalone: true

A structural directive that forces the host element to act as a centered, max-width container. Limits width to 1280px and provides standard horizontal padding.

No inputs.

CodeDirective

Selector: [code] Standalone: true

A stylistic directive that applies monospace font and code-block styling to inline elements.

No inputs.

DropdownMenuDirective

Selector: [base-dropdown-menu-trigger] Standalone: true

A directive that attaches a base-dropdown-menu to a trigger element (like a button). Automatically handles overlay positioning, backdrop clicks, and detachment. Supports cascading submenus: put [base-dropdown-menu-trigger] on a menu item with placement="right" (or left). Nested menus open on hover once the parent cascade is open; leaf clicks and outside clicks close.

Inputs:

Name	Type	Default	Description
placement	`'start' \| 'end' \| 'left' \| 'right' \| 'top-start' \| 'top-end'`	'end'	The physical placement of the dropdown relative to the trigger.
dropdownPanel (via `[base-dropdown-menu-trigger]`)	`DropdownPanel<T>`	—	The reference to the `base-dropdown-menu` component to open.

BaseDropdownMenuItemDirective

Selector: [base-dropdown-menu-item] Standalone: true

A stylistic directive that applies standard padding, hover effects, and typography to an element to make it look like a dropdown menu item.

Inputs:

Name	Type	Default	Description
stayOpen	`boolean`	`false`	Keep the dropdown open after this item is clicked.

DrawerDirective

Selector: [base-drawer] Standalone: true

A directive that attaches a base-drawer to a trigger element (like a button). Automatically handles the overlay backdrop and click-to-open behavior.

Inputs:

Name	Type	Default	Description
placement	`'left' \| 'right' \| 'top' \| 'bottom' \| string`	'right'	The edge of the screen to slide the drawer in from.
drawerPanel (via `[base-drawer]`)	`DrawerPanel<T>`	—	The reference to the `base-drawer` component to open.

ClickOutsideDirective

Selector: [baseClickOutside] Standalone: true

A behavior directive that emits an event whenever the user clicks outside the host element's bounds. Useful for closing dropdowns, drawers, or modals.

Outputs:

Name	Emit Type	Description
baseClickOutside	`MouseEvent`	Event emitted when a click occurs outside the host element.

RevealDirective

Selector: [baseReveal] Standalone: true

Reveals the host element with a fade + slide-up animation the first time it scrolls into the viewport (IntersectionObserver). Respects prefers-reduced-motion and is a no-op during SSR.

Inputs:

Name	Type	Default	Description
revealDelay	`number`	0	Delay in ms before the animation starts once visible. Use for staggering grids.
revealTranslate	`number`	24	Distance in px the element travels upward while revealing.
revealDuration	`number`	600	Animation duration in ms.

ScrollToDirective

Selector: [baseScrollTo] Standalone: true

A behavior directive that smoothly scrolls the window to a target element when the host is clicked.

Inputs:

Name	Type	Default	Description
target (via `[baseScrollTo]`)	`string`	''	A valid CSS selector (like an ID '#my-div') specifying the target to scroll to.

ScrollNavItemDirective

Selector: [base-scroll-nav-item] Standalone: true

A directive to link a navigation item to a specific element ID in a base-scroll-nav layout. Automatically receives an active class when its target element is scrolled into view.

Inputs:

Name	Type	Default	Description
elementId (via `[base-scroll-nav-item]`)	`string`	''	The HTML `id` of the target element in the content area to scroll to.
isActive	`boolean`	—	Whether this nav item is currently active.

Outputs:

Name	Emit Type	Description
clicked	`ScrollNavItemDirective`	Emitted when the nav item is clicked.

BaseTabIconDirective

Selector: [baseTabIcon] Standalone: true

A structural directive that styles a <base-icon> projected inside a base-tab-label. Automatically applies the correct sizing and stroke colors.

Inputs:

Name	Type	Default	Description
type	`string`	'default'	Optional variant type for the icon style.

BaseBadgeIconDirective

Selector: [badge-icon] Standalone: true

Applies badge styling to an icon.

Inputs:

Name	Type	Default	Description
color	`string`	'red'	Tailwind color name (e.g. 'red', 'blue', 'green').
size	`string`	'16'	Numeric Tailwind spacing size for width and height.

BaseBadgeAddon

Selector: [base-badge-addon] Standalone: true

An addon element for a badge, typically used for small icons or indicators inside the badge.

Inputs:

Name	Type	Default	Description
color	`string`	'primary'	The color variant.
size	`string`	'md'	The size variant.
width	`string`	''	Optional custom width.

SliderDirective

Selector: [baseSlider] Standalone: true

A structural directive that wraps elements inside a slider/carousel, adding touch-swipe support.

Outputs:

Name	Emit Type	Description
slideAction	`boolean`	Emitted when a swipe gesture is detected (true = prev, false = next).

AlertDismissDirective

Selector: [baseAlertDismiss] Standalone: true

A directive that dismisses the parent base-alert when clicked.

No inputs or outputs.

DialogCloseDirective

Selector: [base-dialog-close] Standalone: true

A directive that automatically closes the current open dialog when the host element is clicked. Injects DialogContext to find the active dialog reference.

Inputs:

Name	Type	Default	Description
ariaLabel	`string`	—	Optional aria-label for accessibility.
type	`string`	'button'	The native button type.

DrawerPanel (Interface)

Selector: N/A (Interface)

Interface that a drawer component must satisfy for use with the [base-drawer-trigger] directive.

Properties:

templateRef: TemplateRef<T>
closed: EventEmitter<void>

DropdownPanel (Interface)

Selector: N/A (Interface)

Interface that a dropdown component must satisfy for use with the [base-dropdown-menu-trigger] directive.

Properties:

templateRef: TemplateRef<T>
closed: EventEmitter<void>

DialogContainer (Interface)

Selector: N/A (Interface)

Interface that a dialog container must satisfy. The default implementation is DialogContainerComponent.

Properties:

context: DialogContext<any>
container: ViewContainerRef
className: string

DialogContext (Injectable)

Selector: N/A (Injectable)

Injected into every dynamically-opened dialog component to provide data and close/reject controls.

Properties:

data?: T

Methods:

close(result?: T): void — Closes the dialog with an optional result.
reject(reason?: T): void — Rejects the dialog with an optional reason.

Pipes

FilterPipe

Name: filter Standalone: true

A generic data transformation pipe that filters an array of objects or strings based on a search term. Capable of searching across multiple object properties recursively.

Usage:

{{ items | filter: searchQuery }}
{{ items | filter: searchQuery: 'name' }}
{{ items | filter: searchQuery: ['name', 'email'] }}

Services

ThemeService

providedIn: 'root'

A service that manages the application's light/dark mode state. SSR-safe: localStorage is only touched in the browser; the dark class is still applied to <html> during server render (default theme is dark).

Properties:

isDarkMode: Signal<boolean> — Whether the current theme is dark.

Methods:

toggleTheme(): void — Toggles between light and dark mode.
setTheme(theme: 'light' | 'dark'): void — Sets the theme explicitly and persists to localStorage (browser only).

SidebarService

providedIn: 'root'

A service to control the visibility state of the application sidebar.

Properties:

isOpen$: Observable<boolean> — Observable that emits sidebar open/close state.
isOpen: boolean — Current sidebar open state (synchronous getter).

Methods:

toggle(): void — Toggles the sidebar open/closed.
setOpen(open: boolean): void — Sets the sidebar open state explicitly.

CurrentScreenSizeService

providedIn: 'root'

A service that monitors viewport resizing and provides the current Tailwind breakpoint (XSmall, Small, Medium, Large, XLarge).

Properties:

currentScreenSize: string — The current screen size name.
size$: Observable<string> — Observable that emits on breakpoint changes.

DialogService

providedIn: 'root'

A service for dynamically rendering and managing dialogs/modals. SSR-safe: open() is a no-op on the server (returns of(undefined)). Overlay hosts are appended via injected DOCUMENT, not the global document.

Methods:

open<T>(type: Type<any>, data?: T, className?: string, options?: { hideOnBackdropClick?: boolean; containerType?: Type<any> }): Observable<TResult | undefined> — Opens a component dynamically inside a dialog container. Returns an Observable that emits the result when the dialog is closed. On the server, emits undefined immediately.

ToastService

providedIn: 'root'

Imperative toast API. Mounts a live region on first use — do not place base-toast-container in templates. Inject with inject(ToastService); do not add the service to imports. SSR-safe: skips DOM work off the browser and creates/appends the host via injected DOCUMENT.

Methods:

show(message: string, config?: ToastConfig): number — Shows a toast and returns its id. duration defaults to 4000ms; duration: 0 keeps it until dismissed.
success(message: string, config?: ToastConfig): number — Success toast (color: 'success', icon: 'check').
error(message: string, config?: ToastConfig): number — Error toast (color: 'danger').
warning(message: string, config?: ToastConfig): number — Warning toast.
info(message: string, config?: ToastConfig): number — Info toast.
promise<T>(promiseOrFn: Promise<T> | (() => Promise<T>), messages: ToastPromiseMessages<T>, config?: ToastConfig): Promise<T> — Loading toast that resolves to success or error when the promise settles.
dismiss(id: number): void — Dismisses a toast by id.
clearAll(): void — Dismisses every visible toast.

ToastConfig: color, duration, icon, position, action ({ label, onClick, dismiss? }).

ToggleButtonService

providedIn: 'root'

An internal service used by ButtonGroupComponent to coordinate toggle state among child GroupButtonComponent instances. You do not normally inject it directly.

Animations

All animations are exported as Angular animation triggers from animations.ts.

Name	Type	Description
`dropdown`	`trigger`	Slide-down fade-in animation for dropdown menus and overlays.
`openClose`	`trigger`	Expand/collapse animation for accordions and collapsible panels.
`rotate180`	`trigger`	180-degree rotation animation, useful for chevron toggles.
`tabAnimation`	`trigger`	Horizontal slide animation for tab content panes.
`buttonSlideRightToLeft`	`trigger`	Slide-right-to-left animation for action buttons.
`slideLeft`	`trigger`	Slide-in from the left animation.
`slideRight`	`trigger`	Slide-in from the right animation.
`slideBottom`	`trigger`	Slide-in from the bottom animation.
`slideTop`	`trigger`	Slide-in from the top animation.

Utility Functions

cn()

cn(...inputs: ClassValue[]): string

Merges Tailwind classes safely, resolving conflicts using tailwind-merge and clsx. Use this to allow users to override default tailwind classes on components.

Token Exports

Name	Type	Description
`GALLERY_SLIDER_TOKEN`	`InjectionToken`	Injection token used internally by gallery slider components to share state.
`RADIO_GROUP`	`InjectionToken`	Injection token for radio group coordination.

Type Exports

Name	Type	Description
`CookieConsent`	`'accepted' \| 'rejected'`	Choice stored by `base-cookie-banner` and emitted on `consentChange`.