Svelte logos blocks.

The 100 logos blocks show who already trusts your product: strips under a hero, scrolling marquees, walls, bento cells with case studies, metrics and filtered grids. They are social proof sections, built around a list of customers.

There are 11 groups: Strips, Marquees, Multi-row marquees, Walls, Splits, Bentos, and more. The simple ones are a row or a wall of marks. Others add a quote, a metric, a flagship customer, filters by industry or a map.

Dark Inset Single Marquee Logos and Dual Row Marquee Logos scroll the marks, and the dual one has a button that pauses both rows. Bento Sparkline Logos pairs customers with a trend line and a story. Dot Grid Map Logos shows where customers are. Pick a strip when space is short and a bento when you have results to quote.

Each customer is an object in a typed array, with a name, an icon and the lettering that sets its wordmark, and a small component draws the wordmark. The customers are made-up companies, so the section has no real brand marks in it.

Edit the customer array, then replace the wordmark component with an img or an inline SVG of each customer's logo, from their brand page and with their permission. The icon and lettering fields exist only to draw the placeholder, so you can delete them once the real marks are in.

The marquee blocks use the shared Marquee component, which takes a speed prop (50 by default; Dark Inset Single Marquee Logos passes 30). Change that number, and keep a pause button where the block has one. Under reduced motion the rows stop and can be scrolled by hand.

Use a lightweight single-colour version of each logo (an SVG with currentColor, or a grey filter on an img) so the row follows the theme and keeps one visual weight. Give each logo an alt with the company name, or keep the name as visible text.

The bento, quote and metric blocks keep each customer's story and numbers in the same typed array as the name. Replace those fields with real results you can show and permission to use; the headline sentence is worked out from the data in some, so check it still reads true.

This page lists 100 of the category's 100 logos 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 logos 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/logos-bento-dark-variant.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/logos-bento-dark-variant.json for Bento Sparkline Logos. 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 logos block, led by walls (12), strips (11), metrics (11) and multi-row marquees (10), and sort by popular or name. A good first look: Bento Sparkline Logos, Bento Featured Case Study Logos and Five Cell Bento Logos. 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 logos 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 and built around kinds.

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

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

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