shadcn.io is not affiliated with official shadcn/ui
Do and Don't Design Principles Block for Radix UI
A design-principles section for a design-system manager: four principles in cells, each with its test as a question and the same screen sketched done well and done badly.
Installation
Overview
A design-principles section for React with Radix UI. A centred header sits over four cells in two columns. Each cell names a principle, gives its test as an italic question, and shows the same small screen done well and done badly as two greyscale sketches side by side, each with a tick or a cross and a line saying what makes it right or wrong: a dialog with one clear action against three equal buttons, a form grouped by space against one boxed field after another, a toast that says what changed against one that says "Success", a menu with shortcuts against bare icons. On wide screens the cells' lines overshoot their corners; on a phone each cell is a band from rail to rail. A founding line and a link close the block. It's built from Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For a design-system site, a style guide or an about page where a principle is something you can see. The product and its principles are invented for the example.
FAQ
How are the sketches made, and can I change them?
Each sketch is a few span elements in the cell's own file: bars for text, outlined boxes for fields, filled boxes for buttons. They sit in a small SketchWindow helper and use only your theme's tokens, so they follow it in light and dark. To redraw one, edit the markup inside its Do or Dont; to add a principle, add a PrincipleCell with its own pair.
What do screen readers hear for the sketches?
The drawings are hidden from assistive technology, and the words under each one say the same thing: a tick or cross icon, then "Do:" or "Don't:" and a sentence. Each pair is two figures, each with a caption. So the facts are in text, and the sketch only shows them.
Why is each principle a question?
A principle people can't check is a slogan. The italic test under the title is what a reviewer asks of a screen: "Would they know what changed without opening anything?" The two sketches are the answer, yes and no, drawn.
Why do the cells' lines overshoot on desktop but not on a phone?
Overshoot lines read as cells with space between them. On a phone, two cells one above the other would put two long lines close together, so below lg each cell becomes a band ruled from rail to rail. The pair of sketches stays side by side at every width.