shadcn.io is not affiliated with official shadcn/ui
Pattern Kit Gallery Block for Ark UI
Twelve tileable CSS surfaces in cells on shared hairlines, with a Scale slider and a Contrast slider that repaint every cell live, and a Copy CSS button that copies the real rule for the pattern you choose.
Installation
Overview
A pattern kit for React with Ark UI. Twelve surfaces (stripes, lines, dots, polka, grid, hatch, checks, diamonds, zigzag, scales, rings and corners) sit in cells on shared hairlines at the start, each drawn in nothing but CSS gradients. The end column is the controls: the header, a Scale slider from 12 to 64 px and a Contrast slider from 10 to 60 per cent, both live on every cell at once, and under them the real rule for the chosen pattern with a Copy CSS button. Choosing a cell chooses the rule; the rule shows the number you set, so what you copy is what you see. The ink is the theme's foreground mixed to a strength, so the surfaces follow light and dark. On a phone the order is the header, the sliders, the cells and the rule. It's built from Guides, Slider and CopyButton. For pattern libraries, empty states, and any page that wants a surface without an image.
FAQ
What does Copy CSS copy?
The rule for the pattern you chose, as it is shown: a .surface class with an --ink variable (the foreground mixed to your contrast), the gradient layers, the positions and the tile size at your scale. Paste it and the surface renders the same, in any project that has a --foreground colour; swap the variable for a fixed colour if it does not.
What does Contrast change?
The strength of the ink, from 10 to 60 per cent of the foreground over transparent. It is not a measured contrast ratio, so check text laid over a surface yourself.
What does Scale change?
The size of one tile in pixels, from 12 to 64. Repeating gradients (stripes, lines, hatch, rings) use it for their spacing, and the tiled ones (dots, grid, checks and the rest) use it as their background size.
Which keys work?
Tab visits the Scale slider, the Contrast slider, then each pattern cell and the Copy button. The arrow keys move a slider by a step (Home and End go to its ends). Enter or Space chooses a cell. The chosen cell has a heavier ring and an underline, so it does not rely on colour.