shadcn.io is not affiliated with official shadcn/ui
Receipt Itemized Printout Features Block for Radix UI
A features section for a request-tracing service: copy and one Shine Button beside a request trace printed as a receipt, with dotted leaders, a total and cost, a bar that splits the time by hop, a barcode and a torn edge.
Installation
Overview
A features section for React with Radix UI, where the product's output is printed on a till receipt. Copy, three ticks and the one Shine Button sit at the start for Tracetab, a request-tracing service. Past a split divider, in a tinted panel, a framed receipt prints a single request in monospace: its id, region, route and status, one line per hop (edge cache, auth check, function, database) joined to its milliseconds by dotted leaders, a total with the request's cost, a bar that splits the total by hop, a barcode of the id and a zigzag torn edge. The receipt is static type: there are no inputs, and the numbers come from one list so the lines, the total and the bar always agree. For observability, billing and API products, and anyone whose product explains itself best as a list of what happened and what it cost.
FAQ
How do I change the hops and the numbers?
Edit HOPS at the top of the file: each hop is a name, its milliseconds and a tone for its piece of the bar. The total, the line for each hop and the width of each bar segment are computed from that list, so adding a fifth hop changes all three. The request's id, region, route and cost are in TRACE.
How is the torn edge made?
With a CSS mask: a conic-gradient that repeats a row of triangles along the receipt's bottom edge, 18 pixels wide. Change the size at the end of the TORN class for bigger or smaller teeth. The outline and shadow are a drop-shadow filter on a wrapper, because a filter follows the masked edge where a border or a box shadow wouldn't.
Is it interactive?
No. It's a printout: no inputs, no toggles and nothing that changes. The live version of a bill, with line items you can edit, is the Invoice Line Item Breakdown block. Only the section's header fades up once when the page loads, and not at all with reduced motion.
Is the receipt accessible?
Yes. It is real text, not an image. Each part is a description list, a term and its value, with the dotted leaders drawn by a pseudo-element so a screen reader reads "Function, 31 ms". The bar and the barcode are decorative and hidden from assistive technology, and the figure has a caption that says the numbers are example data.