Photo Adjust
Basic photo adjustments: exposure, contrast, grain and vignette sliders, a press-and-hold compare, and one-tap presets.
photo-adjust.tsxphoto-adjust.css
Checking access…
Overview
Adjustments are CSS filters on the image plus an SVG grain and a vignette ring, all live. Presets set every slider at once; touching a slider marks the look as Custom.
Hold the Compare button (or the image) to see the original. Reset puts everything back to zero.
When to use
- Avatar and listing uploads, light editing before posting.
When not to use
- Professional editing: use a dedicated editor.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/photo-adjust.json$
npx shadcn@latest add https://sundaeui.dev/r/photo-adjust.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/photo-adjust.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/photo-adjust.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy photo-adjust.tsx and photo-adjust.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { PhotoAdjust } from '@/components/sundae/photo-adjust'
<PhotoAdjust />Props
| Prop | Type | Default |
|---|---|---|
srcImage URL; a drawn scene is used if omitted. | string | — |
onChangeCalled on change. | (v: Adjustments) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Each slider is a labelled range with a signed value.
- Compare works with Space held on the button.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-pha; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Photo Adjust free?
- Photo Adjust is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Photo Adjust?
- Run npx shadcn@latest add https://sundaeui.dev/r/photo-adjust.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Photo Adjust support keyboard and screen readers?
- Each slider is a labelled range with a signed value. Compare works with Space held on the button.
- Does Photo Adjust respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All 3d →Before / After
3D · Refined- Pro
Holo Ticket
3D · Futuristic - Pro
Card Swap
3D · Expressive Image Cropper
Components · RefinedToolbar Tooltips
Navigation · RefinedAvatar Upload
Forms · Refined