Ravox KitFormulário
Color Picker
Botão com a cor atual que abre uma camada com a área de saturação e brilho, a barra de matiz, o valor em HEX, RGB ou HSL (digitável), o conta-gotas e amostras. Arrasta com mouse e toque, e anda com as setas (Shift de 10 em 10). Sem dependência: bem mais caprichado que o seletor nativo do navegador.
Cor da marca
Ajustes
Ligar e desligar
Exemplos
Cor da marca com prévia
Cor do botão
Assinar agoraPequeno, em RGB, sem rótulo
Instalação
O shadcn cria components/ui/seletor-cor.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/color-picker.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| valor / padrao | string | "#c6f24e" | A cor em hex ("#c6f24e"; aceita #abc). valor controla; padrao só abre com uma cor. |
| aoTrocar | (hex: string) => void | — | Recebe o hex de 6 dígitos a cada mudança, inclusive durante o arrasto. |
| rotulo | ReactNode | — | Rótulo acima do botão; também é o nome do painel para o leitor de tela. |
| formato | "hex" | "rgb" | "hsl" | "hex" | Formato que o botão mostra e que abre selecionado. Dentro do painel a pessoa troca. |
| amostras | string[] | — | Cores prontas (hex) no fim do painel. Pronta: amostrasPadrao. |
| tamanho | "pequeno" | "medio" | "grande" | "medio" | Altura do botão: 32, 40 ou 48px. |
| soAmostra | boolean | false | Só a amostra quadrada, sem o valor ao lado (barra de ferramentas). Dê um aria-label. |
| aoSair | () => void | — | Foco saiu do botão e do painel (o onBlur do Controller). |
| name | string | — | Manda o hex num <input type="hidden">. |
| classeBloco · classePainel | string | — | Classes do bloco de fora e do painel flutuante. className vai no botão. |