# SvelteKit UI

> Svelte 5 and SvelteKit 3 component library with reactive managers, adaptive themes, and accessible controls.

Package: sveltekit-ui 1.1.87. Node.js 24+. Install: npm install sveltekit-ui.

## When to use

Use for Svelte/SvelteKit forms, navigation, content, media, charts, and tables. Managers own state and behavior; components render them. Prefer the existing public controls and consult their configuration, methods, returned state, required values, and allowed options before coding.

## Start here

- [Use with AI and coding conventions](https://www.sveltekit-ui.com/ai): setup, paired feature managers, Button navigation/icons, themes, sizing, SSR/browser lifecycle, and backend boundaries. Also accepts Accept: text/markdown.

- [Complete reference](https://www.sveltekit-ui.com/llms-full.txt): the guide plus every documented public component, all API sections, notes, options, and runnable examples.

- [Package source and releases](https://github.com/upppllc/sveltekit-ui): compare the installed version with the current docs.

## Components

Each component page accepts Accept: text/markdown for its complete reference without JavaScript or clipboard access.

- [Alert](https://www.sveltekit-ui.com/components/alert): Feedback. Manages display of alerts, including auto-delete and optional callbacks

- [Attachment](https://www.sveltekit-ui.com/components/attachment): Media. Displays a base64 attachment with a download action and optional image, audio, or JSON preview.

- [Audio](https://www.sveltekit-ui.com/components/audio): Media. Manages playback of audio, including metadata, playback rate, volume, and skip time

- [Audio Editor](https://www.sveltekit-ui.com/components/audio_editor): Media. Manages audio metadata editing, allowing users to seed data, modify tags, and optionally generate new audio from text

- [Auth Code Input](https://www.sveltekit-ui.com/components/auth_code_input): Input controls. renders a 6-digit numeric code input, typically used for one-time passcodes or verification codes

- [Breadcrumbs](https://www.sveltekit-ui.com/components/breadcrumbs): Foundations. manages a breadcrumb navigation array, providing back, slash, and clickable segment buttons

- [Button](https://www.sveltekit-ui.com/components/button): Foundations. creates a fully customizable button with optional icon, interactive states, and configurable styling

- [Chart](https://www.sveltekit-ui.com/components/chart): Data & content. Renders a time-series chart with multiple frames, shared y axes, candlesticks, points, paths, or straight lines; supports pan, zoom, and hover inspection.

- [Chart Input](https://www.sveltekit-ui.com/components/chart_input): Input controls. Edits chart frames, shared y axes, dataset mappings, and colors in a Chart Builder popover, returning a configuration for Chart.

- [Checkbox](https://www.sveltekit-ui.com/components/checkbox): Input controls. creates a checkbox, toggle, or dark theme switch with optional label, error states, and custom on/off values

- [Code](https://www.sveltekit-ui.com/components/code): Data & content. renders preformatted code content with a copy button

- [Color](https://www.sveltekit-ui.com/components/color): Data & content. displays a color swatch, optionally with details about its oklch components

- [Color Input](https://www.sveltekit-ui.com/components/color_input): Input controls. provides a UI to select or edit an oklch-based color with optional opacity, chroma, and hue controls

- [Confetti](https://www.sveltekit-ui.com/components/confetti): Feedback. Creates a confetti animation with configurable item count, size, and random spread. There is a confetti component already in the Layout componet if full screen confetti is desired

- [Content](https://www.sveltekit-ui.com/components/content): Data & content. manages a nested tree of typed components, allowing dynamic rendering based on type_ids and attributes

- [Content Input](https://www.sveltekit-ui.com/components/content_input): Input controls. offers a panel builder for creating and editing a nested content structure (ASTC format) with interactive insertion, removal, and attribute editing of various node types

- [Cron Input](https://www.sveltekit-ui.com/components/cron_input): Input controls. provides a popover-based UI for setting a cron expression (minute, hour, day-of-month, month, and day-of-week)

- [Data Type Input](https://www.sveltekit-ui.com/components/data_type_input): Input controls. Builds a structured data-type descriptor with object properties, uniform collections, and optional foreign-row table references.

- [Dropdown](https://www.sveltekit-ui.com/components/dropdown): Input controls. provides a dropdown or horizontal selector interface to select from an array of options, with optional search support and multi-selection

- [Email Address](https://www.sveltekit-ui.com/components/email_address): Data & content. displays an email address with quick copy and mailto actions

- [Error X](https://www.sveltekit-ui.com/components/error_x): Feedback. Animated X icon used to indicate errors or issues, with customizable appearance and animation.

- [Eye](https://www.sveltekit-ui.com/components/eye): Foundations. Interactive eye icon for toggling visibility, such as showing or hiding passwords. Supports customization of color and stroke width, and optional state binding.

- [File Input](https://www.sveltekit-ui.com/components/file_input): Input controls. allows users to select or drop files; optionally multiple, with drag-and-drop area and custom validation

- [Hamburger](https://www.sveltekit-ui.com/components/hamburger): Foundations. Animated hamburger menu icon that toggles to an X. Supports customizable colors, stroke width, state binding, and callbacks.

- [Horizontal Scroll Box](https://www.sveltekit-ui.com/components/horiz_scroll_box): Foundations. A horizontally scrollable container with optional left and right scroll arrows. Supports dynamic content and smooth scrolling interactions.

- [Icon](https://www.sveltekit-ui.com/components/icon): Foundations. renders an inline svg icon from a fixed set of icon_ids, with optional color, rotation, and animation

- [Icon Input](https://www.sveltekit-ui.com/components/icon_input): Input controls. lets users pick an icon (and optionally its color), displaying a searchable list of available icons

- [Image](https://www.sveltekit-ui.com/components/image): Media. renders an image with optional quick placeholder image, background blur, and loader, also dynamically calculates aspect ratio

- [Image Editor](https://www.sveltekit-ui.com/components/image_editor): Media. provides a comprehensive interface for editing images (crop, resize, filters, AI-based transformations, file export) within a popover or inline panel

- [Image Slider](https://www.sveltekit-ui.com/components/image_slider): Media. creates a comparison slider between two images, allowing the user to slide and compare before/after views

- [Info Box](https://www.sveltekit-ui.com/components/info_box): Feedback. Colored box used for errors, warnings, or other notes

- [JSON](https://www.sveltekit-ui.com/components/json): Data & content. manages json data for viewing and (optionally) editing, with features like expanding/collapsing nested objects and uploading/importing data

- [Labeled Item](https://www.sveltekit-ui.com/components/labeled_item): Foundations. Displays a labeled section with an optional tooltip and associated content. Useful for form fields, information displays, or any paired label-content scenarios.

- [Layout](https://www.sveltekit-ui.com/components/layout): Foundations. manages a high-level app layout with nav bar, optional full navigation panel, confetti effects, dark theme toggling, and more

- [Link](https://www.sveltekit-ui.com/components/link): Foundations. Renders a hyperlink (`<a>`) with optional popover preview. Can handle internal (SvelteKit `goto`) or external links, show a QR, copy link, etc.

- [Loading Success](https://www.sveltekit-ui.com/components/loading_success_div): Feedback. A container to display loading, success, or error states with an optional message. It provides visual feedback for processes like loading or completion.

- [Loading Wheel](https://www.sveltekit-ui.com/components/loading_wheel): Feedback. A circular spinner component to indicate loading or processing states. It's lightweight and customizable for various layouts and use cases.

- [Location](https://www.sveltekit-ui.com/components/location): Data & content. Displays a static map (using Apple MapKit) pinned to a specific location. Optionally in a popover or inline.

- [Location Input](https://www.sveltekit-ui.com/components/location_input): Input controls. Selects a geographic location using MapKit JS, optionally with search and filters for POIs/countries/addresses. Outputs place details.

- [Number](https://www.sveltekit-ui.com/components/number): Data & content. Displays and formats a numeric value with options for rounding, shorthand notation, separators, dynamic coloring based on value, and an optional progress bar.

- [Phone Number](https://www.sveltekit-ui.com/components/phone_number): Data & content. Displays a phone number with an optional button to initiate a call. Combines country code and main number, and handles dialing via a clickable button.

- [Phone Country Code](https://www.sveltekit-ui.com/components/phone_country_code): Input controls. Selects a numeric international country calling code from the library's country list.

- [Popover](https://www.sveltekit-ui.com/components/popover): Foundations. Displays content in a floating panel, either as a dropdown anchored to an element or a modal (center, panel, or full screen).

- [QR Code](https://www.sveltekit-ui.com/components/qr): Data & content. Generates a stylized QR code with optional image in the center, supporting download and copying features.

- [QR Input](https://www.sveltekit-ui.com/components/qr_input): Input controls. Edits QR code content, dimensions, colors, and download controls with a live preview applied by Set Changes.

- [Slider](https://www.sveltekit-ui.com/components/slider): Input controls. Displays a styled slider for numeric input, supporting single or multiple thumbs, highlighting ranges, and optional 'Set Null'.

- [Spacer](https://www.sveltekit-ui.com/components/spacer): Foundations. A customizable spacer component for adding vertical or horizontal space with optional decorative borders.

- [Storage Picker](https://www.sveltekit-ui.com/components/storage_picker): Input controls. Selects local files or application-provided storage records, with folders, previews, grid/list views, and optional multiple selection.

- [Success Check](https://www.sveltekit-ui.com/components/success_check): Feedback. Displays a success checkmark with animations to indicate successful actions or states.

- [Table Advanced](https://www.sveltekit-ui.com/components/table_advanced): Data & content. Builds a dynamic and extendable table layout with editable rows/columns, sorting, pagination, bulk-selection, inserting rows, uploading bulk rows, exporting CSV/JSON, and more.

- [Tag](https://www.sveltekit-ui.com/components/tag): Data & content. Displays a styled tag record or selects the first tag whose predicates match a dynamic value.

- [Text Array Input](https://www.sveltekit-ui.com/components/text_array_input): Input controls. Builds an input for managing an array of text items. The user enters a string in a text field and clicks a button to add it to the array. They can reorder items (shift them up or down) or delete them. Optionally displayed in a popover when `is_popover` is true.

- [Text Input](https://www.sveltekit-ui.com/components/text_input): Input controls. Builds an input (single or multi-line) with support for validations, placeholders, error messaging, toggling password visibility, optional popover editing, and more.

- [Time](https://www.sveltekit-ui.com/components/time): Data & content. Displays a formatted time value with options for text color customization, format, granularity, and timezone adjustments.

- [Time Input](https://www.sveltekit-ui.com/components/time_input): Input controls. Builds a time/date/datetime/period selection input with flexible granularity, calendar picker, optional time zone support, and more.

- [Tooltip](https://www.sveltekit-ui.com/components/tooltip): Feedback. Displays a tooltip when hovering or focusing over a target content, with dynamic positioning based on available screen space.

- [Transparent Background](https://www.sveltekit-ui.com/components/transparent_background): Foundations. A component that renders a dynamic grid-based transparent background, with alternating colors for squares, behind the provided content.

- [Typing Dots](https://www.sveltekit-ui.com/components/typing_dots): Feedback. A simple animation indicating typing, represented by three animated dots.

- [Variable Path Input](https://www.sveltekit-ui.com/components/variable_path_input): Input controls. Selects a named variable and edits a path through object properties, numeric indexes, or nested variable-based path segments.

- [X Post](https://www.sveltekit-ui.com/components/x_post): Media. Embeds an X (formerly Twitter) post given its post ID, handling script loading and rendering. Supports internal and external links with optional previews and QR codes.

- [X Follow](https://www.sveltekit-ui.com/components/x_follow): Media. A button linking to an X (Twitter) profile with a customizable size and handle.

- [YouTube Follow Button](https://www.sveltekit-ui.com/components/youtube_channel_button): Media. A button linking to a Youtube Channel with a customizable size and handle.

- [YouTube Video](https://www.sveltekit-ui.com/components/youtube_video): Media. Embeds a YouTube video based on the provided video ID, handling loading states and error messages. Supports theme customization and responsive resizing.