Svelte gallery blocks.

The 100 gallery blocks are sections that show work: lightboxes, carousels, masonry and mosaic grids, filters, before and after comparisons and zoomable views. Each lays out a set of pictures with captions and the controls to browse them.

They are grouped into 11 kinds: Hairline grids, Masonry and mosaic, Walls and tables, Rows and bands, Carousels and slides, Stage and thumbnails, and more. Some are layouts only, others let visitors filter, reorder, select, compare or annotate the pictures.

Lightbox Gallery opens each picture in a viewer dialog with arrows, a counter and swipe. Sortable Masonry Gallery sets pictures of mixed ratio in columns. Filterable Gallery narrows by chips with counts. Drag To Reorder Gallery lets visitors rearrange. Stepped Before and After Gallery compares two states.

Most gallery blocks draw their pictures: a small scene kit of shapes and greys stands in for photographs. A typed array holds each picture's title, caption and description, and the component lays them out.

In the blocks that draw their pictures, a comment shows the swap: replace the drawn scene with an img that fills its box, such as img alt empty, className size-full object-cover and src from the picture's data. Add a src field to the picture type and keep the title and caption beside it.

Use next/image with fill in place of the plain img, inside a frame that keeps its aspect ratio, and object-cover so it fills the box. The drawn scenes take a ratio per picture, so store the same ratio with each photo and the layout will not shift.

Lightbox Gallery has arrow keys, Home and End, swipe on touch and Escape, returns focus to the picture last shown and reads out a counter such as 3 of 9. In the viewer use an img with the picture's description as alt text and object-contain so the whole picture shows.

Drag To Reorder Gallery works with a pointer drag, or Space to pick up, arrow keys, Home and End to move, Space to drop and Escape to cancel, plus Move earlier and Move later buttons for touch. It uses pointer capture and key handlers, not a drag library. The order lives in state: save it to your database where the order changes.

Filterable Gallery filters a typed list by a category on each picture and counts each chip from the data. Give your images a category field, build the chips from the distinct values, and keep the polite status line that says how many are showing.

This page lists 100 of the category's 100 gallery blocks for Svelte. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The Svelte gallery blocks are the React ones ported to Svelte, on Ark UI's Svelte primitives. They keep the layout, the copy and the theme tokens, and install with shadcn-svelte (/r/svelte/gallery-accordion.json).

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens. Svelte needs svelte @ark-ui/svelte lucide-svelte installed once, and the CLI fetches the components a block imports.

Open a block and copy its command: `shadcn-svelte@latest add` with the block's registry URL, such as /r/svelte/gallery-accordion.json for Expanding Strips Accordion Gallery. Run the project setup once first, and the code is yours to edit.

The block's file and the components it imports, installed before it, each as its own registry item. Nothing else changes in your project.

Use the filters above the grid: 11 kinds of gallery block, led by hairline grids (13), walls and tables (10), stage and thumbnails (10) and filter, sort and tabs (10), and sort by popular or name. A good first look: Expanding Strips Accordion Gallery, Phone Frame Carousel Gallery and True Scale Artwork Gallery. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a gallery block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the layouts, viewers and interactions kinds.

Open its page and use the full-screen viewer (/view/gallery/svelte/accordion) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each gallery block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Ark UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the gallery blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 gallery blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a gallery block, read it with get_block and install it on your Svelte stack.

Pass `category: "gallery"` to search_blocks to search only the 100 gallery blocks, or to list_blocks for the 11 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "gallery", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.