Display.
Callouts, code blocks, marquees, lightboxes and other visual helpers.
15 components
Components
15 totalKbd
3D tactile keycap with hover lift and pressed states. Compound API with KbdGroup for chords and KbdDisplay for inline keys.
/components/display/kbd →Callout
MDX-style admonition with info / success / warning / error / neutral variants and optional icon override. Ships --info / --success / --warning theme tokens.
/components/display/callout →Scroll Progress
Fixed reading progress bar. Tracks document scroll by default or a scoped container ref.
/components/display/scroll-progress →Announcement Bar
Top-of-page banner with default / primary / muted tones, optional dismiss button and localStorage persistence.
/components/display/announcement-bar →Spinner
Loading indicator with circle, dots and bars variants, sm / md / lg sizes. Inherits the current text color and ships an accessible status label.
/components/display/spinner →Copy Button
Click-to-copy button with copied feedback, icon-only or labelled, ghost / outline variants and a non-secure-context clipboard fallback.
/components/display/copy-button →Marquee
Infinite scrolling row or column for logos and testimonials, with pause-on-hover, reverse and vertical modes. Keyframes ship inline, zero config.
/components/display/marquee →Image Compare
Before/after comparison slider with a draggable, keyboard-accessible divider, horizontal or vertical orientation and hover-follow mode.
/components/display/image-compare →Lightbox
Fullscreen image lightbox on Radix Dialog with gallery navigation, zoom and pan, swipe gestures, captions and a thumbnail strip.
/components/display/lightbox →QR Code
Dependency-free QR code generator rendering crisp SVG, with L/M/Q/H error correction, quiet-zone control and currentColor theming.
/components/display/qr-code →Code Block
Code display with built-in dependency-free syntax highlighting via theme tokens, line numbers, line highlights, diff gutters, copy button and collapsible max-height.
/components/display/code-block →Masonry
True masonry layout that balances children into the shortest column by measured height, order-preserving, responsive, dependency-free.
/components/display/masonry →Audio Player
Composable audio player with play/pause, scrub-safe seek with buffered tint, skip, time readouts, volume and playback rate.
/components/display/audio-player →Confirm
Imperative confirmation dialog: a root provider plus a useConfirm hook that resolves a promise on confirm or cancel. Default or destructive tone, an optional icon, and an async confirm action with a pending spinner.
/components/display/confirm →Unsaved Guard
Unsaved-changes guard: a root provider plus a useUnsavedGuard hook. Warns before reload, tab close and in-app link navigation, and returns a guard(proceed) to wrap programmatic navigation in a confirm dialog.
/components/display/unsaved-guard →