Skip to content

shadcn.io is an independent project built on shadcn/ui

Pro

Digital Product Card Block for Ark UI

A brush pack sold in three licences: radio tiles (Personal, Studio, Commercial) over a matrix of client work, resale and seats, a disclosure listing six files with a derived total size and a button that really saves the licence text.

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Make the licence part of the card with this digital product card for React with Ark UI. A hairline frame with a plus mark on each corner holds drawn brush strokes and, in a side cell, three radio tiles for the licence (Personal $19, Studio $49, Commercial $149) over a small table of what each allows: client work, resale and seats, each a check or a dash with the word "Yes" or "No", with the chosen column tinted. A Collapsible "What is in the pack" lists six files with sizes and adds them up to 184 MB. A ghost button saves the chosen licence text as a .txt file. The single Shine Button says "Add to bag" with the price and turns into "Added" with an Undo; a polite status line says what changed. Nothing is stored or bought. For product pages that sell files.

FAQ

Does the download really work?

Yes. saveText makes a Blob from the licence text for the chosen tier, points a temporary link at it and clicks it, so the browser saves inkpelt-studio-licence.txt or the one for the tier you chose. The text is a sample and says so; replace it with your real licence.

How is the licence matrix built?

It is a real table with column and row headers, so a screen reader reads "Studio, Client work, Yes". Each licence in LICENCES carries its price in cents, whether client work and resale are allowed, and its seats.

How is the size worked out?

totalSize adds the size of each file in FILES, so adding or removing a file updates the total in the trigger. Sizes are typed in megabytes.

How do the radio tiles work?

They are native radios in a fieldset with a legend, so arrow keys move between them and the chosen one is announced. The tile paints through has-checked.

What stays local, and how do I wire it for real?

The licence and the bag are page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart and issue the real licence after payment. Delivery here is described as instant; link the files from your order page.

How does it look on a phone?

The brush strokes come first, then the licence tiles, the matrix, the file list, the price and Add stacked under them. The three tiles stay in one row with short labels.

All 100 product cards blocks