# Live Preview Style Select

> The Live-Preview Style Select is a highly interactive and design-focused dropdown component built with shadcn UI that allows users to see changes in real time as they select options. Unlike traditional selects, choosing a style—such as a gradient, theme, or font—instantly updates a preview pane, providing immediate visual feedback. The component is fully configurable, allowing developers to set custom preview heights, fixed select widths, show optional descriptions, and control spacing for a clean, professional look. By combining a stable, fixed-width select trigger with vertical stacking of labels and descriptions, it ensures a consistent, user-friendly interface where content never shifts or wraps unexpectedly. This makes it ideal for dashboard theming, design systems, style pickers, or any app where instant feedback enhances user decisions.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- Live preview: https://21st.dev/@ruixen.ui/components/live-preview-style-select

## Install

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