shadcn.io is not affiliated with official shadcn/ui
Logo Lockups Gallery Block for React
Four drawn logo lockups in framed cells with a Show clear space toggle that lays the margin over every lockup, and real SVG and PNG downloads under each.
Installation
Overview
A logo kit for React with Base UI. A centred header with a Show clear space toggle sits over four lockups (Stacked, Horizontal, Mark only and Outline) in a two-by-two grid of framed cells with overshoot. Each lockup is drawn from code: a ring with north, east, south and west ticks round a T, then the wordmark in a serif stack. The toggle lays the clear zone over all four: the artwork's box, a margin of one unit (x) all round it and a square of x at each corner; a tile never changes size when it is on. Under each tile two real downloads: SVG, the markup as written, and PNG, drawn through a canvas at four times the size. The wordmark is text, not outlined letters, so replace it with your own outlined artwork before shipping. It's built from Guides, Toggle and DownloadTrigger. For brand pages and press kits.
FAQ
What is the clear space?
The margin kept free of other things round a logo, here one unit (x) on every side, where x is a quarter of the mark's height. The toggle draws the artwork's box, the margin and a square of x at each corner so a designer can see the rule.
Are the downloads real?
Yes. SVG saves the markup the block draws, with a transparent ground and currentColor strokes, so it renders black in most viewers. PNG draws that same file onto a canvas at four times its size and saves the result.
Why is the wordmark text?
To keep the file short and readable. The text uses a serif stack (Georgia, then Times), so it looks a little different on each machine. A real kit ships outlined letters; paste yours into the words data or the drawing.
Can I use my own mark?
Replace the MARK paths (a list of stroked paths in a 48 by 48 box) and the words of each lockup. The overlay and the downloads follow the new numbers, because they come from the same data.
Related
- Pro
Brand kit tabs About
Press and recognitionA brand kit for a brand-kit product: tabs for the mark, the theme's own colour tokens with a copy button, a type specimen, and do and don't pairs.
- Pro
Color Token Grid Gallery
Design assetsTwelve of the theme's own colour tokens as swatches on shared hairlines, each with its name and its painted value in the format you choose, and a Copy button that copies exactly that text.
- Pro
Type Tester Gallery
Design assetsA preview text field, a Weight slider, a Size slider and a Case control set one line in the theme's Sans, Serif and Mono stacks, above a table of the nine weights that marks the current one.
- Pro
Component Catalogue Gallery
Design assetsTwelve components drawn in plain boxes on shared hairlines, each with a status badge and a variant count, a status filter, and a Show variants switch that turns every drawing into its list of variants.
- Pro
Featured Focal Diagram Logos
Flagship customerA hub-and-spokes diagram for a webhook-delivery tool: the flagship customer at the centre of an inset frame, three supporting customers on each side, and hairline curves running to each.
- Pro
Mood Board Gallery
Walls and tablesA pinboard of twelve pieces of five kinds (pictures, paint chips, materials, words and type) pinned a degree off square, with a lens that dims the other kinds without moving anything.