shadcn.io is not affiliated with official shadcn/ui
Dotted Corner Card Grid Features Block for React
Six schematic cards for a diagramming tool, each a small line diagram of a queue, fan-out, funnel, retry loop, cache or gate with a dot travelling its path, in cells that end in corner marks.
Installation
Overview
A schematic feature grid for React with Base UI. Six cards, each a blueprint plate with a small line diagram: a queue, a fan-out, a funnel, a retry loop, a cache in a request path and a gate that lets one request through and turns another back. A dot travels along each diagram's path. Under every plate sit a title and one sentence. The cards are separate cells whose solid lines run past their corners and end in + marks, set two rem apart: three across from lg, two from sm, one column on a phone. The slug keeps the older name, but the lines are solid and the corners are plus marks like the rest of the kit; the blueprint look comes from the dot grid inside each plate. It's built from Guides and SVG, with your theme's tokens for every colour. For diagramming, workflow and architecture tools.
FAQ
How do I add or change a diagram?
Each diagram is a small SVG component at the top of the file (QueueDiagram, FanOutDiagram…) on a 200 by 112 canvas, and each card is one Schematic with the diagram as its child. Draw yours with the shared class constants (LINE for connectors, NODE for boxes) and add a Schematic to the list. Keep the count a multiple of three.
How does the travelling dot work?
It is a small circle with an SVG motion animation along the diagram's path, so there is no script. Several diagrams run two dots at different speeds, one for a request that passes and one for a request that stops. The dot is hidden under reduced motion, and the diagram stays complete without it. The animation is decorative and the plates are hidden from assistive technology.
Why are the corners plus marks and not dots?
Every block in the kit uses one line style, solid hairlines with + marks, so a stack of blocks reads as one drawing. The marks sit on the crossings of each card's overshooting lines, which gives the blueprint corner look without dashes or dots.
What about right-to-left?
The diagrams mirror with the page, so a flow that runs from start to end reads in the right direction. The dots follow the mirrored paths.
Related
- Pro
Architecture Flow Diagram Features
Diagrams and mapsA request path for an edge-routing layer: five hops on one wire with a dot travelling along it, the time each hop spends under it, and a latency-budget bar that sums them.
- Pro
Layered Stack Diagram Features
Diagrams and mapsA flat stack ladder for an app platform: five bars from interface to infrastructure, each a step wider, linked by hover and focus to a list of what sits in every layer.
- Pro
Wireframe Sketch Grid Features
Live controlsA features section for a design-handoff tool: a 2 by 2 of framed screens in shared hairlines, each with a Switch that cross-fades a dashed greyscale wireframe into the solid screen it became.
- Pro
Lab Report Specimen Cards Features
Documents and objectsFour specimen cards in a two by two of framed cells: each with a mono code, a verdict badge, a small drawing plate of its measurements and a data list of three readings.
- Pro
Browser Chrome Card Grid Features
Card gridsSix starter pages for a site builder, each card a browser window with three dots and an address pill over a greyscale skeleton of a pricing page, blog, checkout, docs, dashboard or 404.
- Pro
Circular Orbit Layout Features
Diagrams and mapsA hub and six connections around a solid ring for an integration hub: hovering, focusing or tapping a node writes its title and sentence into the hub.