Get started
What is in the kit
Every group and category of the kit on one page, with the live count of components and variants. Start with the guide for your kind of website.
On this page
Which components for which website#
For the most common kinds of websites, here is a proven selection, roughly in the order they appear on the page. Every name leads to the component with all its variants, every row to its collection with previews and one command for all.
- SaaS landing pageFrom the promise to the trial
- Local businessCafé, shop or trade around the corner
- Medical practiceTrust, hours and the next free slot
- Online shopFrom the shelf to the order
- PortfolioWork first, then the person behind it
- Blog or magazineFront page, reading and coming back
- EventProgram, tickets and the countdown
- App dashboardThe frame and the screens inside it
- AI productWhat the AI does, shown honestly
- Creator pageOne person, their work and their audience
Every group and category#
The kit holds 353 components with 1,630 variants in 8 groups and 170 categories. Every number on this page is read from the registry when the site is built.
Every category has its own page with live previews at three widths. The figures next to each category count components and variants, 2 / 10 means two components with ten variants.
Marketing#
Sections that sell. Heroes, features, pricing, social proof and calls to action. 50 components, 304 variants.
- Hero1 component, 17 variantsThe first screen of a page.
- Features1 component, 15 variantsWhat a product does, in grids, rows and bento layouts.
- Logo clouds1 component, 8 variantsCustomers and partners at a glance.
- Stats1 component, 8 variantsNumbers that prove something.
- Pricing1 component, 11 variantsPlans, tiers and comparisons.
- Testimonials1 component, 11 variantsQuotes, reviews and ratings.
- Call to action1 component, 11 variantsThe invitation to the next step.
- FAQ1 component, 7 variantsFrequent questions as accordions and grids.
- Newsletter2 components, 12 variantsSign-up for updates.
- Banners2 components, 9 variantsAnnouncement bars and promotions.
- Popups and consent1 component, 7 variantsCookie consent, offers and announcements in a dialog.
- Services1 component, 7 variantsWhat you offer, as cards, lists and detail rows.
- Use cases1 component, 6 variantsOne product, shown for the people who use it.
- Security and trust1 component, 7 variantsCertificates, data protection, uptime and guarantees.
- Changelog and roadmap1 component, 6 variantsWhat shipped, what comes next.
- Launch and waitlist1 component, 6 variantsCountdowns, waitlists and launch moments.
- Product tour1 component, 6 variantsGuided walks through a product, step by step.
- Press and awards2 components, 10 variantsCoverage, awards and media kits.
- AI features1 component, 6 variantsSections that show what AI does in a product.
- App download1 component, 5 variantsStore buttons, QR codes and phones for the page that sends people to your app.
- Donations and support1 component, 4 variantsAmounts, campaign goals and the impact of every gift.
- Problem and solution1 component, 5 variantsThe pain visitors know, then the way out.
- Objections1 component, 5 variantsDoubts before buying, answered with proof.
- Calculators2 components, 10 variantsROI and savings, worked out by the visitor.
- Quiz and product finder1 component, 5 variantsA few questions that lead to one recommendation.
- Free trial1 component, 5 variantsTrial sign-ups that leave nothing unclear.
- Referral and partners2 components, 10 variantsCustomers who bring customers, partners who resell.
- Community1 component, 5 variantsThe people around a product and how to join them.
- Open source1 component, 5 variantsRepository figures, contributors, sponsors and editions.
- Manifesto1 component, 5 variantsWhat a company stands for, in its own voice.
- Offer1 component, 5 variantsOne offer with its value, bonuses and ways to pay made plain.
- Lead magnet1 component, 4 variantsSomething useful in exchange for an email address.
- Scroll stories4 components, 20 variantsSections that tell while the page scrolls. Cards that stack, rows that move sideways, pictures that zoom open and media that stays while chapters change.
- Scroll journeys3 components, 13 variantsA number, a picture or a marker that travels while the page scrolls. Counters through stages, flipbook frames and paths that draw themselves.
- Scroll effects3 components, 13 variantsMoving type and depth that make a page memorable. Layers at different speeds, lines that slide with the scroll and text as a window onto a picture.
- Scroll reveals and transitions3 components, 15 variantsParts that open to reveal what lies behind, cards that fan and pile up, and sections that hand over to the next one.
Content#
Sections that tell and ask. Blog, long reads, team, about, docs, legal pages, contact and forms. 49 components, 250 variants.
- Blog3 components, 16 variantsArticle lists, article headers and article text.
- Gallery1 component, 7 variantsImages in grids, carousels and lightboxes.
- Team1 component, 8 variantsThe people behind the work.
- About2 components, 11 variantsStory, values, mission and locations.
- Content1 component, 8 variantsText and image, quotes, long reads and checklists.
- Process1 component, 7 variantsSteps, timelines and how it works.
- Contact1 component, 8 variantsForms, locations, opening hours and booking.
- Comparison1 component, 5 variantsBefore and after, us and the others.
- Integrations1 component, 5 variantsConnections and tools.
- Error pages1 component, 5 variants404, 500, maintenance and coming soon.
- Careers1 component, 7 variantsOpen roles, culture and job details.
- Case studies1 component, 6 variantsCustomer stories with results.
- Portfolio1 component, 6 variantsProjects and work, as grids and detail pages.
- Events and webinars1 component, 6 variantsAgendas, speakers, tickets and recordings.
- Help center1 component, 6 variantsKnowledge bases, guides and support entry points.
- Legal pages1 component, 5 variantsImprint, privacy policy, terms and cookie notices people can read.
- Documentation1 component, 4 variantsDocs layouts, quickstarts and API references.
- Search results1 component, 5 variantsResult pages, filters, instant search and the empty result.
- Resources and downloads1 component, 4 variantsGuides, templates and files to download, open or unlock.
- Podcast1 component, 4 variantsShows, episodes, chapters and show notes.
- Editorial3 components, 15 variantsMagazine fronts, listicles and reviews, set for reading.
- Authors and interviews2 components, 10 variantsAuthor pages, contributor lists, expert boxes and bylines, plus interviews as classic Q and A, portrait and round table.
- Glossary1 component, 5 variantsTerms of a field, A to Z, by topic, in a text and as a search.
- Recipes1 component, 5 variantsRecipe pages, shopping lists, cook mode and recipe collections.
- Data stories2 components, 10 variantsInfographics and scroll stories that tell numbers as pictures.
- Long reads1 component, 5 variantsThe article itself, set for reading: notes, figures, chapters and essays.
- Surveys and feedback3 components, 14 variantsSurveys, ratings and feedback that people like to fill in.
- Form states3 components, 12 variantsConfirmations, errors that recover, saved drafts and the way back into a form.
- Request forms4 components, 16 variantsQuotes, bookings, callbacks and document uploads, each asking only what the business needs to answer.
- Applications and sign-ups3 components, 13 variantsJob applications, event registrations and longer forms split into calm steps.
- Address, payment and consent3 components, 12 variantsAddress fields that follow the country, payment methods and the choices about email and data.
Layout#
Navbars, footers, page headers, sub navigation and app shells that hold a site together. 8 components, 50 variants.
- Navbars1 component, 9 variantsHeaders, menus and mega menus.
- Footers1 component, 9 variantsThe end of every page.
- Sidebars1 component, 5 variantsNavigation for applications.
- Page headers2 components, 12 variantsThe heads of inner pages and sections. Titles with actions, tabs, figures and search.
- App shells1 component, 5 variantsThe frame of an application. Sidebar, header and panes that fit together on every screen.
- Sub navigation2 components, 10 variantsNavigation inside a page and on phones. Section bars with scroll spy, tables of contents and bottom tab bars.
App#
Screens for products. Sign-in, dashboards, tables, settings, billing and AI. 39 components, 200 variants.
- Authentication1 component, 9 variantsSign-in, sign-up, one-time codes and onboarding.
- Dashboards1 component, 6 variantsOverviews, analytics, boards and activity.
- Tables1 component, 6 variantsData with search, filters, selection and paging.
- Settings1 component, 5 variantsProfile, account, notifications and billing.
- AI and chat3 components, 16 variantsChats, prompts, agents and answers with sources.
- Calendar1 component, 5 variantsCalendars, schedulers and time slots.
- Inbox and messages1 component, 5 variantsMail, threads and conversations.
- Notifications1 component, 6 variantsNotification centers and activity logs.
- Files1 component, 6 variantsFile managers, uploads and previews.
- Projects1 component, 6 variantsProject lists, overviews and timelines.
- Profiles1 component, 6 variantsUser and company profile pages.
- Onboarding1 component, 6 variantsFirst-run checklists, welcome screens and setup flows.
- Billing and usage2 components, 10 variantsPlans, seats, payment methods, usage and limits.
- Developer settings3 components, 15 variantsAPI keys, webhooks and feature flags.
- Security and access2 components, 10 variantsTwo-factor setup, passkeys, roles and permissions.
- Import, export and history3 components, 15 variantsImport wizards, exports and version history.
- Automation and builders3 components, 14 variantsRules, workflows and form builders.
- AI answers4 components, 18 variantsAnswers with sources, citations, comparisons and feedback.
- AI writing and creation3 components, 13 variantsWriting help, generated images and prompt libraries.
- AI setup3 components, 14 variantsModels, settings, memory, privacy and the first steps.
- AI assistants2 components, 9 variantsSupport chat for websites and voice assistants for calls.
E-Commerce#
Products, product pages, reviews, cart, checkout, delivery and customer accounts. 21 components, 98 variants.
- Products2 components, 8 variantsProduct grids, lists, rows and lookbooks with filters, quick view and category tiles.
- Categories and collections2 components, 10 variantsThe way into a catalog as tiles, cards and link columns, and the head of a collection page with filters, sort and view.
- Product pages2 components, 11 variantsGallery, options, reviews and buying.
- Cart and checkout2 components, 10 variantsCart, checkout in one or more steps, express payment and the order confirmation.
- Orders and returns1 component, 5 variantsEverything after the purchase. Order history, order details with tracking, printable invoices, returns and subscriptions.
- Bundles and subscriptions2 components, 9 variantsBundles with set discounts and volume prices, and subscriptions with plans, a box builder and a delivery schedule to skip or pause.
- Account and loyalty4 components, 19 variantsCustomer accounts, wishlists, gift cards and rewards.
- Delivery and stores4 components, 17 variantsDelivery dates, stock, pickup and store finders.
- Reviews and questions2 components, 9 variantsProduct reviews, customer photos and questions with answers.
Industries#
Ready sections for practices, restaurants, trades, hotels, schools, clubs and creators. 45 components, 231 variants.
- Menus1 component, 7 variantsMenus for restaurants, cafés and bars.
- Appointments1 component, 6 variantsBooking for practices, salons and studios.
- Listings1 component, 6 variantsProperties, cars and rentals with filters and details.
- Courses1 component, 6 variantsCurricula, lessons and learning progress.
- Rooms and stays1 component, 5 variantsHotels, rentals and availability.
- Classes and schedules1 component, 6 variantsClass schedules for gyms, yoga and sports clubs.
- Medical practice1 component, 5 variantsServices, doctors, consultation hours, insurance and online booking for practices.
- Law firm1 component, 5 variantsAreas of law, lawyers, first consultation, results and fees.
- Salon and spa1 component, 5 variantsTreatments, prices, stylists, gift vouchers and spa days.
- Automotive1 component, 5 variantsInventory with filters, vehicle page, test drive, financing and trade-in.
- Travel1 component, 5 variantsDestinations, trip overview, itinerary, dates and prices, inclusions.
- Sports club1 component, 5 variantsNext match, fixtures, league table, squad and membership.
- Coworking1 component, 5 variantsPlans by team size, room booking, amenities, day pass and locations.
- Museum1 component, 5 variantsExhibitions, tickets, timed entry, floor guide and a work in focus.
- Cinema1 component, 5 variantsShowtimes, seat picker, film page, coming soon and prices.
- School1 component, 5 variantsProgrammes, application, school year, teachers and open day.
- Trades1 component, 5 variantsServices by area, before and after, quote request, emergency service and materials.
- Insurance1 component, 5 variantsTariff calculator, real situations, claim reporting, products and advisor finder.
- Banking1 component, 5 variantsAccounts, cards, fixed deposit rates, savings goal and account switch.
- Personal brand3 components, 15 variantsLink in bio, résumé and freelancer page for one person.
- Speakers and media kits2 components, 10 variantsSpeaker pages with talks, showreel and booking, and media kits with reach, audience and sponsorship packages for one person.
- Creators3 components, 15 variantsDigital products, book launches and memberships for people who make things.
- Coaching and consulting2 components, 10 variantsPrograms, packages, methods, discovery calls and results.
- Artists and musicians3 components, 15 variantsWorks, exhibitions, press kits, tour dates and photo bookings.
- Dental practice1 component, 5 variantsTreatments on the arch, anxious patients, cleaning reminder, cost estimate and toothache guide.
- Veterinary practice1 component, 5 variantsServices per species, emergency dial, vaccination plan, new patient and care plans.
- Therapy practice1 component, 5 variantsFirst conversation, approaches, waiting times, costs and help in a crisis, calm by design.
- Weddings and events1 component, 5 variantsPackages by guests, the day as a timeline, free dates, rooms by setup and the budget.
- Architecture studio1 component, 5 variantsWork phases, philosophy with a drawing, project sheet, materials and building cost.
- Tax advisor1 component, 5 variantsDeadlines, client portal, refund estimate, document checklist and monthly retainers.
- Estate agent1 component, 5 variantsValuation, sale process, seller report, sold references and market report.
- Florist1 component, 5 variantsBouquet builder, occasions, same day delivery, greeting card and workshops.
- Winery1 component, 5 variantsWine list with taste profiles, vineyards, tastings, case builder and vintage report.
- Daycare1 component, 5 variantsConcept in the room, daily routine, enrollment, groups and settling in.
- Driving school1 component, 5 variantsLicence classes, cost calculator, intensive courses, learning path and theory quiz.
- Care services1 component, 5 variantsHelp by need, care grade check, care home costs, a day of visits and consultation.
- Festival1 component, 5 variantsLine up as a poster, timetable by stage, tickets with release phases, site map and travel.
Elements#
The small parts. Buttons, inputs, cards, overlays, charts and effects. 114 components, 373 variants.
- Buttons6 components, 20 variantsButtons, groups and toggles.
- Forms and inputs9 components, 22 variantsInputs, textareas, selects, checkboxes, radios, switches, sliders, search fields and form layouts.
- Pickers and selections7 components, 21 variantsDate, time and color pickers, number fields, comboboxes, multi selects and tag inputs that keep every choice in view.
- Special input fields6 components, 20 variantsPhone numbers with country, card details, one-time codes, file uploads, profile pictures and signatures.
- Cards1 component, 10 variantsCards for people, products, stats and links.
- Overlays9 components, 21 variantsDialogs, sheets, popovers, tooltips and toasts.
- Navigation elements6 components, 15 variantsTabs, accordions, breadcrumbs, pagination, steppers and link lists.
- Menu bars and switchers3 components, 14 variantsMenu bars with keyboard support, floating actions that follow the scroll and language switchers for every layout.
- Data display6 components, 15 variantsIcons, badges, avatars, tags, keyboard keys and ratings.
- Progress and states4 components, 13 variantsProgress bars and rings, skeletons while content loads, empty states with the next step and stat cards with a key number.
- Lists, trees and timelines4 components, 17 variantsDescription lists for details, sortable lists to drag, tree views for folders and timelines for events in order.
- Charts7 components, 22 variantsLine, bar, area and donut charts, radial charts, heatmaps and funnels for the everyday numbers.
- Comparison charts5 components, 22 variantsBefore and after, rankings, targets, shares of a whole and waterfalls that show how one value becomes another.
- Statistical charts4 components, 20 variantsScatter plots, distributions from histogram to box plot, radar profiles and treemaps for data with many points.
- KPI, live and map charts6 components, 22 variantsGauges, progress rings and sparklines for key numbers, data that keeps arriving, price candles and values by region on a map.
- Text effects5 components, 15 variantsHeadlines that arrive. Blur in, letters and words one by one, typewriter and scramble.
- Text accents5 components, 16 variantsGradient sweeps, shimmer, hand-drawn markers, rotating words and numbers that count up, for the one line that matters.
- Backgrounds6 components, 19 variantsAurora, gradient mesh, noise, glowing dots, fading grids and a spotlight that follows the pointer.
- Beams, particles and motion6 components, 18 variantsBeams of light, meteors, particles, orbits, endless marquees and a light that travels around a card border.
- Media6 components, 19 variantsVideo and audio players, image compare, device frames and QR codes.
- Code and JSON2 components, 8 variantsCode blocks with file tabs, line numbers, highlights and a terminal style, and JSON viewers that fold, search and copy paths.
- Panels and splitters1 component, 4 variantsResizable panes, split views and folding rails.
Visuals#
Mockups, campaign pictures, animations and graphics. Pictures for your pages, drawn in code and ready to use. 27 components, 124 variants.
- Mockups2 components, 16 variantsBrowser windows, phones, laptops and device scenes with your content inside.
- Campaign mockups3 components, 16 variantsSocial posts, emails and store screenshots as pictures for your pages, without any network or store mark.
- Animations4 components, 12 variantsMotion scenes in SVG and CSS. Chats, cursors, dashboards and pages that build themselves.
- Data animations3 components, 9 variantsData that flows between systems, a turning globe with arcs and pins, and networks of nodes with signals that ripple outward.
- Micro animations4 components, 21 variantsIcons that move with meaning, status symbols that draw themselves, confetti for good moments and drawings that follow the scroll.
- Graphics5 components, 18 variantsDrawn app screens, photos, maps, spot illustrations and hand-drawn annotations for every industry.
- Patterns and shapes3 components, 17 variantsBackground patterns, decorative shapes and image effects in the theme colors, from dots and contours to duotone and reveals.
- Placeholders and generators3 components, 15 variantsPlaceholder pictures for every industry, generated logos and avatars from a seed for mockups, logo clouds and team pages.