Installation

How to add and use extras in your project.

shadcn-svelte-extras uses jsrepo to allow you to install components into your project just like in shadcn-svelte, but with some additional features such as semantic versioning and easy updates.

Setup

Install jsrepo globally (optional but recommended):

npm i -g jsrepo

Initialize jsrepo with shadcn-svelte-extras:

jsrepo init @ieedan/shadcn-svelte-extras

Configure the paths key in your jsrepo.json file so that components, hooks, and utils are added to the correct places:

Start adding extras!

jsrepo add ui/button

MCP

jsrepo now supports MCP and you can use it to find and install extras into your project.

Add the following code to your .cursor/mcp.json file.

We also added a Cursor Rules config file for your convenience. You can add it when you initialize shadcn-svelte-extras with the jsrepo init command.

Tailwind v4

This site has been fully updated to tailwindcss v4! If you are looking for components compatible with tailwindcss@v3 see the guide below.

Tailwind v3

You can still access the tailwind v3 components by pinning the registry version to the latest tailwind v3 compatible version: