ColorPicker

ColorPicker is a lightweight alternative to ColorInput for cases where a full hex input and dropdown chrome are unnecessary. It renders a single color preview that toggles a compact popover of preset swatches — no text input, no positioning engine.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽¹⁾

Properties

⁽²⁴⁾

Playground

Basic

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
ColorPicker
,
 
Row
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
color
,
 setColor
]
 
=
 
useState
(
'#4ECDC4'
)
;
 
  
return
 
(
    
<Block
>
      
<Row
 
gap
=
"sm"
 
align
=
"center"
>
        
<ColorPicker
 
value
=
{
color
}
 
onChange
=
{
setColor
}
 
/>
        
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
          
Selected
:
 
{
color
}
        
</Text
>
      
</Row
>
 
      
<Block
>
        
<Text
 
size
=
"sm"
 
weight
=
"semibold"
>
          
Larger
,
 custom swatches
        
</Text
>
        
<ColorPicker
          
defaultValue
=
"#5F27CD"
          
size
=
{
36
}
          
columns
=
{
4
}
          
swatches
=
{
[
'#0F172A'
,
 
'#5F27CD'
,
 
'#54A0FF'
,
 
'#4ECDC4'
,
 
'#96CEB4'
,
 
'#FECA57'
,
 
'#F8B500'
,
 
'#FF6B6B'
]
}
        
/>
      
</Block
>
    
</Block
>
  
)
;
}

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap