Components
Loading preview...
a beautifully structured Dialog component built using Radix UI primitives with custom styling and slots for full flexibility. It offers smooth animations, a blurred backdrop, responsive sizing, and optional close buttons—making it ideal for modals, alerts, or form popups in any modern React app.
npx shadcn@latest add https://21st.dev/r/sshahaider/dialogimport React from 'react';
import {
Dialog,
DialogBody,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Palette } from 'lucide-react';
export default function ColorPickerDialog() {
const [selectedColor, setSelectedColor] = React.useState('#3b82f6');
const presetColors = [
'#ef4444',
'#f97316',
'#eab308',
'#22c55e',
'#3b82f6',
'#8b5cf6',
'#ec4899',
'#64748b',
];
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Theme Color</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle className="flex items-center justify-center sm:justify-start gap-2">
<Palette className="h-5 w-5" />
Choose Theme Color
</DialogTitle>
<DialogDescription>
Select a color for your workspace theme
</DialogDescription>
</DialogHeader>
<DialogBody>
<div className="space-y-4">
<div>
<Label className="mb-2 block text-sm font-medium">
Preset Colors
</Label>
<div className="grid grid-cols-8 gap-2">
{presetColors.map((color) => (
<button
key={color}
className={`h-10 w-10 rounded-full border-2 transition-all ${
selectedColor === color
? 'border-foreground scale-110'
: 'hover:scale-105'
}`}
style={{ backgroundColor: color }}
onClick={() => setSelectedColor(color)}
/>
))}
</div>
</div>
<div>
<Label
htmlFor="custom-color"
className="mb-2 block text-sm font-medium"
>
Custom Color
</Label>
<div className="flex items-center gap-3">
<input
type="color"
id="custom-color"
value={selectedColor}
onChange={(e) => setSelectedColor(e.target.value)}
className="aspect-square h-10 w-10 cursor-pointer rounded-md border p-0"
/>
<Input
value={selectedColor}
onChange={(e) => setSelectedColor(e.target.value)}
placeholder="#000000"
className="flex-1"
/>
</div>
</div>
<div
className="rounded-lg border p-4"
style={{ backgroundColor: selectedColor + '20' }}
>
<p className="text-sm" style={{ color: selectedColor }}>
Preview: This is how your theme color will look.
</p>
</div>
</div>
</DialogBody>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<DialogClose asChild>
<Button
onClick={() => alert(`Theme color set to ${selectedColor}`)}
style={{ backgroundColor: selectedColor }}
className="text-white"
>
Apply Color
</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
);
}