Display
62 components.
Display
Aspect RatioKeeps content at a fixed ratio and crops media to fill the box. AudioA styled audio player over native <audio> with play/pause, seek, volume, and mute controls. AuroraA slowly drifting aurora-light gradient backdrop behind its content. Pure CSS @keyframes, SSR-safe, reduced-motion aware. AvatarUser photo with an initials fallback and a status indicator. Avatar GroupOverlapping stack of avatars that collapses the overflow into a "+N" button with a popover of the hidden members. BadgeCompact label for indicating status, categories or counts. BarcodeA zero-dependency SVG barcode renderer supporting CODE128 (auto B/C) and EAN13 formats with optional human-readable text. Border BeamA comet of light travels the rounded border of any container. Pure CSS via offset-path: border-box, SSR-safe, reduced-motion aware. CardSurface container with optional header, body and footer. ChartA pure-SVG multi-series chart supporting line, bar, and area types with no external dependencies. Chat BubbleA single chat message bubble, aligned according to who sent it. Code BlockCode block with a header, language label and a built-in copy button. CommentA comment in a threaded discussion, with avatar, author, timestamp and nested replies. Confidence MeterA meter whose motion encodes an agent's confidence: the fill is the value, the shimmer cadence and a low-end jitter read as certainty. role=meter, SSR-safe, reduced-motion aware. Copy ButtonButton that copies text to the clipboard and shows a visual "Copied" feedback. Count UpAnimates a number from a start to a target with eased counting, starts on view, jumps to the final value under reduced motion. Data TableAn interactive layer over a slotted light-DOM <table> that adds column sorting, text search/filter, and client-side pagination. EmptyCentered empty state with icon, title, description, and action. FlowA lightweight node-graph / flowchart canvas that composes with light-DOM pura-flow-node children positioned by x/y attributes, and edges declared via the host edges attribute or slotted pura-flow-edge children. GaugeSemicircular meter that shows a value within a range, with a filled arc, needle, and center readout. Grid PatternA tiled grid backdrop with a glowing patch that sweeps across it. Pure CSS @keyframes on a moving mask, SSR-safe, reduced-motion aware. HeatmapA calendar or matrix heatmap (GitHub contributions style) that accepts data via the data property or attribute and renders intensity buckets using design tokens. HighlightWraps matched substrings of its text content in mark elements, supporting comma-separated query terms, case sensitivity control, and whole-word matching. IconA generic inline icon renderer that renders from either a slotted SVG or an SVG path d string attribute, using currentColor stroke so color follows CSS. ItemFlexible row for lists, with media, title, description, and actions. KbdInline monospace chip for displaying shortcut keys. ListA list primitive wrapping real ul/ol semantics with configurable marker style, gap, and inline layout, expecting pura-list-item children in its default slot. Magic CardA card whose gradient border and soft spotlight follow the pointer. SSR-safe resting paint, progressive enhancement, no animation runtime. MapA thin iframe wrapper over a map provider embed that resolves a location from a full src URL, a place query string, or lat/lon coordinates and renders an OpenStreetMap embed. MarqueeSeamless, infinitely scrolling content strip with a pure-CSS animation. MeteorsA field of diagonal shooting-star streaks behind its content. Deterministic scatter (SSR-stable), pure CSS @keyframes, reduced-motion aware. MeterLabeled measurement bar for a scalar value within a known range, with semantic color by threshold. Notification ItemA notification row with icon, title, description, time, and an optional dismiss button. Orbiting CirclesSatellites ride a circular orbit around centred content. Pure CSS @keyframes with staggered delays, SSR-safe, reduced-motion aware. Organization ChartHierarchical org chart rendered top-down with CSS-drawn connector lines, supporting JSON data or slotted pura-org-node elements. ParticlesA field of dots that drift and twinkle behind content. Deterministic pure CSS @keyframes, SSR-safe, reduced-motion aware. Pdf ViewerThin wrapper that embeds a PDF via the browser's native PDF renderer using an iframe, with an optional toolbar and download link. PresenceStack of overlapping avatars with a real-time online count and an overflow roster. ProgressDeterminate or indeterminate progress bar to indicate the advancement of a task. Progress RingCircular progress ring that shows the percentage in the center, with an animated indeterminate mode. ReactionsBar of emoji pills where each click toggles the reaction and adjusts the counter. Retro GridA tilted perspective grid floor whose lines scroll toward the viewer. Pure CSS @keyframes, SSR-safe, reduced-motion aware. SeparatorHorizontal or vertical dividing line, with an optional centered label. SkeletonAnimated placeholder to indicate loading content. Skeleton TextLoading placeholder that mimics a paragraph with shimmering lines of text. SparklineInline mini line chart, with no axes, that fits inside a sentence or a table cell. SpinnerAnimated loading indicator in four variants and three sizes. StatMetric card with a prominent value, a label, and a colored delta with a trend arrow. Stat GridResponsive grid of metrics that arranges statistic cells with automatic dividers. TableWraps a native HTML table with consistent pura styling. TagCompact pill for labeling, filtering, or categorizing content, with optional removable and status-dot variants. TerminalAn interactive terminal emulator with a monospace output area and a prompt input line that dispatches a command event on Enter. TestimonialTestimonial card with decorative quotation marks, a quote, an optional star rating, and an author line. Text ShimmerA bright band sweeps across text via a gradient clipped to the glyphs. Pure CSS @keyframes, SSR-safe, reduced-motion aware. TickerA number that animates scrolling from the previous value up to the new one, with locale-aware thousands separators. TimelineVertical timeline with connected markers for displaying events in sequence. Tree ViewKeyboard-navigable hierarchical tree with selection and expandable nodes. TypewriterTypes text out character by character, optionally cycling phrases, with a CSS caret; renders full text and is accessible under reduced motion. TypographyStyles rich HTML content with a comfortable reading rhythm. VideoStyled wrapper around native video with a custom control bar including play/pause, seek, volume, mute, and fullscreen. Virtual ListWindowed rendering for large datasets that only renders the visible slice plus overscan, using a tall spacer and translateY offset for scroll fidelity. WatermarkOverlays a repeating, non-interactive watermark of tiled text or image over slotted content.