fractalsvelte-ui
Components
124 components. Each page lists its props, snippets and an example you can copy.
Generated from the component sources by the library’s AST documentation extractor.
Actions
Button An interactive trigger for user actions with support for multiple visual variants, sizes, shapes, and an integrated loading state. Accepts leading and trailing snippets and transparently renders as an anchor when an href is supplied.ButtonGroup A clustered group container that attaches adjacent buttons seamlessly with merged borders or separates them with token spacing. Supports horizontal and vertical orientations.CloseButton A standardized dismissal trigger for dialogs, drawers, toasts, and alerts. Renders a crisp vector close glyph with subtle hover emphasis.CopyButton A one-click clipboard copy utility that transitions into a confirmed checkmark state upon copying. Reverts automatically after a two-second feedback duration.HoldToConfirm A high-stakes press-and-hold confirmation button with animated progress fill. Guards critical and destructive operations against accidental actuation.IconButton A compact icon-only action button with accessible screen-reader labelling and hover tooltips. Fits standard icon sizes across five scale tiers.LinkButton A semantic navigation anchor styled with button dimensions and hover aesthetics. Automatically configures security attributes and external link indicator icons for foreign destinations.SlideUnlock A swipe-to-unlock gesture slider with draggable spring thumb, progress track fill, and success state. Designed for deliberate authorization and high-consequence triggers.SplitButton A dual-action control pairing a primary button trigger with a secondary dropdown chevron button. Useful when the default action has associated alternate options.
Forms
Checkbox An accessible selection control supporting checked, unchecked, and indeterminate states. Renders custom vector checkmark iconography and coordinates state changes through bindable checked.ColorPicker An integrated color selection interface pairing a visual swatch trigger with hex text input and palette presets. Synchronizes chosen colors with a bindable hex string.FileInput A drag-and-drop file upload zone providing file type validation, size restriction checks, and an interactive file listing. Captures chosen files into a bindable array and provides individual file removal.FormField A layout wrapper component providing standardized label headers, required or optional indicators, descriptive helper text, and validation error messages for form controls.Input A versatile text input field supporting multiple input types, validation feedback, quick clear actions, and password visibility toggling. Exposes input text through a bindable value and accepts optional leading and trailing snippets.NumberInput A numeric stepper control equipped with incremental and decremental action buttons. Clamps values within minimum and maximum limits, adjusts by custom step increments, and binds numeric value.PinInput A segmented one-time passcode and verification input supporting numeric or text entry. Features automatic next-box focus advance, backspace regression, clipboard paste distribution, and a bindable value.Radio An individual selection control featuring a spring-animated inner indicator dot. Emits selection changes through bindable checked and coordinates automatically with parent radio group containers.RadioGroup A semantic radiogroup container that coordinates single-option selection among child radio items. Manages value selection through a bindable value and provides full keyboard arrow navigation across options.RangeSlider A dual-thumb slider control designed for selecting lower and upper numeric boundaries. Binds minVal and maxVal concurrently and prevents thumbs from crossing minimum distance thresholds.RotaryDial A precision hardware-grade rotational dial and knob control with 270-degree arc tracking, circular tick marks, LED indicator notch, and numeric readout.SearchInput A specialized search field pre-configured with search iconography, quick clear action, and keyboard shortcut badge. Emits search query changes through a bindable value and optionally binds to global hotkeys.Select A custom dropdown selection control featuring search filtering, clear actions, and complete keyboard navigation. Connects the active selection to a bindable value and provides accessible popup option lists.Slider A precision numeric range slider featuring a styled track, fill bar, and draggable thumb. Exposes current values through a bindable value and renders optional floating tooltips during interaction.Switch A tactile toggle switch control featuring smooth sliding spring transitions and optional track or thumb iconography. Communicates binary on and off states through bindable checked.TagInput An interactive multi-tag input creating removable chip pills upon Enter or comma keypress. Supports backspace deletion, duplicate prevention, and maximum tag limits.TextArea A multi-line text input field supporting dynamic height auto-resizing and character limit tracking. Clamps input to maximum length constraints and exposes contents through a bindable value.
Display
Alert A prominent callout banner for communicating feedback, warnings, and system status. Supports semantic intent modes, structured title and description slots, and interactive dismissal.AspectRatio A responsive container that locks embedded media to a fixed aspect ratio like 16:9, 4:3, or 1:1. Ensures consistent proportional scaling across screen dimensions without layout shifts.Avatar A visual representation of an entity, user profile, or workspace. Displays an image with automatic fallback to initials or a generic glyph, alongside an optional presence status indicator.AvatarGroup A stacked container that clusters related avatars with consistent overlapping margins and elevation borders. Supports an excess count badge to represent additional unrendered entities.Badge A compact status indicator pill used to highlight counts, states, or tags. Supports multiple semantic color variants, sizing tiers, and an optional dot indicator.Banner A full-width announcement strip intended for global notices, system maintenance alerts, and calls to action. Supports fixed or sticky placement, action button snippets, and dismiss triggers.Counter An animated rolling number odometer counter with vertical digit reels that slide smoothly into position upon numeric state changes.DotMatrix A retro LED dot-matrix display rendering alphanumeric text on a 5x7 phosphor grid with authentic glow, pitch spacing, and custom colorways.EmptyState A placeholder container displayed when lists, tables, or views have no data to render. Pairs a centered illustration with descriptive text and primary action slots.Kbd A keyboard shortcut chip styled with tactile physical key depth and monospace typography. Conveys keystrokes, accelerator chords, and special keys within user interfaces.Meter A scalar gauge representing a numerical value within known boundaries, such as disk space or battery level. Automatically categorizes values into optimum, sub-optimum, and critical zones based on low and high thresholds.Progress A linear horizontal progress indicator communicating the completion status of ongoing processes. Supports determinate values, animated stripes, and an indeterminate activity mode.SizeReadout A design-tool inspired live dimension tag and overlay chip showing width × height measurements, item counts, and status LED.Skeleton An animated placeholder mimicking content geometry while data loads. Supports text lines, rectangular, rounded, and circular geometries with smooth shimmer or pulsing transitions.Sparkline A lightweight inline SVG micro-chart displaying trend trajectories with optional gradient fill and smoothed curve strokes.Spinner A circular vector loading indicator for asynchronous operations and busy states. Features smooth rotation keyframes with configurable diameter, stroke thickness, and rotational velocity.StatCard A dashboard metric card presenting a key performance indicator. Features a prominent numeric value, title, directional trend delta badge, and slots for sparklines or footnotes.Tag An interactive label chip designed for categorization, selection, and multi-value inputs. Features optional icon slots and an accessible dismissal button.
Layout
BentoCell A modular cell designed for bento grids with configurable column and row track spans. Features an optional animated gradient border glow effect and surface styling variants.BentoGrid A modern dashboard grid container utilizing dense auto-flow packing to assemble modular bento interfaces without gaps. Automatically reflows onto single columns on mobile displays.Card A versatile container with structured slots for media, header, content body, and footer actions. Supports multiple surface variants, elevation shadows, corner radii, and padding tiers.ClickableCard An interactive card that functions as a button or anchor link with elevation hover lift and active press feedback. Supports media slots, custom headers, and external link handling.Container A responsive centered container that constrains content width to standardized breakpoints or fluid dimensions. Features configurable horizontal gutter padding tokens.DataTable A dense, responsive tabular data presentation component supporting sortable columns, zebra striping, bordered cells, and custom cell formatting snippets.Divider A separator line for partitioning adjacent content blocks horizontally or vertically. Supports solid, dashed, and dotted styles with optional centered text labels or badges.Flex A flexible flexbox layout utility providing granular control over direction, wrapping, and distribution. Supports independent axis gap tokens and inline flex formatting.Grid A CSS grid layout container featuring track templates for fixed column counts, auto-fit, and auto-fill. Supports independent column and row gap tokens and grid item alignment.Section A semantic page section wrapper offering eyebrow labels, headings, subtitles, and header action slots. Provides options for contained width constraints and vertical padding scales.SelectableCard An interactive card with checkmark or radio indicator and active highlight border for option picking. Features bindable selection state, full keyboard navigation, and custom indicator slots.SplitPane A resizable two-pane container with a draggable divider bar supporting horizontal and vertical orientations and minimum size constraints.Stack A linear layout container for organizing child elements in flex columns or rows. Controls gap spacing tokens, alignment, content distribution, and responsive wrapping.
Navigation
AppShell A flexible application layout frame providing a responsive scaffold with a sticky Header, collapsible Sidebar, main Content container, and Footer region.BottomNav A mobile-optimized bottom navigation dock with icons, route labels, active indicator glows, and safe-area inset padding.Breadcrumb A semantic navigation trail with customizable separators, optional root home glyph, and automated truncation for deep page hierarchies.Dock A macOS-inspired spring magnification application dock where launcher items expand smoothly based on pointer proximity distance.Header A top application bar featuring dedicated slots for brand identity, center search or navigation, and contextual action controls with frosted glass aesthetics.MobileNav A slide-out mobile drawer overlay with an animated backdrop, integrated dismissal trigger, and responsive sheet positioning.MorphingTabs A high-performance tabbed navigation bar featuring a physics-sliding, width-morphing highlight indicator pill that glides smoothly across active tab triggers.Pagination A comprehensive paged navigation control featuring previous/next triggers, dynamic page number buttons, ellipsis collapse, and a bindable currentPage.SegmentedControl A pill-style selection switch featuring a smooth sliding backdrop highlight that glides behind the actively chosen option.SideNav A collapsible vertical sidebar navigation menu supporting grouped section headings, nested badges, vector icons, and a compact collapsed mini-mode.Stepper A multi-step progress indicator tracking completed, active, and upcoming stages across discrete workflows with connecting state tracks.Tabs An accessible tabbed interface featuring animated sliding underlines or pill indicator highlights, bindable activeTab, and keyboard arrow navigation.TopNav A horizontal navigation link bar providing active indicator highlights, subtle hover transitions, and optional icon and badge counters.TreeList A recursive hierarchical tree view for navigating nested folder structures, files, and multi-level data with expand/collapse arrows.
Overlays
AlertDialog A high-priority confirmation dialog designed for destructive or critical actions. Safely directs initial focus to the cancel button, presents status icons, and exposes confirmation callbacks.CenterMorphModal A smooth expanding modal dialog that morphs directly from its originating trigger button with backdrop blur, keyboard dismissal, and spring physics.CommandPalette A searchable command palette modal opened via a global keyboard shortcut. Filters categorized commands in real time with keyboard selection and execution.ContextMenu A floating context menu triggered on mouse right-click, anchored to pointer coordinates with support for keyboard shortcuts and separators.Dialog An accessible modal dialog featuring backdrop blur, focus trapping, Escape key dismissal, and scale entrance animations. Includes dedicated slots for headers, descriptions, content bodies, and footer actions.Drawer A slide-out side panel that docks to any screen edge with backdrop blur and touch or click dismissal. Constrains focus within the panel and supports multiple width and height tiers.DropdownMenu A contextual action menu supporting list items, separators, icon prefixes, and shortcut badges. Implements keyboard arrow navigation and closes automatically upon item activation.Popover A floating contextual container anchored to a trigger element with configurable directional placements and offsets. Handles outside click dismissals and optional pointing arrows.Toast A floating alert notification featuring an auto-dismiss timer progress bar, intent icons, action buttons, and dismiss triggers.ToastStack A fixed notification stack container positioning toasts at viewport corners with smooth insertion and removal animations.Tooltip A transient informational tooltip triggered on hover or focus with configurable delay thresholds. Automatically positions around the target element with directional arrow pointers.
Typography
Accordion A vertically stacked disclosure container supporting single or multi-panel expansion. Manages collapsed states with accessible disclosure triggers and animated content regions.Blockquote A styled quotation block featuring a left accent border, quotation mark iconography, and structured attribution fields. Ideal for highlighting editorial citations and external excerpts.Code An inline monospace code token designed for highlighting keywords, identifiers, and keystrokes within prose. Offers soft background fills and defined borders to maintain visual distinction.CodeBlock A multi-line code display container with an integrated header bar, syntax language indicator, line numbering, and clipboard copy utility. Handles horizontal overflow gracefully across all viewports.Collapsible A standalone expandable disclosure component that animates content height between open and closed states. Provides a toggle trigger with a smoothly rotating indicator chevron.Heading A semantic heading element spanning levels h1 through h6 with proportional typography sizing and optical letter tracking. Provides an optional brand gradient text treatment for high-impact titles.Text A multi-variant typographical body element supporting lead paragraphs, muted labels, subtle metadata, and inline code formatting. Includes built-in single-line truncation and font weight controls.
Motion
AnimatedButton An interactive button engineered with spring physics micro-scaling, an animated sweep light effect, and coordinate-derived click ripples. Forwards standard button events and properties while visually reinforcing tactile engagement.AnimatedCard A presentation card featuring smooth elevation lift on hover, an optional mouse-following radial border spotlight, and layered header and footer regions. Adapts gracefully across surface, glass, and raised elevation styles.BorderBeam An animated perimeter beam that continuously circles container borders with a dynamic multi-stop gradient glow.CanvasMotion A responsive background canvas rendering an interactive network of constellation particles and proximity connection lines. Automatically synchronizes with screen device pixel ratio and responds to cursor coordinates.Card3D An interactive perspective card that tracks cursor coordinates to produce dynamic 3D tilting and glare reflection highlights. Restores to resting orientation with a calibrated spring reset upon pointer exit.CardStack A physics-driven swipeable card deck with draggable throw dynamics, depth scaling, and smooth cyclic transitions between layered cards.ClickSpark An interactive micro-interaction wrapper that emits radiating particle sparks from pointer click coordinates with physics decay.ConfettiBurst A full-canvas particle celebration effect that emits colorful rotating confetti pieces with ballistic physics and gravity decay.EqualizerBars A dynamic multi-bar audio frequency visualizer with organic spring-pulsing bars, playing and paused state control, and semantic intent colors.FloatingBadge A status badge elevated with gentle sinusoidal vertical float animation and an optional pulsing live indicator dot. Ideal for feature highlights, live states, and operational health metrics.GlowCard A card container wrapped in a cursor-tracking radial spotlight border glow. Reveals high-intensity border illumination around pointer coordinates while shielding the inner content surface.LidarSweep A circular radar sweep or linear LiDAR plane scanner featuring rotating beam gradients, range rings, crosshairs, and pinging target blips.MagneticButton A physics-driven button that smoothly pulls toward cursor coordinates within its interaction perimeter and springs back upon exit.MagnetLines A dynamic directional matrix of vector line needles that orient toward pointer coordinates using real-time trigonometric tracking.Marquee An infinite horizontal scrolling ticker that loops arbitrary child content smoothly without jitter. Supports configurable duration speeds, pause-on-hover interaction, reverse direction, and gradient edge feathering.RippleEffect A tactile touch and click container that emits radial waves expanding from the exact pointer down coordinates. Calculates the furthest corner distance to ensure full-bleed ripple coverage before fading.RouteTransition A spatial page and view transition boundary container providing native mobile-like navigation presets (drill, sheet, zoom, fade) powered by Web Animations API.SharedElement A declarative hero transition wrapper that smoothly morphs spatial geometry and border radius between views using Web Animations API FLIP math.ShimmerEffect A continuous diagonal light sweep overlay designed for attention highlights and loading skeleton containers. Accepts customizable angles, cycle durations, and sweep colors.SplitReveal A dual-shutter curtain container that parts smoothly along horizontal or vertical axes to uncover underlying media or content.SpotlightCard A presentation card illuminated by a cursor-tracking radial flashlight glow and dual-layer glowing perimeter borders.StaggerList A sequenced list container that animates children into view with staggered delay increments, slide translations, and scale transitions.TextScramble A cybernetic text decoder that scrambles glyphs through random characters before resolving to the target string. Can be triggered automatically on mount, on hover interaction, or programmatically.
Blocks
BeforeAfter An interactive visual comparison slider that reveals before and after views through a draggable central divider handle.ChatBubble A conversation message bubble with dedicated user, assistant, and system roles. Supports user avatars, time indicators, delivery status tick glyphs, and bottom action triggers.FeatureGrid A responsive grid showcase organizing product highlights into structured cards with icon containers, titles, and descriptions. Supports two, three, or four-column layouts with optional border elevations.FlowCanvas An infinite interactive graph workspace featuring dot matrix, line, and cross background grids. Provides built-in drag panning, wheel zooming, and zoom control buttons with bindable coordinates and scale state.HeroBlock A prominent landing section pairing an announcement badge, large headline, description, and action button triggers. Reserves an illuminated presentation container for screenshots, interactive demos, or graphic assets.PricingCard A software subscription tier card displaying price intervals, highlighted popular badges, and comprehensive feature checklists. Renders call-to-action buttons configured for immediate checkout or plan selection.TerminalBlock An authentic command-line shell container featuring macOS window buttons, active typing cursors, and command-to-output pairing. Includes an integrated one-click copy utility for transferring all terminal commands to clipboard.Timeline A vertical chronology stream linking sequence events along a continuous spine track. Features semantic marker nodes for operational status and supports left-aligned or alternating milestone layouts.WorkflowNode A graph node card designed for visual pipeline editors and flowchart interfaces. Exposes labeled input and output connection pins, status badges with live animation indicators, and an arbitrary property inspector body.
Documentation helpers
ComponentPreview An interactive live showcase stage providing component mounting, interactive property controls, and real-time code snippet copy functionality.PropsTable A tabular API inspector displaying extracted component properties, types, default values, bindability flags, and docstrings.ThemeToggle An interactive theme mode toggle button alternating between light and dark themes with animated vector sun and moon iconography.