Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CRUD blocks

Pro

Snippet Library CRUD Block for Svelte

A team's code snippet list with a language filter, favourites that float to the top, rows that open to an editable monospace field, a Copy button that counts real copies, and New snippet and Delete with Undo.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Keep the code a team reuses where anyone can find it with this snippet library for Svelte with Ark UI. Eight snippets are rows with a title, a language word and "Copied 12 times"; a language filter above them narrows the list and shows how many each language has, and a star floats a favourite to the top. A row opens in place with a Collapsible to a title Input, a language Native Select and the code in a monospace Textarea that keeps the direction of code in any page. Copy is a Copy Button that really writes to the clipboard and adds one to the count. New snippet is the one Shine Button and adds a draft row at the head, already open; Delete leaves a line in the foot with Undo. For team wikis, internal tools and any list of text people copy.

FAQ

How do I load my own snippets?

Edit START: each snippet has an id, title, lang, code, copies and favourite. Languages come from LANGS, and the filter chips and their counts are built from it.

Does Copy really copy?

Yes. The Copy Button writes the code in the field to the clipboard and the count goes up by one once the browser says it worked. If the browser refuses (no permission, or a page not served over HTTPS) the foot says so and the count stays.

Why does the code keep its direction?

Code is not prose: its brackets and operators read wrong when mirrored. The field has dir="ltr", a monospace face, no spell checking and no line wrapping, in a page of either direction.

How do favourites float to the top?

floatedOf lists the favourites first and the rest after, each group in the order of the list, on every render. Starring keeps keyboard focus on the star even though the row moves.

What stays local, and how do I wire a real library?

Snippets live in state in this tab and a reload brings the first eight back; the counts are not shared. In your app store a snippet per row, increment copies from copied on the server so the number is shared, and keep Undo as a soft delete.

How does it look on a phone?

The language and the copy count sit under the title, the editor stacks its title and language, and the code field keeps its height and scrolls sideways instead of wrapping.

All 100 crud blocks