# Knitted Frame

> Wraps anything in a border of real knitting. The depth is a height field, not a drop shadow: each run of stitches is stroked five times into a greyscale buffer, wide and low through narrow and high, and the frame is lit per pixel by the surface normals taken from it — which is why the wool looks round. The band is clipped to a rounded ring so the edge is trimmed and the corners mitre, and it insets the content by exactly its own thickness so it reads as something the content is wearing. Seven charts, a tint prop that derives a colourway from one shade, optional built-in pickers. Zero dependencies.

- Author: [Kedhareswer Naidu](https://21st.dev/@kedhareswer)
- License: mit
- Tags: Card, Animation, Border, Background, Interactive
- Live preview: https://21st.dev/@kedhareswer/components/knitted-frame

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/kedhareswer/knitted-frame?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/card.md