ColorPicker

colorpicker-1779394025617.tsx

'use client'
import { useState } from 'react'

const PALETTE = ['#6d28d9','#2563eb','#0891b2','#10b981','#f59e0b','#ef4444','#ec4899','#8b5cf6','#1e293b','#64748b','#f8fafc','#ffffff']

export default function ColorPicker() {
  const [color, setColor] = useState('#6d28d9')
  const [hex, setHex] = useState('#6d28d9')
  const [recent, setRecent] = useState(['#6d28d9','#2563eb'])
  const pick = (c) => {
    setColor(c); setHex(c)
    setRecent(r => [c, ...r.filter(x => x !== c)].slice(0, 5))
  }
  return (
    <div style={{ background:'#fff', borderRadius:'14px', padding:'16px', boxShadow:'0 4px 20px rgba(0,0,0,0.1)', maxWidth:'240px' }}>
      <div style={{ width:'100%', height:'80px', borderRadius:'10px', background:color, marginBottom:'14px', transition:'background 0.2s' }} />
      <div style={{ display:'flex', flexWrap:'wrap', gap:'6px', marginBottom:'14px' }}>
        {PALETTE.map(c => (
          <button key={c} onClick={() => pick(c)} style={{
            width:'28px', height:'28px', borderRadius:'6px', background:c, border:'none', cursor:'pointer',
            boxShadow:color===c ? '0 0 0 3px #6d28d9' : '0 1px 3px rgba(0,0,0,0.15)',
            transition:'transform 0.1s', transform:color===c ? 'scale(1.2)' : 'scale(1)',
          }} />
        ))}
      </div>
      <div style={{ display:'flex', alignItems:'center', gap:'8px', marginBottom:'12px' }}>
        <div style={{ width:'32px', height:'32px', borderRadius:'6px', background:color, border:'1px solid #e2e8f0', flexShrink:0 }} />
        <input
          value={hex} onChange={e => { setHex(e.target.value); if (/^#[0-9a-f]{6}$/i.test(e.target.value)) pick(e.target.value) }}
          style={{ flex:1, border:'1px solid #e2e8f0', borderRadius:'6px', padding:'6px 10px', fontSize:'13px', fontFamily:'monospace', outline:'none' }}
        />
      </div>
      {recent.length > 0 && (
        <div>
          <div style={{ fontSize:'11px', color:'#94a3b8', marginBottom:'6px', textTransform:'uppercase', letterSpacing:'0.05em' }}>Recent</div>
          <div style={{ display:'flex', gap:'6px' }}>
            {recent.map(c => (
              <button key={c} onClick={() => pick(c)} style={{ width:'22px', height:'22px', borderRadius:'4px', background:c, border:'1px solid #e2e8f0', cursor:'pointer' }} />
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

Component info

CategoryInputs & Forms

Frameworkreact

TierFREE

Copies0

About

Color picker with palette, hex input and recent colors

More from Inputs & Forms

'use client';

import { useState, useEffect } from 'react';

interface Tag {
  id: number;
  name: string;
}

const TagInput = () => {
  const [tags, setTags] = useState<Tag[]>([]);
  const [inputValue, setInputValue] = useState('');
  const [suggest

TagInput

Inputs & Forms

'use client';

import React, { useState } from 'react';

interface File {
  name: string;
  size: number;
  progress: number;
}

const FileUpload = () => {
  const [dragOver, setDragOver] = useState(false);
  const [files, setFiles] = useState<File[]

FileUpload

Inputs & Forms

import React, { useState } from 'react';

const OTPInput = () => {
  const [otp, setOtp] = useState(new Array(6).fill(''));
  const [activeIndex, setActiveIndex] = useState(0);

  const handleChange = (e, index) => {
    const value = e.target.value;

OTPInput

Inputs & Forms

'use client';

import React, { useState } from 'react';

interface RangeSliderProps {
  min: number;
  max: number;
  defaultValue: [number, number];
}

const RangeSlider: React.FC<RangeSliderProps> = ({ min, max, defaultValue }) => {
  const [minVal

RangeSlider

Inputs & Forms