Gathering detailed insights and metrics for @uiw/react-color
Gathering detailed insights and metrics for @uiw/react-color
Gathering detailed insights and metrics for @uiw/react-color
Gathering detailed insights and metrics for @uiw/react-color
🎨 Is a tiny color picker widget component for React apps.
npm install @uiw/react-color
Typescript
Module System
Node Version
NPM Version
TypeScript (98.31%)
HTML (1%)
CSS (0.64%)
Less (0.04%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
421 Stars
497 Commits
117 Forks
4 Watchers
9 Branches
19 Contributors
Updated on Jul 11, 2025
Latest Version
2.7.1
Package Id
@uiw/react-color@2.7.1
Unpacked Size
195.32 kB
Size
44.22 kB
File Count
10
NPM Version
10.8.2
Node Version
20.19.3
Published on
Jul 11, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
20
3
1
1npm i @uiw/react-color
1import { Slider, Sketch, Material, Colorful, Compact, Circle, Wheel, Block, Github, Chrome } from '@uiw/react-color'; 2import { Alpha, Hue, ShadeSlider, Saturation, Interactive, hsvaToHslaString } from '@uiw/react-color'; 3import { EditableInput, EditableInputRGBA, EditableInputHSLA } from '@uiw/react-color'; 4 5function Demo() { 6 const [hex, setHex] = useState("#fff"); 7 return ( 8 <Sketch 9 style={{ marginLeft: 20 }} 10 color={hex} 11 onChange={(color) => { 12 setHex(color.hex); 13 }} 14 /> 15 ); 16}
1[data-color-mode*='dark'] .w-color-sketch { 2 --sketch-background: #323232 !important; 3} 4 5[data-color-mode*='dark'] .w-color-swatch { 6 --sketch-swatch-border-top: 1px solid #525252 !important; 7} 8 9[data-color-mode*='dark'] .w-color-block { 10 --block-background-color: #323232 !important; 11 --block-box-shadow: rgb(0 0 0 / 10%) 0 1px !important; 12} 13 14[data-color-mode*='dark'] .w-color-editable-input { 15 --editable-input-label-color: #757575 !important; 16 --editable-input-box-shadow: #616161 0px 0px 0px 1px inset !important; 17 --editable-input-color: #bbb !important; 18} 19 20[data-color-mode*='dark'] .w-color-github { 21 --github-border: 1px solid rgba(0, 0, 0, 0.2) !important; 22 --github-background-color: #323232 !important; 23 --github-box-shadow: rgb(0 0 0 / 15%) 0px 3px 12px !important; 24 --github-arrow-border-color: rgba(0, 0, 0, 0.15) !important; 25} 26 27[data-color-mode*='dark'] .w-color-compact { 28 --compact-background-color: #323232 !important; 29} 30 31[data-color-mode*='dark'] .w-color-material { 32 --material-background-color: #323232 !important; 33 --material-border-bottom-color: #707070 !important; 34} 35 36[data-color-mode*='dark'] .w-color-alpha { 37 --alpha-pointer-background-color: #6a6a6a !important; 38 --alpha-pointer-box-shadow: rgb(0 0 0 / 37%) 0px 1px 4px 0px !important; 39}
You can find the react-color documentation on the website.
Base Components
1npm install # Installation dependencies 2npm run build # Compile all package
1cd packages/color-block 2# listen to the component compile and output the .js file 3# listen for compilation output type .d.ts file 4npm run watch # Monitor the compiled package `@uiw/react-block`
1npm run start # development mode, listen to compile preview website instance
As always, thanks to our amazing contributors!
Made with contributors.
Licensed under the MIT License.
No vulnerabilities found.
Reason
18 commit(s) and 7 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
Reason
packaging workflow detected
Details
Reason
Found 4/30 approved changesets -- score normalized to 1
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
project is not fuzzed
Details
Reason
security policy file not detected
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More