awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com

SvelteKit UI Component Libraries

Ranking updated Jun 30, 2026

For a UI component library for SvelteKit projects, the first results are skeletonlabs/skeleton, shoelace-style/shoelace (Shoelace is a framework-agnostic web component library with TypeScript, theming, accessibility, and dark mode, so it works as a UI component library in SvelteKit even though it lacks SvelteKit-specific integration) and huntabyte/shadcn-svelte. melt-ui/melt-ui and radix-ui/themes round out the shortlist. Compare the match explanations and check the project documentation against your requirements.

Collection of pre-built interface elements and design systems optimized for building SvelteKit web applications.

SvelteKit UI Component Libraries

Find the best repos with AI.We'll search the best matching repositories with AI.
  • skeletonlabs/skeletonskeletonlabs avatar

    skeletonlabs/skeleton

    5,989View on GitHub↗

    Skeleton is a design system and accessible UI component library built on Tailwind CSS. It provides a collection of pre-built interactive components with built-in accessibility and state management, alongside a CSS custom properties theme engine that enables runtime theme switching and dark mode support. The project distinguishes itself through its adaptive design system approach, using CSS custom properties to create themeable tokens that integrate directly with Tailwind's utility-first framework. This allows developers to build visual design systems with customizable colors, fonts, and aesth

    Skeleton is a design system and accessible UI component library built for SvelteKit using Tailwind CSS, offering theming via CSS custom properties, TypeScript support, dark mode, and a collection of pre-built interactive components with built-in accessibility — exactly what you need to accelerate SvelteKit development.

    TypeScriptCSS Variable ThemingAccessible ComponentsAccessible UI Components
    View on GitHub↗5,989
  • shoelace-style/shoelaceshoelace-style avatar

    shoelace-style/shoelace

    13,860View on GitHub↗

    Shoelace is a web component UI library consisting of a suite of accessible, framework-agnostic user interface elements. It provides a collection of custom element components and reusable HTML tags that encapsulate style and behavior to work across any JavaScript framework or plain HTML pages. The system is designed as a themable UI component system, utilizing CSS variables to manage visual themes and dark mode support. This allows for the implementation of custom design systems and a consistent visual language across web environments. The library covers broader capabilities in accessible int

    Shoelace is a framework-agnostic web component library with TypeScript, theming, accessibility, and dark mode, so it works as a UI component library in SvelteKit even though it lacks SvelteKit-specific integration.

    TypeScriptAccessibilityCSS Variable Theming
    View on GitHub↗13,860
  • huntabyte/shadcn-sveltehuntabyte avatar

    huntabyte/shadcn-svelte

    8,341View on GitHub↗

    shadcn-svelte is a collection of accessible and customizable user interface elements for Svelte applications. Rather than being distributed as a traditional dependency, these components are provided as source code that is copied directly into the project codebase. The library utilizes a registry-based distribution system, allowing users to install specific UI blocks and components via a command-line interface. This system uses JSON metadata to define dependencies and file paths, while a bootstrapping process automates the configuration of styles and CSS variables. The project integrates Tail

    shadcn-svelte is a collection of accessible, customizable UI components built specifically for Svelte and SvelteKit, distributed as source code with Tailwind CSS theming and TypeScript support — exactly the kind of reusable component library that accelerates SvelteKit development.

    TypeScriptCSS Variable ThemingAccessible UI ComponentsSvelte UI Libraries
    View on GitHub↗8,341
  • melt-ui/melt-uimelt-ui avatar

    melt-ui/melt-ui

    4,167View on GitHub↗

    Melt UI is a headless UI library for Svelte that provides a collection of unstyled, accessible component builders. It functions as an accessible component framework and state management tool, offering the logic and state required to build interface elements that follow WAI-ARIA standards and support keyboard navigation without imposing specific visual styles. The library features a floating element positioning engine that manages the placement of popovers, tooltips, and menus relative to trigger elements. This system utilizes portals to prevent layout clipping and incorporates automatic overf

    Melt UI provides headless, accessible component builders specifically for Svelte (and thus SvelteKit), giving you reusable building blocks to accelerate development, though its unstyled approach means theming and dark mode require your own styling.

    TypeScriptSvelte UI Libraries
    View on GitHub↗4,167
  • radix-ui/themesradix-ui avatar

    radix-ui/themes

    8,490View on GitHub↗

    This project is an accessible UI component library and themed design system. It provides a collection of pre-made user interface components designed to meet accessibility standards and maintain a consistent visual identity across web applications. The system includes an interactive theme previewer, which allows for the adjustment and testing of visual settings in real time within a running application. It covers global theme management and design system implementation through root configurations and a token-driven approach. The library supports rapid frontend prototyping by offering a set of

    This is a React-based component library with theming and accessibility, not built for or compatible with SvelteKit, so it does not fit your need for SvelteKit-specific components.

    TypeScriptCSS Variable ThemingAccessible UI Components
    View on GitHub↗8,490
  • youzan/vantyouzan avatar

    youzan/vant

    24,323View on GitHub↗

    Vant is a mobile UI library and component framework for Vue, providing a collection of lightweight, reusable interface elements optimized for small screens and touch interactions. It serves as a mobile component library and accessible web UI kit designed to integrate with Vue's reactivity and state management. The framework functions as a themable design system, allowing for visual branding and dark mode support through customizable theme variables. It includes built-in tools for internationalization to localize user interfaces across different geographic regions. The library covers a broad

    Vant is a mobile UI component library built for Vue, not SvelteKit, so it does not provide the SvelteKit integration required for this search.

    TypeScriptCSS Variable ThemingDark Mode SupportAccessible UI Components
    View on GitHub↗24,323
  • elastic/euielastic avatar

    elastic/eui

    6,337View on GitHub↗

    EUI is a React UI component library and design system framework. It provides a collection of reusable, typed interface components and visual guidelines to ensure a unified user experience across web application layouts. The project functions as a themed UI toolkit, enabling the management of visual aesthetics and the ability to toggle between light and dark modes. It incorporates a CSS-in-JS styling library for defining custom styles and rulesets for individual application elements. The framework covers broad capability areas including design system implementation, custom interface styling,

    EUI is a design system and UI component library for React, not for SvelteKit, so it does not match the requirement for SvelteKit-specific components.

    TypeScriptDesign Token ThemingDark Mode Toggles
    View on GitHub↗6,337
  • ariakit/ariakitariakit avatar

    ariakit/ariakit

    8,573View on GitHub↗

    Ariakit is a headless component library and accessible UI component toolkit. It provides a set of unstyled web components with built-in accessibility patterns to ensure that screen readers and keyboard navigation function correctly. The project includes an adaptive color engine that calculates high-contrast text and dynamic surface colors for light and dark modes. It also features a concentric layout engine for computing nested padding, margins, and border radii for circular interface elements, alongside a design token system for managing global CSS variables. The toolkit covers broad capabi

    Ariakit is a headless component library built for React, not SvelteKit, so it lacks the SvelteKit integration required for this search, though it does offer strong accessibility, theming, and dark mode support.

    TypeScriptCSS Variable ThemingAccessible UI Components
    View on GitHub↗8,573
  • uswds/uswdsuswds avatar

    uswds/uswds

    7,116View on GitHub↗

    The United States Web Design System is a government design system and accessible UI framework. It provides a collection of standardized CSS and JavaScript components, along with a CSS component library, specifically designed for building consistent federal government websites. The system allows for custom CSS theme development through the use of design tokens for colors, spacing, and typography. Users can customize visual themes and compile custom styles to maintain a unified brand identity across multiple web properties. The framework covers responsive interface design and web accessibility

    USWDS is a complete government design system with accessible UI components and theming, but it is a generic CSS/JS framework — not built for or compatible with SvelteKit, and lacks the TypeScript support and Svelte-specific integration you need.

    SCSSCSS Variable ThemingAccessible UI Components
    View on GitHub↗7,116
  • gluestack/gluestack-uigluestack avatar

    gluestack/gluestack-ui

    4,931View on GitHub↗

    gluestack-ui is a cross-platform React component library built with Tailwind CSS. It provides over 30 pre-built, accessible components that can be installed by copying their source files directly into a project, giving developers full control over customization without external runtime dependencies. Every component implements WAI-ARIA patterns, keyboard navigation, and screen reader support out of the box. A key differentiator is the copy-paste architecture: rather than a traditional package dependency, component source code is placed in the project, allowing direct editing and eliminating ve

    gluestack-ui is a cross-platform component library built for React and React Native, not for SvelteKit, so it does not provide the SvelteKit integration required for this search.

    TypeScriptDark Mode SupportDesign Token ThemingAccessible UI Components
    View on GitHub↗4,931
  • unovue/reka-uiunovue avatar

    unovue/reka-ui

    6,574View on GitHub↗

    Reka UI is a headless UI component library built for Vue and Nuxt, not for SvelteKit, so it does not meet the core requirement of SvelteKit integration.

    VueAccessible UI ComponentsAccessibleKeyboard Navigation
    View on GitHub↗6,574
  • haoziqaq/varlethaoziqaq avatar

    haoziqaq/varlet

    5,324View on GitHub↗

    Varlet is a Vue 3 material design component library and cross-platform UI framework. It provides a collection of reusable interface elements based on Material Design 2 and 3 standards for building responsive web applications. The library features integrated support for internationalization and multi-language content localization. It includes a theming system that utilizes CSS variables to enable dark mode, color scheme toggling, and custom branding. The toolkit is designed for server-side rendering to improve initial page load speeds and search engine optimization. It includes responsive com

    Varlet is a Vue 3 material design component library, not built for or compatible with SvelteKit, so it does not match the search for SvelteKit-focused UI components.

    VueCSS Variable ThemingDark Mode Support
    View on GitHub↗5,324
Compare the top 10 at a glance
RepositoryStarsLanguageLicenseLast push
skeletonlabs/skeleton6KTypeScriptMITJun 23, 2026
shoelace-style/shoelace13.9KTypeScriptMITMay 14, 2026
huntabyte/shadcn-svelte
8.3K
TypeScript
mit
Feb 20, 2026
melt-ui/melt-ui4.2KTypeScriptMITSep 30, 2025
radix-ui/themes8.5KTypeScriptMITApr 11, 2026
youzan/vant24.3KTypeScriptMITJun 15, 2026
elastic/eui6.3KTypeScriptNOASSERTIONJun 26, 2026
ariakit/ariakit8.6KTypeScript—Jun 23, 2026
uswds/uswds7.1KSCSSNOASSERTIONJun 23, 2026
gluestack/gluestack-ui4.9KTypeScript—Feb 20, 2026

Related searches

  • a component library for Vue 3 applications
  • a collection of reusable UI components
  • an accessible React component library for UI
  • a library of UI components for React
  • a React Native UI component library
  • a collection of components for SwiftUI development
  • a design system for building UI components
  • a collection of UI components for Lit