Feature grids, a testimonial wall, glowing CTA banners, a working FAQ accordion, logo cloud and pricing tiers — full sections that snap together into a landing page.
Feature Grid Section
Why UIDrops
Batteries-included components with the polish of a design agency.
No installs, no config. Grab the JSX and ship it today.
320px to 4K — every breakpoint hand-tuned.
Prompt bars, streaming states, thinking indicators.
WCAG AA contrast, focus rings and semantics baked in.
Pure Tailwind + React. No runtime library lock-in.
Swap the palette in one place, keep every component.
Section eyebrow, headline and six icon cards with hover lift — the workhorse of every landing page.
| 1 | <section "color:#79c0ff">className="bg-[#07070f] px-6 py-16 sm:px-10"> |
| 2 | <div "color:#79c0ff">className="mx-auto max-w-4xl text-center"> |
| 3 | <p "color:#79c0ff">className="text-xs font-bold uppercase tracking-[0.25em] text-violet-400">Why UIDrops</p> |
| 4 | <h2 "color:#79c0ff">className="mt-3 text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> |
| 5 | Everything you need to ship |
| 6 | </h2> |
| 7 | <p "color:#79c0ff">className="mx-auto mt-3 max-w-lg text-white/40"> |
| 8 | Batteries-included components with the polish of a design agency. |
| 9 | </p> |
| 10 | </div> |
| 11 | |
| 12 | <div "color:#79c0ff">className="mx-auto mt-12 grid max-w-4xl gap-4 sm:grid-cols-2 lg:grid-cols-3"> |
| 13 | {features.map((f) => ( |
| 14 | <div "color:#79c0ff">key={f.title} |
| 15 | "color:#79c0ff">className="group rounded-2xl border border-white/8 bg-white/[0.03] p-6 transition-all hover:-translate-y-1 hover:border-violet-400/30 hover:bg-white/[0.05]"> |
| 16 | <div "color:#79c0ff">className={"flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br shadow-lg " + f.grad}> |
| 17 | <f.icon "color:#79c0ff">className="h-5 w-5 text-white" /> |
| 18 | </div> |
| 19 | <h3 "color:#79c0ff">className="mt-4 text-sm font-bold text-white">{f.title}</h3> |
| 20 | <p "color:#79c0ff">className="mt-1.5 text-xs leading-relaxed text-white/40">{f.body}</p> |
| 21 | </div> |
| 22 | ))} |
| 23 | </div> |
| 24 | </section> |
Testimonial Wall
Wall of love
Replaced our component library in a weekend. The spotlight cards alone are worth it.
Sarah R.
CTO, Lumina
The AI prompt bar is pixel-perfect. Shipped our chat product two sprints early — our investors literally asked who did the design.
Dev K.
Founder, Voltify
Finally, dark-mode components that don't look like a hacker movie.
Priya S.
Design lead
Copy, paste, done. My clients think I doubled my rates for a reason.
Rahul M.
Freelancer
The bento grid section got us more compliments than our actual product. 10/10.
Ana T.
PM, Nebula
Accessible out of the box. Our audit passed first try.
Chris L.
Eng manager
A masonry wall of quotes in mixed heights with star ratings and highlighted pull-quote.
| 1 | <section "color:#79c0ff">className="bg-[#060609] px-6 py-16 sm:px-10"> |
| 2 | <div "color:#79c0ff">className="mx-auto max-w-4xl text-center"> |
| 3 | <h2 "color:#79c0ff">className="text-3xl font-extrabold tracking-tight text-white">Loved by 12,000+ builders</h2> |
| 4 | </div> |
| 5 | |
| 6 | <div "color:#79c0ff">className="mx-auto mt-12 max-w-4xl columns-1 gap-4 sm:columns-2 lg:columns-3 [&>*]:mb-4 [&>*]:break-inside-avoid"> |
| 7 | {quotes.map((q, i) => ( |
| 8 | <figure "color:#79c0ff">key={q.name} |
| 9 | "color:#79c0ff">className={"rounded-2xl border p-5 " + |
| 10 | (q.featured |
| 11 | ? "border-violet-400/30 bg-gradient-to-b from-violet-600/15 to-transparent" |
| 12 | : "border-white/8 bg-white/[0.03]")}> |
| 13 | <div "color:#79c0ff">className="text-xs text-amber-400">★★★★★</div> |
| 14 | <blockquote "color:#79c0ff">className="mt-3 text-sm leading-relaxed text-white/75">{q.text}</blockquote> |
| 15 | <figcaption "color:#79c0ff">className="mt-4 flex items-center gap-2.5"> |
| 16 | <span "color:#79c0ff">className={"flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br text-[9px] font-black text-white " + q.g}> |
| 17 | {q.initials} |
| 18 | </span> |
| 19 | <div> |
| 20 | <p "color:#79c0ff">className="text-xs font-bold text-white">{q.name}</p> |
| 21 | <p "color:#79c0ff">className="text-[10px] text-white/35">{q.role}</p> |
| 22 | </div> |
| 23 | </figcaption> |
| 24 | </figure> |
| 25 | ))} |
| 26 | </div> |
| 27 | </section> |
CTA Banner
Join 12,000+ developers building faster with UIDrops. Free forever.
No credit card · Cancel anytime · MIT licensed
A glowing gradient banner with orbiting blobs, dual CTAs and a trust line — the conversion closer.
| 1 | <section "color:#79c0ff">className="relative overflow-hidden bg-[#07070f] px-6 py-16 sm:px-10"> |
| 2 | <div "color:#79c0ff">className="relative mx-auto max-w-3xl overflow-hidden rounded-[2rem] bg-gradient-to-br from-violet-700 via-fuchsia-700 to-indigo-800 p-10 text-center sm:p-14"> |
| 3 | {/* glow blobs */} |
| 4 | <div "color:#79c0ff">className="pointer-events-none absolute -left-16 -top-16 h-56 w-56 rounded-full bg-white/15 blur-3xl" |
| 5 | "color:#79c0ff">style={{ animation: "blob 8s ease-in-out infinite" }} /> |
| 6 | <div "color:#79c0ff">className="pointer-events-none absolute -bottom-20 -right-10 h-56 w-56 rounded-full bg-cyan-400/20 blur-3xl" |
| 7 | "color:#79c0ff">style={{ animation: "blob 10s ease-in-out infinite reverse" }} /> |
| 8 | |
| 9 | <div "color:#79c0ff">className="relative"> |
| 10 | <h2 "color:#79c0ff">className="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> |
| 11 | Ready to ship something beautiful? |
| 12 | </h2> |
| 13 | <p "color:#79c0ff">className="mx-auto mt-3 max-w-md text-white/65"> |
| 14 | Join 12,000+ developers building faster with UIDrops. Free forever. |
| 15 | </p> |
| 16 | <div "color:#79c0ff">className="mt-8 flex flex-wrap items-center justify-center gap-3"> |
| 17 | <button "color:#79c0ff">className="rounded-xl bg-white px-8 py-3 text-sm font-bold text-violet-700 shadow-xl transition hover:bg-violet-50"> |
| 18 | Start free → |
| 19 | </button> |
| 20 | <button "color:#79c0ff">className="rounded-xl border border-white/30 bg-white/10 px-8 py-3 text-sm font-semibold text-white backdrop-blur transition hover:bg-white/20"> |
| 21 | Talk to us |
| 22 | </button> |
| 23 | </div> |
| 24 | <p "color:#79c0ff">className="mt-5 text-xs text-white/45">No credit card · Cancel anytime · MIT licensed</p> |
| 25 | </div> |
| 26 | </div> |
| 27 | </section> |
FAQ Accordion
Yes — every component is free and MIT licensed. Use them in personal and commercial projects, no attribution required.
The components are built with Tailwind classes. Any Tailwind v3+ project works out of the box; tokens are easy to remap.
Absolutely. Interactive components are marked 'use client'; everything else works as server components.
They're UI shells — prompt bars, thinking states, streaming text. Wire them to any LLM API (Claude, GPT, Gemini) with your own fetch logic.
A working accordion — click a question to expand it with a smooth height transition.
| 1 | function Faq() { |
| 2 | const [open, setOpen] = useState(0); |
| 3 | const faqs = [ |
| 4 | { q: "Is it really free?", a: "Yes — every component is free and MIT licensed. Use them in personal and commercial projects, no attribution required." }, |
| 5 | { q: "Do I need Tailwind CSS?", a: "The components are built with Tailwind classes. Any Tailwind v3+ project works out of the box; tokens are easy to remap." }, |
| 6 | { q: "Can I use these with Next.js App Router?", a: "Absolutely. Interactive components are marked 'use client'; everything else works as server components." }, |
| 7 | { q: "How do the AI components work?", a: "They're UI shells — prompt bars, thinking states, streaming text. Wire them to any LLM API (Claude, GPT, Gemini) with your own fetch logic." }, |
| 8 | ]; |
| 9 | |
| 10 | return ( |
| 11 | <div "color:#79c0ff">className="mx-auto w-full max-w-2xl space-y-3"> |
| 12 | {faqs.map((f, i) => ( |
| 13 | <div "color:#79c0ff">key={f.q} |
| 14 | "color:#79c0ff">className={"overflow-hidden rounded-2xl border transition-colors " + |
| 15 | (open === i ? "border-violet-400/30 bg-violet-500/[0.05]" : "border-white/10 bg-white/[0.02]")}> |
| 16 | <button "color:#79c0ff">onClick={() => setOpen(open === i ? -1 : i)} |
| 17 | "color:#79c0ff">className="flex w-full items-center justify-between px-5 py-4 text-left"> |
| 18 | <span "color:#79c0ff">className="text-sm font-bold text-white">{f.q}</span> |
| 19 | <span "color:#79c0ff">className={"text-white/40 transition-transform duration-300 " + (open === i ? "rotate-45" : "")}>+</span> |
| 20 | </button> |
| 21 | {/* grid-rows trick animates height without JS measurement */} |
| 22 | <div "color:#79c0ff">className={"grid transition-all duration-300 " + (open === i ? "grid-rows-[1fr]" : "grid-rows-[0fr]")}> |
| 23 | <div "color:#79c0ff">className="overflow-hidden"> |
| 24 | <p "color:#79c0ff">className="px-5 pb-4 text-sm leading-relaxed text-white/45">{f.a}</p> |
| 25 | </div> |
| 26 | </div> |
| 27 | </div> |
| 28 | ))} |
| 29 | </div> |
| 30 | ); |
| 31 | } |
Logo Cloud & Stats Strip
12k+
Developers
120+
Components
4.9★
Avg rating
MIT
License
A scrolling marquee of customer logos above a hairline stats strip — instant social proof.
| 1 | {/* marquee — duplicate the list for a seamless loop */} |
| 2 | <div "color:#79c0ff">className="overflow-hidden py-4 [mask-image:linear-gradient(90deg,transparent,black_15%,black_85%,transparent)]"> |
| 3 | <div "color:#79c0ff">className="flex w-max gap-14" "color:#79c0ff">style={{ animation: "marquee 22s linear infinite" }}> |
| 4 | {[...logos, ...logos].map((l, i) => ( |
| 5 | <span "color:#79c0ff">key={i} "color:#79c0ff">className="text-lg font-black tracking-tight text-white/25 transition hover:text-white/60"> |
| 6 | {l} |
| 7 | </span> |
| 8 | ))} |
| 9 | </div> |
| 10 | </div> |
| 11 | |
| 12 | {/* stats strip */} |
| 13 | <div "color:#79c0ff">className="grid grid-cols-2 divide-x divide-white/10 rounded-2xl border border-white/10 bg-white/[0.02] py-5 text-center sm:grid-cols-4"> |
| 14 | {[["12k+", "Developers"], ["120+", "Components"], ["4.9★", "Avg rating"], ["MIT", "License"]].map(([v, l]) => ( |
| 15 | <div "color:#79c0ff">key={l}> |
| 16 | <p "color:#79c0ff">className="text-2xl font-extrabold text-white">{v}</p> |
| 17 | <p "color:#79c0ff">className="mt-0.5 text-[10px] uppercase tracking-widest text-white/30">{l}</p> |
| 18 | </div> |
| 19 | ))} |
| 20 | </div> |
Pricing Section
Pricing
Starter
For side projects
$0/mo
Pro
For professionals
$15/mo
Team
For companies
$49/mo
Three tiers with the popular plan elevated and glowing — annual prices, feature lists and CTAs.
| 1 | const tiers = [ |
| 2 | { name: "Starter", price: "$0", tag: "For side projects", |
| 3 | features: ["3 projects", "Community support", "Core components"], popular: false }, |
| 4 | { name: "Pro", price: "$15", tag: "For professionals", |
| 5 | features: ["Unlimited projects", "AI generation", "Custom domains", "Priority support"], popular: true }, |
| 6 | { name: "Team", price: "$49", tag: "For companies", |
| 7 | features: ["Everything in Pro", "5 seats included", "SSO & audit logs", "SLA support"], popular: false }, |
| 8 | ]; |
| 9 | |
| 10 | <div "color:#79c0ff">className="grid max-w-4xl gap-5 lg:grid-cols-3"> |
| 11 | {tiers.map((t) => ( |
| 12 | <div "color:#79c0ff">key={t.name} |
| 13 | "color:#79c0ff">className={"relative rounded-3xl p-7 " + |
| 14 | (t.popular |
| 15 | ? "bg-gradient-to-b from-violet-600/25 to-transparent ring-2 ring-violet-400/50 shadow-[0_0_60px_rgba(139,92,246,0.25)] lg:-translate-y-3" |
| 16 | : "border border-white/10 bg-white/[0.02]")}> |
| 17 | {t.popular && ( |
| 18 | <span "color:#79c0ff">className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-500 px-3 py-1 text-[10px] font-black uppercase tracking-wider text-white"> |
| 19 | Most popular |
| 20 | </span> |
| 21 | )} |
| 22 | <p "color:#79c0ff">className="text-sm font-bold text-white">{t.name}</p> |
| 23 | <p "color:#79c0ff">className="text-xs text-white/35">{t.tag}</p> |
| 24 | <p "color:#79c0ff">className="mt-4 text-4xl font-extrabold text-white">{t.price}<span "color:#79c0ff">className="text-sm font-medium text-white/35">/mo</span></p> |
| 25 | <ul "color:#79c0ff">className="mt-5 space-y-2"> |
| 26 | {t.features.map((f) => ( |
| 27 | <li "color:#79c0ff">key={f} "color:#79c0ff">className="flex items-center gap-2 text-xs text-white/60"> |
| 28 | <span "color:#79c0ff">className="text-violet-300">✓</span> {f} |
| 29 | </li> |
| 30 | ))} |
| 31 | </ul> |
| 32 | <button "color:#79c0ff">className={"mt-6 w-full rounded-xl py-2.5 text-sm font-bold transition " + |
| 33 | (t.popular |
| 34 | ? "bg-gradient-to-r from-violet-600 to-indigo-600 text-white shadow-lg shadow-violet-500/30" |
| 35 | : "border border-white/12 text-white/70 hover:bg-white/5")}> |
| 36 | {t.popular ? "Start free trial" : "Get started"} |
| 37 | </button> |
| 38 | </div> |
| 39 | ))} |
| 40 | </div> |