Solid map blocks.

The 100 map blocks are location sections built on a drawn map, not map tiles: pins, routes, regions, rings and location pickers for store finders, delivery rounds, flights, coverage and more. Store Locator Clusters Map, Route Planner Map and Flight Routes Map also pair the drawing with a list or table that carries the same information, so the map is never the only way in.

There are 16 groups: Rings and radius, Signal and service areas, Shops and food, Services nearby, Homes and property, Travel and outdoors, and more. They go from shops and property to fleets, freight, regions and disasters.

Store Locator Clusters Map pans, zooms and merges stores into count circles. Route Planner Map lists stops in order and re-derives distance and arrival times. Flight Routes Map draws arcs between cities on a dot world with a table beside it. ATM Finder Map ranks places by a fee worked out from typed rules.

Most blocks draw an invented town as SVG, with pins at x and y positions in drawing units, so they are not real geography. Flight Routes Map is the exception that stores real latitude and longitude for its cities and projects them onto a dot world. The places in the data are sample data.

The blocks import no map library, so you choose one (Leaflet, MapLibre, Mapbox or Google Maps) and render it in place of the drawn stage. Keep the list, filters and panels, and have each marker use the same record. A pin's position is x and y in the drawing, so add latitude and longitude to your records and drop those.

Replace the typed list of places with your own records (a name, a position and the fields the list shows). Store Locator Clusters Map groups nearby stores by distance in the drawing, which is a greedy merge, so use your map library's clustering when you move to real coordinates.

Route Planner Map computes distance from straight legs in drawing units at an assumed speed plus a dwell time per stop. For real distances and arrival times, call a routing API and put its results in the same stop rows, keeping the Move up, Move down and Remove buttons.

Store Locator Clusters Map pans with the pointer or arrow keys, zooms with plus and minus and resets with 0, and has buttons for touch. Pressing a row centres its store. The lists and tables are the keyboard route, so keep them beside any real map and make sure they stay in sync.

This page lists 100 of the category's 100 map blocks for Solid. 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 Solid map blocks are the React ones ported to Solid, on Ark UI's Solid primitives. They keep the layout, the copy and the theme tokens, and install with shadcn (/r/solid/map-agricultural-fields.json).

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

Open a block and copy its command: `shadcn@latest add` with the block's registry URL, such as /r/solid/map-agricultural-fields.json for Agricultural Fields Map. 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: 16 kinds of map block, led by homes and property (9), travel and outdoors (9), shops and food (8) and sea, air and freight (8), and sort by popular or name. A good first look: Agricultural Fields Map, Air Quality Map and Airport Terminal Map. 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 map 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 coverage and reach, finders and places and routes and logistics kinds.

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

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

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