shadcn.io is not affiliated with official shadcn/ui
New Collection Storefront Block for Vue
A collection launch panel: the collection's name and a sentence, three counted numbers (pieces, colours, sizes), six drawn knitwear pieces with New badges, words-only stock and a Quick add, and an early access email field.
Installation
Overview
Announce a collection and let people ask for early access, with this launch panel for Vue with Ark UI. A header says what is new at Almsley, a knitwear label. A hairline frame with a plus mark on each corner opens with the collection's name and a sentence, then three figures (pieces, colours and sizes) that are counted from the six pieces below, not typed. The pieces are drawn knitwear in hairline cells, each with a Badge saying New, the price, its greys and sizes, stock in words (In stock, Low: 3 left, Back about 18 Nov) and an outline Quick add Button that raises the Bag count in the band's heading. The last band is an early access email Field with the block's one Shine Button: a valid address answers that you are on the list in this demo, a bad one marks the field and puts focus in it. It's built from Badge, Button, Field, Input, Shine Button and Guides, with a CSS entrance only. For a launch page, a seasonal drop or a pre-order teaser.
FAQ
How do I fill it with my own collection?
Edit PIECES. Each has an id, a name, the price in cents, its colours and sizes, how many units there are (0 is sold out, three or fewer is low) and, for a sold-out piece, the restock date. The three figures at the top, the stock wording and the dots are all worked out from those.
What does Quick add do?
It raises the Bag count and the piece's own count in the page and says so in the status line, up to the number left. A sold-out piece keeps its button, marked unavailable, and pressing it says when the piece is back. Nothing is bought or saved; connect the handler to your cart.
What happens to the email address?
Nothing leaves the page. A valid-looking address (something, an at sign, something, a dot, something) answers "You are on the early access list in this demo"; anything else marks the field with a message and moves focus into it. To make it real, post the address to your mailing list in the submit handler and show its response in the same status line, and add a consent line if your region needs one.
Why is stock written in words?
So it does not depend on colour. Each piece has a small dot too, but the words carry the meaning: In stock, Low with the number left, or Back about a date. The date is typed, so it reads the same for everyone.
How does it look on a phone?
The three figures stay in one row, the pieces go two up and the email field and the button stack, the button full width. The Bag count stays in the heading of the pieces band.
Is it accessible?
The email field has a visible label, its error is attached to it and read when it appears, and the status line is a polite live region that is present from the start. Each Quick add button names its piece for a screen reader, since several share the same visible words. The knits are decorative drawings.