# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/component/color-picker. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Components](/components)
3. /
4. [Dashboard](/components/dashboard)
5. /
6. Color Picker

# Color Picker

OKLCH-native colour picker: a gamut-aware lightness and chroma plane, RGB and OKLCH tabs whose rows show their own colour ramp on hover, a field that accepts hex, rgb() or oklch(), screen eyedropper and preset swatches.

PreviewCode

RGBOKLCH

Hue277°

## Installation

Adds the component and everything it depends on to your project.

![](https://oud.pics/sm/l/npm.svg)npm![](https://oud.pics/sm/l/bun.svg)bun![](https://oud.pics/sm/l/pnpm.svg)pnpm![](https://oud.pics/sm/l/yarn.svg)yarn

Base UI

`npx shadcn add https://ui.beste.co/component/r-base/color-picker`

New here? Read the [installation guide](/docs/installation).

## Usage

The import and the props worth knowing about, in one place.

```
import { ColorPicker } from "@/components/beste/component/color-picker";

// Hex in, hex out — the drop-in case
<ColorPicker color={color} onChange={setColor} />

// Emit oklch() and keep the expensive work off the drag path. The OKLCH tab
// opens selected, since that is the notation being written back.
<ColorPicker
  color={brand}
  format="oklch"                                  // "hex" (default) | "oklch" | "rgb"
  onChange={setBrand}                             // every adjustment
  onChangeComplete={(value) => console.log("persist", value)} // once per gesture
/>

<ColorPicker
  color={overlay}
  onChange={setOverlay}
  alpha                                           // adds the alpha row, emits 8-digit hex
  // Presets are opt-in; without this prop the picker shows no swatch row at all.
  swatches={["#171717", "#64748b", "#6366f1", "#0ea5e9", "#14b8a6", "#22c55e", "#f59e0b", "#ef4444"]}
/>

// Compact: no tabs, so plane and hue only, and no text field either
<ColorPicker color={color} onChange={setColor} oklch={false} hideInput />
```

## Playground

Turn the props on the right; the snippet under them is what you would write to get what you see.

RGBOKLCH

Hue277°

Usage

```
import { ColorPicker } from "@/components/beste/component/color-picker";

<ColorPicker
  color="#6366f1"
/>
```

Props

Colour#6366f1Formathex

Alpha

OKLCH plane

Hide the field

## Keyboard and gestures

Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.

| Arrow keys on the plane | Move the swatch. Up and Down change lightness while keeping the colour as saturated as it was; Left and Right change chroma. |
| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| Shift + Arrow           | A coarse step, for crossing the plane without dragging.                                                                      |
| Arrow keys on a slider  | One step of hue or alpha — the sliders are the inspector's own rows, so they answer everything those answer.                 |
| Enter in the field      | Commit what was typed. An unparseable value is marked invalid rather than silently dropped.                                  |
| Escape in the field     | Throw the draft away and put the committed colour back.                                                                      |
| The eyedropper          | Offered only where the browser has \`EyeDropper\`; picks a colour from anywhere on screen.                                   |

## Props

Read from the component's own type, so this cannot drift from what it accepts.

| Prop             | Type                    | Default | Description                                                                                                                                                                                                                                                                  |                              |
| ---------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| color            | string                  | —       | Current colour. Hex, \`rgb()\`/\`rgba()\` and \`oklch()\` are all understood.                                                                                                                                                                                                |                              |
| onChange         | (color: string) => void | —       | Fires on every adjustment, in \`format\`.                                                                                                                                                                                                                                    |                              |
| onChangeComplete | (color: string) => void | —       | Fires once an adjustment is finished — a drag release, a committed edit, a swatch click. Use it for work too expensive to run per frame.                                                                                                                                     |                              |
| format           | "hex" \| "oklch"        | "rgb"   | "hex"                                                                                                                                                                                                                                                                        | Notation the callbacks emit. |
| alpha            | boolean                 | —       | Show the alpha row and carry an alpha channel through \`format\`.                                                                                                                                                                                                            |                              |
| oklch            | boolean                 | true    | Offer the RGB/OKLCH tabs. The OKLCH one adds lightness and chroma rows for precise control and writes the value as \`oklch(...)\`; the choice only affects what is shown and typed, never what \`format\` emits. Turn it off for a compact picker: plane, hue and the field. |                              |
| swatches         | string\[\]              | —       | Preset colours offered under the picker, in any supported notation.                                                                                                                                                                                                          |                              |
| hideInput        | boolean                 | —       | Hide the text field that accepts and displays the value.                                                                                                                                                                                                                     |                              |
| className        | string                  | —       |                                                                                                                                                                                                                                                                              |                              |
| aria-label       | string                  | —       | Accessible name for the lightness/chroma plane.                                                                                                                                                                                                                              |                              |

[PreviousPromo Card](/component/card28)[NextData Table](/component/data-table)

On this page
* [Preview](#preview)
* [Installation](#installation)
* [Usage](#usage)
* [Playground](#playground)
* [Keyboard](#keyboard)
* [Props](#props)

## More Dashboard components

[View all Dashboard](/components/dashboard)

[](/component/data-table)

| Customer                        | Plan    | Status  | Spend  | Joined       | Actions          |
| ------------------------------- | ------- | ------- | ------ | ------------ | ---------------- |
| AAmara Okaforamara@northwind.io | Scale   | Active  | $4,820 | Jan 4, 2026  | Open row actions |
| DDiego Santosdiego@lumen.app    | Starter | Trial   | $0     | Feb 18, 2026 | Open row actions |
| PPriya Nairpriya@vertex.co      | Growth  | Active  | $2,140 | Nov 22, 2025 | Open row actions |
| TTom Fischertom@basecamp.dev    | Starter | Churned | $380   | Aug 9, 2025  | Open row actions |
| LLena Björklena@aurora.se       | Scale   | Active  | $6,390 | Mar 2, 2026  | Open row actions |
| MMarcus Reedmarcus@hexa.io      | Starter | Trial   | $0     | Feb 27, 2026 | Open row actions |

8 row(s)

Page 1 of 2Previous pageNext page

### Data Table

Client-side data-table engine: column-driven config with custom cell renderers, sortable headers, keyword search, row selection, per-row action menus, and pagination. Owns all state; blocks pass columns + rows as data.

[](/component/calendar-month)

### January 2026

Sun

Mon

Tue

Wed

Thu

Fri

Sat

12345678910111213141516171819202122232425262728293031

### Calendar Month

A month grid with selectable days, a today marker, colored event dots per day, and prev/next month controls. Data-driven (weekStart + daysInMonth) so it renders deterministically; controlled or self-managed selection.

[](/component/notifications-menu)

3

### Notifications Menu

Topbar bell trigger with an unread count and a popover feed: icon rows with title, description, timestamp, unread dots, a mark-all-read action, and a scrollable list. Manages read state internally.

[](/component/sidebar-nav)

Acme Inc

Overview

DashboardAnalyticsCustomers24Orders3

Workspace

SettingsSupport

### Sidebar Nav

Dashboard sidebar with a brand header, grouped nav items, Lucide icons, trailing count badges, and an active state. Collapse is driven from the shell topbar via the \`collapsed\` prop (icon rail when true).

[](/component/user-menu)

JEJordan Ellisjordan@acme.com

### User Menu

Topbar account menu: avatar trigger with name and email, dropdown with icon items, keyboard shortcuts, and a destructive sign-out row. Compact avatar-only mode for dense headers.

[](/component/schedule-timeline)

8 AM10 AM12 PM2 PM4 PM6 PM

Atrium Loft

Floor 3 · 12 seats

Planning syncDesign review

Studio B

Floor 2 · 8 seats

Brand shootEditing block

Garden Room

Ground · 20 seats

StandupVendor walkthroughWorkshop

Rooftop Deck

Level 5 · 40 seats

Networking

### Schedule Timeline

A Gantt-style day timeline: resource rows against an hour axis with time-positioned event bars (left/width computed from start/end), grid lines, a live 'now' marker, colored tones, and clickable bars with a hover tooltip showing the event and its time range. Ideal for room bookings, shifts, and resource scheduling.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.