# Opacity

> A banner overlay with an opacity slider and field, written as rgb() with alpha.

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-color-picker-4).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-color-picker-4
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-color-picker-4-light-ddeedbc1854542ff.png
- Registry item: https://reui.io/r/new-york-v4/c-color-picker-4.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-color-picker-4.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `card`, `@reui/color-picker`, `field`

## Files

### `c-color-picker-4.tsx`

```tsx
"use client"

import { useState } from "react"
import { ColorPicker } from "@/components/reui/color-picker"

import { Card, CardContent } from "@/components/ui/card"
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"

export function Pattern() {
  const [overlay, setOverlay] = useState<string | null>("rgb(15 23 42 / 0.55)")

  return (
    <Card className="w-full max-w-sm overflow-hidden pt-0">
      <div className="relative flex h-40 items-end bg-[linear-gradient(135deg,#f97316,#ec4899_45%,#6366f1)] p-5">
        <div
          aria-hidden="true"
          className="absolute inset-0"
          style={{ background: overlay ?? "transparent" }}
        />
        <div className="relative">
          <p className="text-xs font-medium tracking-wide text-white/80 uppercase">
            New season
          </p>
          <p className="text-lg font-semibold text-white">Spring collection</p>
        </div>
      </div>
      <CardContent>
        <Field>
          <FieldLabel id="banner-overlay-label" htmlFor="banner-overlay">
            Banner overlay
          </FieldLabel>
          {/* `alpha` adds the opacity slider and field; `format="rgb"` writes
              the value as rgb(15 23 42 / 0.55), ready for a style prop. */}
          <ColorPicker
            id="banner-overlay"
            value={overlay}
            onValueChange={setOverlay}
            alpha
            format="rgb"
            aria-labelledby="banner-overlay-label"
            aria-describedby="banner-overlay-description"
          />
          <FieldDescription id="banner-overlay-description">
            Darken the artwork so the headline stays readable.
          </FieldDescription>
        </Field>
      </CardContent>
    </Card>
  )
}
```