Components
Starting preview...
Color picker
npx shadcn@latest add https://21st.dev/r/cult-ui/color-picker"use client"
import React, { useState } from "react"
import { motion } from "framer-motion"
import { CardContent } from "@/components/ui/card"
import { ColorPicker } from "@/components/ui/color-picker"
export function ColorPickerDemo() {
const [color, setColor] = useState("240 5.9% 10%")
return (
<div className="w-full max-w-4xl mx-auto overflow-y-auto">
<CardContent className="p-6 space-y-6">
<div className="grid md:grid-cols-1 gap-6">
<div className="space-y-4">
<div className="relative">
<label className="text-sm font-medium text-muted-foreground mb-2 block">
Primary Color
</label>
<div className="flex items-center">
<ColorPicker
color={`hsl(${color})`}
onChange={(newColor) => {
const [h, s, l] = newColor
.match(/\d+(\.\d+)?/g)
?.map(Number) || [0, 0, 0]
setColor(`${h.toFixed(1)} ${s.toFixed(1)}% ${l.toFixed(1)}%`)
}}
/>
</div>
</div>
</div>
<motion.div
className="w-full h-full min-h-[24rem] rounded-lg p-6 shadow-lg transition-colors duration-300 ease-in-out overflow-hidden"
style={{
backgroundColor: `hsl(${color})`,
color: `hsl(0 0% 100%)`,
borderWidth: 2,
borderStyle: "solid",
}}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
<h3 className="text-xl font-semibold mb-4">Color Preview</h3>
<p className="text-sm mb-4">
Experience your selected color in action.
</p>
</motion.div>
</div>
</CardContent>
</div>
)
}