Svelte features blocks.

The 170 features blocks are landing-page sections that show what a product does: bento grids, alternating rows, tabbed and accordion previews, diagrams, comparisons and product mockups. Each pairs short copy with a small drawing of the product at work.

There are 14 groups, including Card grids, Bentos, Alternating rows, Split with mockup, Headline-led, Tabs and accordions. Some are static layouts, others respond in place: tabs, accordions, carousels, sliders and toggles that change the picture.

Bento Grid Features gives one large cell and four smaller ones, each a drawing of the product. Alternating Rows Features is the plain two-row layout with a vignette beside each. Pill Tab Expand Preview Features and Card Carousel Features let one drawing change with a control. Before After Toggle Features compares two states.

A doc comment describes the layout, then typed arrays hold the features (a title, a sentence and an icon or drawing kind) and the component renders them. The product and the copy are placeholders to replace.

The drawings are built from markup and Tailwind classes, not image files, and are decoration. Replace a drawing with an img or next/image of your screenshot, keep its frame, and let the heading and sentence carry the meaning. Give the image an alt that says what it shows.

Edit the typed arrays at the top of the file. Each item is an object with a title, a description and an icon or drawing key, and the layout maps over the array, so adding an item adds a cell. In the grid blocks check how the cells are sized, since a bento arranges a fixed number.

Icons come from lucide-react, imported by name at the top of the file. Replace an import with another lucide icon, or with your own SVG component of the same size.

Pill Tab Expand Preview Features reads a STAGES array: each stage has steps with a title, a description, badges and a drawing kind, and a segment control plus an accordion switch between them. Change the arrays for your own stages and steps, and swap each drawing for your screenshot.

Blocks that carry a call to action put one Shine Button in the header, for example Bento Grid Features. Point it at your sign-up or docs. The cells are not links unless the block says so; wrap a cell's title in a link if you want one.

This page lists 170 of the category's 170 features 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 features 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/features-accordion-faq.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/features-accordion-faq.json for Accordion FAQ Features. 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: 14 kinds of features block, led by card grids (19), metrics and charts (19), tabs and accordions (17) and documents and objects (16), and sort by popular or name. A good first look: Accordion FAQ Features, Achievement Trophy Wall Features and Added Removed Diff List Features. 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 features 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 layout, interaction and what it shows kinds.

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

Each features 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 features 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 170 features 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 features block, read it with get_block and install it on your Svelte stack.

Pass `category: "features"` to search_blocks to search only the 170 features blocks, or to list_blocks for the 14 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", "features", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.