https://github.com/xbmlz/solid-color

🎨 SolidJS color pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
https://github.com/xbmlz/solid-color

chrome color-picker colors github google inline-styles material photoshop sketch solid solid-components solidjs twitter

Last synced: 19 days ago
JSON representation

🎨 SolidJS color pickers from Sketch, Photoshop, Chrome, Github, Twitter & more

• Host: GitHub
• URL: https://github.com/xbmlz/solid-color
• Owner: xbmlz
• License: mit
• Created: 2023-01-12T14:32:07.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2025-02-24T02:11:00.000Z (2 months ago)
• Last Synced: 2025-04-14T21:53:30.115Z (19 days ago)
• Topics: chrome, color-picker, colors, github, google, inline-styles, material, photoshop, sketch, solid, solid-components, solidjs, twitter
• Language: TypeScript
• Homepage: https://solid-color-demo.netlify.app/
• Size: 388 KB
• Stars: 22
• Watchers: 2
• Forks: 3
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  



# solid-color

[![Npm Version](https://img.shields.io/npm/v/solid-color)](https://www.npmjs.com/package/solid-color)

[![License](https://img.shields.io/npm/l/solid-color)](https://npm-stat.com/charts.html?package=solid-color)

[![Downloads](https://img.shields.io/npm/dm/solid-color)](LICENSE)

🎨 Color Pickers for Sketch, Photoshop, Chrome & more with SolidJS.

## Demo

[Live Demo](https://solid-color-demo.netlify.app/)

![](https://cdn.jsdelivr.net/gh/xbmlz/static@main/img/202302061325674.jpg)

## Features

- 🔨 13 different pickers - Start building with Sketch, Photoshop, Chrome and many more

- 🎨 100% customizable - Change the colors, styles, layout and more

- 📦 Tiny - Only 25kb gzipped

- 🚀 Fast - Built with SolidJS

- 📱 Mobile friendly - Works on touch devices

- 🌈 Accessible - Supports keyboard navigation

- 📖 Typescript - Written in Typescript with full type definitions

- 📦 Tree-shakeable - Only import what you need

## Installation

Install it:

```bash

npm i solid-color

# or

yarn add solid-color

# or

pnpm add solid-color

```

Use it:

```tsx

import { TwitterPicker } from 'solid-color'

function App() {

  return ;

}

```