shadcn.io is not affiliated with official shadcn/ui
Logo Lockups Gallery Block for Vue
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 Vue with Ark 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.