Color Picker

A flexible color picker component with hex input support for selecting and customizing colors in your application.

Selected color: #3B82F6

Customize Component Colors

Background Color

Border Color

Text Color

This is a preview of your styled component

.custom-component {
  background-color: #F0F9FF;
  border: 1px solid #7DD3FC;
  color: #0369A1;
  padding: 1rem;
  border-radius: 0.5rem;
}

Introduction

The ColorPicker component provides an intuitive way to select colors within your application. It combines a visual color picker with a hex input field, making it perfect for design tools, theme customization, and any interface that requires color selection.

ColorPicker uses react-colorful under the hood, providing a lightweight yet powerful color selection experience.

Installation

Install the ColorPicker component using:

npx axionjs-ui add color-picker

File Structure

Here’s the file structure for the ColorPicker component:

color-picker.tsx

Basic Usage

Simple Color Picker

Selected color: #3B82F6

With Input Field

Examples

With Labels

Background:

Text Color:

Preview Text

Theme Color Selection

Primary Color

Secondary Color

Accent Color

Props

The ColorPicker component comes with the following customizable props:

Prop	Type	Default
`value`	`string`	-
`onChange`	`(value: string) => void`	-
`onBlur`	`() => void`	-
`disabled`	`boolean`	`false`
`name`	`string`	-
`className`	`string`	-

Customization

The ColorPicker component can be customized further by:

<ColorPicker
  value={color}
  onChange={setColor}
  className="h-10 w-10 rounded-full" // Customize the trigger button
/>

Use Cases

The ColorPicker component is perfect for:

Theme Customization: Allow users to customize their application theme.
Design Tools: Include in graphic design or UI design applications.
Product Configurators: Let users select colors for customizable products.
Data Visualization: Choose colors for charts, graphs, and visualizations.
Form Inputs: When color information needs to be collected from users.

Accessibility

The ColorPicker component follows these accessibility best practices:

Keyboard Navigation: Fully navigable using keyboard controls.
Screen Reader Support: Includes proper aria labels and descriptions.
Focus Management: Maintains proper focus order and visible focus states.
Color Input: Allows direct entry of hex values for precise control.

When using color input for critical information, ensure alternative methods are available for users with color vision deficiencies.

Features

The ColorPicker component provides the following features:

Visual Color Selection: Intuitive visual color picker interface.
Hex Input: Direct input of hex color values for precision.
Popover Interface: Space-efficient design that appears on demand.
Keyboard Accessibility: Full keyboard navigation support.
Form Integration: Works seamlessly in form contexts.
Customization: Flexible styling options to match your design.

Conclusion

The ColorPicker component is a flexible, accessible, and powerful solution for color selection in your Next.js application. Its combination of visual selection and direct input makes it suitable for both casual users and professionals requiring precise color control.