Dropline: Limited drop template
Built for the hour everything sells out.
For streetwear, sneaker and merch drops: a city-by-city countdown hero, a promo countdown, the drop grid, a social wall and FAQs about queues and limits.
About the Dropline template
Dropline is built for the hour everything sells out. A split-flap countdown by city, a members-only early access band, the drop grid with stock badges, a social wall from the last drop and FAQs about raffles and limits.
Built for the hour everything sells out. It is a complete limited drop landing page for React and Tailwind CSS 4, assembled from 7 Charcoal UI sections.
Who Dropline is for
- Streetwear and sneaker drops.
- Limited merch releases.
- Artist editions.
- Collectibles.
What is inside
7 sections, top to bottom:
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Event: Conference hero with a split-flap board of cities and dates, a live countdown and the speaker line-up.
- CTA Countdown: Limited-time offer band with a promo code, a live countdown and a shimmering button.
- Product Grid: Shop grid with category chips, sorting, wishlist hearts and a quick-add button that fills the bag.
- Testimonials Tweets: Masonry wall of social posts that fades out at the bottom into a read-more button.
- FAQ Grid: Questions laid out in a grid with a contact card, for short answers.
- Footer Minimal: One quiet row: brand, a few links and the year.
How it is built
Countdown stops, product badges and raffle copy are props. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.
Install Dropline
npx shadcn@latest add @charcoal/droplineTemplates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.
Frequently asked questions
- Can I use Dropline for a client site?
- Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
- Is Dropline a Next.js template?
- It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.
Sections in this template
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Event: Conference hero with a split-flap board of cities and dates, a live countdown and the speaker line-up.
- CTA Countdown: Limited-time offer band with a promo code, a live countdown and a shimmering button.
- Product Grid: Shop grid with category chips, sorting, wishlist hearts and a quick-add button that fills the bag.
- Testimonials Tweets: Masonry wall of social posts that fades out at the bottom into a read-more button.
- FAQ Grid: Questions laid out in a grid with a contact card, for short answers.
- Footer Minimal: One quiet row: brand, a few links and the year.