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.
"use client";
import * as React from "react";
import {
LivePreviewStyleSelect,
StyleOption,
} from "@/components/ui/live-preview-style-select";
const gradientOptions: StyleOption[] = [
{
value: "sunset",
label: "Sunset Glow",
previewClass: "bg-gradient-to-r from-pink-500 via-orange-400 to-yellow-300",
description: "Warm pink-orange-yellow gradient",
},
{
value: "aqua",
label: "Aqua Breeze",
previewClass: "bg-gradient-to-r from-teal-400 to-cyan-500",
description: "Cool teal and cyan tones",
},
{
value: "night",
label: "Night Sky",
previewClass: "bg-gradient-to-r from-indigo-900 via-purple-800 to-black",
description: "Dark indigo with deep purple accents",
},
{
value: "forest",
label: "Forest Haze",
previewClass: "bg-gradient-to-r from-green-600 via-lime-400 to-emerald-500",
description: "Lush green earthy tones",
},
];
export default function DemoLivePreviewStyleSelect (){
const [style, setStyle] = React.useState<string>("");
return (
<div className="p-4 space-y-4">
<LivePreviewStyleSelect
options={gradientOptions}
label="Select Gradient"
placeholder="Choose a gradient..."
selectWidth="280px" // fixed width for all options
previewHeight="180px"
/>
{style && (
<p className="text-sm text-gray-700">
Selected style: <span className="font-semibold">{style}</span>
</p>
)}
</div>
);
};
Part of Ruixen UI — browse the full library on 21st.dev.