shadcn.io is not affiliated with official shadcn/ui
Press Kit Contact Block for Ark UI
A press desk with a press kit of three real files that download from the page beside a press form with an inquiry switch and a deadline date picker that marks a date within two days Rush.
Installation
Overview
A press section for React with Ark UI, split by a hairline that meets the page's top rule with a + mark. At the start, under a compact header, a press kit of three rows: a logo mark as SVG, a fact sheet as text and the specifications as CSV, each a row built from Item with its type and size in bytes and a Download Trigger that saves a real file generated in the browser. At the end, a form: name, email, outlet, what you need in a Segment Group (an interview, a review unit or images), a deadline in a Date Picker that marks a date within two days of today with a "Rush" Badge, and a note. Submitting it checks the required fields, shows each problem under its field and moves focus to the first one; a valid request turns into a confirmation in the same space that repeats the outlet, the request, the deadline and whether it is a rush. On a phone the form comes straight after the header and the press kit after it. It's built from Item, Download Trigger, Date Picker, Segment Group, Badge, Field, Input, Textarea, Guides, Shine Button and Button. For brands, studios and publishers with a press page.
FAQ
Are the press kit files real?
Yes, and tiny: the logo is a 272-byte SVG drawn in currentColor, the fact sheet and the specifications are short text and CSV. They are built from strings at the top of the file and saved with the Download Trigger, so nothing is hosted. For a real kit, set each row's data to a fetch of your file (the trigger takes a Blob, a string or a promise of either) and write its real size in the description.
How is the Rush badge decided?
When a date is chosen, the block counts the days from today and shows the badge when that is two or fewer; the clock is read at that moment, never during render, so the page renders the same on the server and in the browser. Days before today are shown as unavailable in the calendar. Change RUSH_DAYS to move the line.
How does the date picker work with the keyboard?
The field takes a typed date (mm/dd/yyyy), and the calendar button opens a grid you can move through with the arrow keys and pick from with Enter. The month it opens on is the current one. The field is named by its label, and the hint under the row explains the Rush mark. The same Ark date picker powers it on every base.
Where does the form send its data?
Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with a call to your press inbox: details holds the name, email, outlet, request, deadline, rush flag and note. press@voltmere.example is on the reserved .example domain.