huntabyte/shadcn-svelte

★ 8,730TypeScriptAudience · vibe coderComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((shadcn-svelte))
    What it does
      Copy-paste components
      You own the code
    Tech stack
      Svelte 5
      SvelteKit
      Bits UI
    Use cases
      Add dialogs and dropdowns
      Speed up app building
    Audience
      Vibe coders
      Svelte developers
    License
      MIT open source

mindmap root((shadcn-svelte)) What it does Copy-paste components You own the code Tech stack Svelte 5 SvelteKit Bits UI Use cases Add dialogs and dropdowns Speed up app building Audience Vibe coders Svelte developers License MIT open source

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add accessible dialogs, dropdowns, and tooltips to a Svelte app without writing them from scratch

USE CASE 2

Customize the styling of pre-built UI components to match your brand by editing the code you pasted in

USE CASE 3

Speed up building a SvelteKit app by copying only the components you need directly into your project

Tech stack

TypeScriptSvelteSvelteKitBits UI

Getting it running

Difficulty · easy Time to first run · 5min

Use freely for any purpose including commercial use, modify and share as long as you keep the copyright notice.

In plain English

shadcn-svelte is a community-built collection of UI components for Svelte, a JavaScript framework for building web interfaces. It is a port of a popular React component library called shadcn/ui, adapted to work with Svelte instead. The project is not officially affiliated with the original shadcn/ui, but the README notes that the original author gave his approval before this project was started. The idea behind both projects is different from most component libraries. Rather than installing a package and importing components from it, you copy and paste the component code directly into your own project. This means you own the code completely. You can read it, modify it, style it however you want, and it stays in your codebase. There is no dependency to keep updated, and no library version that might change behavior on you. The components are designed with accessibility in mind and are built on top of another library called Bits UI, which provides the underlying behavior for things like dialogs, dropdowns, and tooltips. The visual styling can be adjusted to match your project's design. This is primarily a starting point or a building block rather than a finished product. The intended use is to grab the components you need, put them in your codebase, and then adapt them from there. The project works with Svelte 5 and SvelteKit, and documentation is available at the project's own website. It is free and open source under the MIT license, maintained by its original author with help from community contributors. A Discord server is available for questions and collaboration.

Copy-paste prompts

Prompt 1

I'm building a SvelteKit app and want to add a dropdown menu from shadcn-svelte. Show me how to copy the component into my project and customize its colors.

Prompt 2

Using shadcn-svelte components, help me build a settings page with a modal dialog, form inputs, and a submit button.

Prompt 3

I copied a shadcn-svelte component into my project. Help me modify the styles to match my dark theme without breaking the accessibility behavior.

Prompt 4

I want to add a tooltip component from shadcn-svelte to my Svelte 5 app. Walk me through the setup and show me an example with a button trigger.

Open on GitHub → Explain another repo

← huntabyte on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.