# Studio Hero

> The StudioHero component is a modern, full-bleed hero section built entirely with shadcn/ui primitives and Tailwind utility classes. It combines a cinematic background image, soft gradient overlays, and a large typographic watermark to create an atmospheric visual identity for creative studios or agencies. The left column lists key services, while the right side features a concise tagline, category chips, and clear call-to-action buttons. Every element—from overlay accent color to watermark visibility—is configurable through props, allowing designers to easily adapt it to different brands or campaigns.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: next
- Live preview: https://21st.dev/@ruixen.ui/components/studio-hero

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/studio-hero?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
