Search

Search components and blocks

Sign in

Feature Blocks

Show what your product does — with the feature itself, not just words about it.

Feature Cards

Open page

Three cards, each with a live mini-preview of the feature above its copy. Search narrows results as the query cycles, the shortcut keys press down and open a history popup, and the privacy toggles are real switches that flip their status text. Cards blur and rise in with a stagger as they scroll into view and lift on hover. Sample copy is for Clipwise, a fictional Mac clipboard app.

pnpm dlx shadcn@latest add @ditherui/feature-cards
invoice
  • Invoice #2041 — PDF
  • billing@acme.co
  • Pay invoice by Friday

Find anything instantly

Search every text, link and image you've copied. Results narrow as you type.

V

Paste from history

Press one shortcut anywhere on your Mac to pick from your last 90 days of clips.

Password vault

Never recorded

Banking app

Never recorded

Private notes

Recording

Private by default

Everything stays on your device. Tell Clipwise which apps to never record.

Install

$ pnpm dlx shadcn@latest add @ditherui/feature-cards

Props

className / ...div propsReact.ComponentProps<"div">—

Feature Dither

Open page

Three square-cornered feature cards joined by hairlines. Hover a card and a dithered spotlight in its accent color (emerald, amber, sky) springs up under the pointer, follows it around the card, and shrinks away when you leave. It is drawn faint and fades to nothing at its edge, so the copy stays readable. Cards blur and rise in with a stagger as they scroll into view. Sample copy is for Muse, a fictional reasoning AI.

pnpm dlx shadcn@latest add @ditherui/feature-dither

Everything you need to think clearly

Three things Muse does differently, so the answer is one you can use.

01

Reasoning you can read

Every answer comes with the steps behind it, so you can follow the logic instead of taking it on faith.

Learn more
02

Citations on every claim

Facts link back to their source the moment they appear. Click through, check it, move on.

Learn more
03

Fast enough to stay in flow

First words land in under a second, so a good idea never has to wait for the tool.

Learn more

Install

$ pnpm dlx shadcn@latest add @ditherui/feature-dither

Props

className / ...div propsReact.ComponentProps<"div">—

Feature Isometric

ProOpen page

Three alternating rows (Understand, Automate, Decide), each pairing copy with an isometric line-art figure that plays on its own (and still responds if you press it): pick a document and the processor turns it into an answer card, run a workflow and a task moves station to station ticking off checkmarks, or pick a signal and the decision dial swings to a recommended action. Rows blur and rise in with a stagger as they scroll into view, and each figure lifts on hover.

pnpm dlx shadcn@latest add @ditherui/feature-iso

01 — Understand

Turn messy data into clear answers

Ask questions in plain language and get useful answers from your data, documents, and workflows.

Fig 7Document analyzer
AI—
idle

02 — Automate

Let AI handle the busywork

Automate repetitive tasks and workflows so your team can focus on work that actually needs them.

Fig 8Workflow bot
1✓2✓3✓parsereviewsendRUN
idle

03 — Decide

Turn insights into action

Spot patterns, surface important signals, and make faster decisions with AI-powered recommendations.

Fig 9Decision dashboard
GROWTH · 5 WKSScale adsgrowthchurncost
growth · scale ads

Props

className / ...div propsReact.ComponentProps<"div">—

Suggested components