Catalogue
All 67 components
Every one free, themeable through the same eight tokens, and documented with the exact code that renders it.
- 63 stable— ready to use
- 4 new— just landed
Showing 67 of 67
Forms
17Switch
<hk-switch>Two-way bound toggle with a spring-eased thumb.
Rating
<hk-rating>Any icon, any count, half steps, keyboard driven.
Input
<hk-input>Prefix, suffix, hint, error — and attached buttons.
Textarea
<hk-textarea>Auto-growing textarea with a character counter.
Select
<hk-select>Virtualised single and multi select with typeahead.
Multi select
<hk-multi-select>Chips, grouped options, filter-aware select-all.
Combobox
<hk-combobox>Async-filterable select that accepts free text.
Checkbox
<hk-checkbox>Tri-state checkbox with an animated tick.
Radio group
<hk-radio-group>Roving-tabindex radio set, horizontal or stacked.
Slider
<hk-slider>Single or range slider with ticks and live value bubble.
Date picker
<hk-date-picker>Single, multiple or range — with time and an output format.
File drop
<hk-file-drop>Drag-and-drop upload zone with per-file progress.
Pin input
<hk-pin-input>One-time-code boxes with paste splitting.
Password
<hk-password>Strength scored from rules, reveal toggle, Caps Lock warning.
Signup form
<hk-signup-form>Reactive, cross-validated, SSO first.
Form field
<hk-form-field>Label, hint and error wiring for any control.
Button
<hk-button>Six variants, five tones, badges, liquid glass.
Navigation
8Navbar
<hk-navbar>Pill, app bar or dock — one travelling indicator.
Tabs
<hk-tabs>Sliding indicator, and badges bound to live counts.
Stepper
<hk-stepper>Three presentations, one wizard state.
Breadcrumb
<hk-breadcrumb>Slash, chevron or pills — all collapsing the same way.
Pagination
<hk-pagination>Page list with ellipsis windowing and page-size select.
Menu
<hk-menu>Nested, keyboard-driven, burger or labelled trigger.
Sidebar nav
<hk-sidebar-nav>Collapsible route tree with active-branch tracking.
Command palette
<hk-command>Fuzzy-matched command list on a global hotkey.
Feedback
7Toast
<hk-toast>Stacked, auto-dismissing, pause-on-hover.
Accordion
<hk-accordion>Height-animated panels, single or multi expand.
Alert
<hk-alert>Inline banner in four tones, dismissible.
Progress
<hk-progress>Linear and circular progress, determinate or not.
Skeleton
<hk-skeleton>Shimmer placeholders that match your real layout.
Spinner
<hk-spinner>Seven styles, all sized off the current font.
Empty state
<hk-empty>Illustration, message and call to action.
Overlay
6Dialog
<hk-dialog>Focus-trapped modal built on the native dialog element.
Drawer
<hk-drawer>Edge sheet from any side, swipe-dismissable on touch.
Popover
<hk-popover>Anchored panel that flips and shifts to stay on screen.
Tooltip
<hkTooltip>Directive tooltip with hover, focus and touch triggers.
Confirm
<HkConfirmService>Promise-returning confirmation, no template needed.
Context menu
<hkContextMenu>Right-click menu that respects viewport edges.
Layout
6Card
<hk-card>Header, body, footer and media — every slot independent.
Divider
<hk-divider>Horizontal or vertical rule with an optional label.
Split pane
<hk-split>Draggable splitter with keyboard resize and min sizes.
Scroll area
<hk-scroll-area>Styled scrollbars with edge-fade affordances.
Stack
<hk-stack>Flex row or column with token-driven gaps.
App shell
<hk-app-shell>Header, sidebar and content frame with responsive rules.
Data
9Table
<hk-table>Grouped headers, filters, virtual scroll — the whole grid.
Tree
<hk-tree>Lazy-loading tree with checkbox cascade.
Tag
<hk-tag>Compact label with tone, icon and remove button.
Badge
<hk-badge>Count or dot indicator, anchorable to any element.
Avatar
<hk-avatar>Image, initials or icon avatar with stack grouping.
Timeline
<hk-timeline>Vertical or horizontal event rail with custom markers.
Stat
<hk-stat>Metric tile with delta, sparkline slot and count-up.
Line chart
<hk-line-chart>SVG line and area, with a crosshair and a table view.
Bar chart
<hk-bar-chart>Grouped or stacked bars, vertical or horizontal.
Backgrounds
8Aurora
<hk-aurora>A domain-warped flow field, rendered per pixel.
Particle field
<hk-particle-field>Linked particles that part around the pointer.
Beams
<hk-beams>Sweeping light beams that brighten where they cross.
Waves
<hk-waves>Stacked sine bands with a filled falloff.
Dot matrix
<hk-dot-matrix>A dot grid that swells in a wave and bulges toward the pointer.
Grid motion
<hk-grid-motion>A perspective grid receding to a horizon.
Dither
<hk-dither>Ordered-dither bands — the chunky retro look.
Spotlight
<hk-spotlight>A light that follows the pointer, revealing a grid.
Utility
6Reveal
<hkReveal>Scroll-triggered enter animation with stagger.
Count up
<hkCountUp>Animates a number into view, reduced-motion aware.
Clipboard
<hkCopy>Copy-to-clipboard directive with a confirmation state.
Hotkey
<HkHotkeyService>Scoped keyboard shortcuts that clean themselves up.
Theme
<HkThemeService>Reads, writes and persists the token layer at runtime.
Intersect
<hkIntersect>Emits when an element enters or leaves the viewport.