Component catalog
Browse @xngui component demos. Every page includes live preview, input controls, event logging, and generated template code.
Actions
Buttons, toggles, and grouped actions for commands and choices.
Forms
Inputs, validation, and form shells integrated with Angular Signal Forms.
Form
Signal Forms shell — FormRoot, form-field, validation.
Input
Single-line text FormValueControl.
Textarea
Multi-line text FormValueControl.
Number input
Numeric FormValueControl via transformedValue().
Search input
Search input with debounced query.
Password input
Password input with reveal toggle.
Datepicker
Input + calendar overlay date control.
Checkbox
Boolean FormCheckboxControl with indeterminate.
Switch
ARIA switch FormCheckboxControl.
Radio group
Bound value for a set of x-radio options.
Select
Custom select on x-menu-item — single or multiple.
Calendar
Month grid for selecting a single day.
Validation
Schema helpers for Signal Forms validators.
Validation rules
Live validation criteria checklist for Signal Forms fields.
File upload
File upload input with labeled trigger.
Combobox
Searchable select with typeahead filtering.
Input OTP
One-time password segmented input.
Native select
Styled native HTML select element.
Slider
Range slider FormValueControl.
Color picker
Color picker input control.
Navigation
Tabs, menus, steppers, and app-shell navigation patterns.
Tabs
Accessible tablist — compose with x-tab panels.
Breadcrumb
Location trail — custom separators + optional middle collapse (…).
Pagination
Styled pager over @xngui/cdk/pagination.
Stepper
Multi-step flow — compose with x-step panels.
Navbar
App-shell top bar with start / center / end slots.
Sidebar
App-shell collapsible side nav region.
Menubar
Horizontal menu bar composing x-menu triggers.
Navigation menu
Hierarchical navigation with expandable nested sections.
Link
Inline navigation with variant, underline, and external URL support.
Overlays
Dialogs, drawers, menus, and anchored floating surfaces.
Dropdown menu
Floating action menu — shared by menubar and context menu.
Context menu
Directive — right-click `[xContextMenuTriggerFor]` opens x-menu at the pointer.
Dialog
Modal dialog with focus trap, header / body / footer slots.
Drawer
Temporary overlay panel — side drawer or bottom sheet.
Tooltip
Hover / focus hint via [xTooltip] directive.
Popover
Anchored interactive panel — trigger + rich content.
Alert dialog
Modal confirmation dialog with alert semantics.
Layout
Cards, panels, separators, and structural layout primitives.
Accordion
Expandable section group — single or multiple open.
Card
Surface container with header / body / footer slots.
Carousel
Horizontal slide viewer with prev / next controls.
Aspect ratio
Maintains width-to-height ratio for media.
Resizable
Split panes and edge resize with auto-injected handles and VS Code–style double-tap.
Separator
Visual divider between content regions.
Feedback
Toasts, alerts, and inline status messaging.
Data display
Tables, lists, badges, and data visualization building blocks.
Progress
Determinate or indeterminate progress bar.
Skeleton
Placeholder shimmer while content loads.
Spinner
Accessible loading spinner.
Empty state
Placeholder when a list or panel has no content.
Icon
Font Awesome glyph with consistent sizing and accessibility.
Avatar
User portrait — image, initials, or icon fallback.
Badge
Compact status, count, taxonomy label, or position dot.
Chip
Toggleable / dismissible filter pill.
Code
Read-only code block with editor chrome, copy, and highlighted lines.
List
Vertical collection of rows with optional adornments.
Table
Composable data table — header / row / cell.
Tree
Expandable hierarchical outline.
Timeline
Chronological sequence of events.
Chart
Data visualization chart container.
Content item
Generic list row primitive.
Kbd
Keyboard shortcut hint label.
Media
Images, video, audio, embeds, and gallery layouts.
Audio
Full-featured audio wrapper with toolbar controls, nested settings menus, and typed media events.
Embed
Responsive sandboxed iframe for external media.
Gallery
Inline media gallery with metadata header, stage tools, and thumbnail strip.
Image
Raster image with bordered surface and fade-in reveal.
Video
Accessible video player with custom controls, settings menu, and optional aspect-ratio frame.
Typography
Animated and decorative text treatments.
Diff text
Semantic insert, delete, and modify diff rendering.
Gradient text
Text filled with a configurable CSS gradient.
Highlight text
Highlights matching search terms inside text.
Number counter
Animated count-up for stats, KPIs, and hero metrics.
Split text
Splits text into indexed units for custom animation.
Shimmer
Sweeping highlight on live text for in-progress status lines.
Text reveal
Word-by-word or character-by-character reveal animation.
Text scramble
Randomized characters resolving into final text.
Typewriter
Progressively typed content with optional caret.
Marquee text
Continuously scrolling text track.
Spoiler text
Concealed text revealed on click, hover, or focus.