shadcn.io is not affiliated with official shadcn/ui
Product Description AI Block for React Aria
Write a product listing from facts: a name, category, audience and up to six features feed three fixed templates (Plain, Warm, Punchy), with a derived checklist for length, name in the first sentence and feature count.
Installation
Overview
Turn a few product facts into a listing people can paste, with this product description writer for React with React Aria. A hairline frame with a plus mark on each corner holds a form at the start: a name Input, a category and an audience in Native Selects, and features you add one at a time, up to six, as removable chips. At the end the listing is built by a template engine. Tabs switch between Plain, Warm and Punchy, and each template stitches the name, the category, the audience and the features as an Oxford comma list into sentences. It is a fixed template, not a model, and the page says so. Under the text a checklist is worked out from it: 50 to 120 words, the name in the first sentence and three or more features, each a tick or a dash with its words. An Empty state holds the place until there is a name and a feature. The Shine Button, the only colored control, copies the open template. Guides rule the bands. For catalog tools, marketplaces and any back office that writes listings.
FAQ
What stays in the page, and how do I make it real?
Everything. The templates are plain functions in the file, plainLines, warmLines and punchyLines, and Copy writes to your clipboard. No model writes the text and nothing is sent. To make it real, call your own service from listingOf with the same facts and show its text in the same tabs.
How is the checklist worked out?
From the text on screen. The length check counts its words against 50 to 120, the name check looks for the product name in the first sentence, and the feature check counts the chips. Change a fact and the ticks change with it, so Punchy, which is short by design, shows a dash for length.
What are the rules for features?
Up to six, each at most 40 characters, with no repeats. Press Enter or Add. The chip row keeps its height whether it holds none or six.
What if the name or the features are empty?
The listing area shows an empty state, the checklist says it is waiting, and Copy listing answers in the status line that it needs a name and a feature first.