API reference

Here's the full contract for skeleton: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.

Inputs

Dial skeleton in with 7 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`preset`	`string \| null`	`null`	Name of a bundled or registered preset. When provided, the component resolves defaults, variants and alias composition from the preset registry.
`template`	`string \| HubSkeletonTemplateDefinition \| null`	`null`	Inline Emmet-like DSL string or template definition object with optional responsive breakpoint overrides.
`params`	`HubSkeletonParams`	`{}`	Serializable parameters interpolated into `{{param}}` placeholders before parsing and preset expansion.
`variant`	`string \| null`	`null`	Optional preset variant name, such as `compact`, used to switch template defaults or override the base preset template.
`animated`	`boolean`	`true`	Enables or disables the shimmer animation while keeping the same placeholder layout.
`appearance`	`'default' \| 'subtle' \| 'contrast'`	`'default'`	Changes the visual intensity of the skeleton surfaces without changing the resolved layout.
`ariaLabel`	`string`	`'Loading placeholder'`	Accessible label applied to the container element for assistive technologies.

Outputs

No outputs documented yet.

Templates

Make it yours — 3 template slots let you project custom markup.

Name	Description	Example
`Bundled Presets`	Available preset names in the initial catalogue: card, list-item, table-row, detail-view, form-section, dashboard-widget, stat-card, chart-panel, profile-summary, master-detail, kanban-card, feed-item, search-result, table-toolbar, filter-bar and empty-state-skeleton.	`<hub-skeleton preset="table-row" [params]="{ columns: 4 }"></hub-skeleton>`
`Preset DSL`	Compact string syntax that supports node names, modifiers, sibling composition with `+`, child nesting with `>`, and repetition with `*N`.	`<hub-skeleton template="stack(gap:12)>circle(size:40)+stack(gap:8)>line(width:42%)+line(width:72%)"></hub-skeleton>`
`provideHubSkeletonPresets`	Registers custom presets in Angular dependency injection so any component can render them by name.	`providers: [provideHubSkeletonPresets([{ name: 'profile-card', template: 'stack(gap:16)>circle(size:72)+line(width:48%)' }])]`

CSS variables

Theme every pixel with 5 CSS variables. Override them at :root or scope them to a wrapper.

Visual Tokens

Core CSS custom properties exposed by the host component.

Variable	Default	Type	Description
`--hub-skeleton-bg`	`rgba(148, 163, 184, 0.18)`	color	Base placeholder colour used for visible skeleton surfaces.
`--hub-skeleton-highlight`	`rgba(255, 255, 255, 0.52)`	color	Highlight colour used by the shimmer gradient.
`--hub-skeleton-radius`	`12px`	length	Default border radius for block and line nodes.
`--hub-skeleton-gap`	`12px`	length	Default gap used by stack and grid nodes when not overridden by modifiers.
`--hub-skeleton-animation-duration`	`1.35s`	transition	Duration of the shimmer animation cycle.

Styling and theming

No styling examples are documented yet. This section will include customization recipes and theming examples.