Start with an example.
Make it your own.
A curated collection of distinct interface patterns built with Sveltewind. Browse live demos, try the interactions, and copy the exact Svelte source into your project. Every example follows the style and color you choose in Settings.
Browse examples
46 examples
Landing pages
SaaS landing page
A complete team workspace website with features, pricing, FAQs, and an interactive signup form.
Landing pages
Creative studio landing page
An editorial agency website with selected work, services, process, and a project inquiry form.
Landing pages
Neighborhood restaurant landing page
A welcoming restaurant website with a seasonal menu, opening hours, and table reservation flow.
Landing pages
Online course landing page
A learning website with curriculum, instructor introduction, lesson previews, FAQs, and enrollment.
Hero sections
Centered launch hero
A focused announcement, large centered headline, paired actions, and a local early-access signup.
Hero sections
Split product hero
A two-column SaaS introduction with an interactive product mockup and workflow selector.
Hero sections
Developer tool hero
A terminal-led introduction with package-manager tabs and a copyable installation command.
Hero sections
Conference registration hero
An event-led layout with date, location, speakers, ticket selection, and reservation feedback.
Hero sections
Editorial publication hero
An asymmetric magazine cover with a featured story, reading panel, and issue contents.
Hero sections
Product collection hero
A storefront introduction with a CSS product illustration, color selection, and a working bag action.
Workspaces
Kanban project board
Move tasks between columns, filter by assignee, and add work to the backlog.
Workspaces
Appointment scheduler
Choose a day, select an available time, and confirm a booking with a contact name.
Workspaces
Monthly event calendar
Navigate months, inspect a day’s events, and add a named event to the selected date.
Workspaces
Role permission matrix
Edit a grid of role permissions, apply a preset, and save an explicit summary.
Workspaces
Folder and file explorer
Navigate nested folders using breadcrumbs, search the current directory, and inspect file details.
Workspaces
Notification inbox
Filter unread messages, mark notifications individually, and clear the unread count in bulk.
Workspaces
Organization tree
Expand a nested team hierarchy, select a group, and add a member to that group.
Workspaces
Weekly priorities checklist
Complete tasks, track the finished count, and add a new priority without losing progress.
Workspaces
Searchable team directory
Search and sort people, select rows, and download the selected records as a CSV file.
Forms & accounts
Notification preferences
Configure independent notification switches and save the enabled-option count.
Forms & accounts
Contact sales form
Submit a labeled contact form with native validation, a field summary, and a reset action.
Forms & accounts
Password validation checklist
Check password requirements as you type, reveal the password, and validate matching confirmation.
Forms & accounts
Verification code entry
Enter or paste six digits, move between fields with the keyboard, and verify a demo code.
Forms & accounts
Restricted file upload
Select images with file-type and size restrictions, inspect selected files, and clear the selection.
Forms & accounts
Destructive action dialog
Review a destructive action in a modal, cancel with Escape, or explicitly confirm the demo action.
Commerce & finance
Shopping cart with discount
Change quantities, remove products, apply a coupon, and see subtotal, shipping, and total update.
Commerce & finance
Editable invoice builder
Add line items, edit quantities and prices, adjust tax, and calculate the invoice total.
Commerce & finance
Split-bill calculator
Divide a bill between guests with an adjustable tip and a transparent per-person breakdown.
Commerce & finance
Inventory reorder planner
Inspect low-stock items, calculate suggested reorder quantities, and create a local purchase-order summary.
Commerce & finance
Plan comparison table
Compare feature availability side by side and hide shared features to focus on the differences.
Commerce & finance
Subscription pricing cards
Compare three tiers, switch monthly and annual prices, and select a plan.
Commerce & finance
Product detail card
Choose a product option and quantity, then update the demo cart count.
Content & community
Comment thread with replies
Post comments, add inline replies, and toggle reactions on individual messages.
Content & community
Messaging inbox
Switch between conversations, read the message history, and send a local reply.
Content & community
Community poll
Choose an answer, cast one vote, and inspect percentage bars calculated from the results.
Content & community
Designer profile
Show a person’s biography and expertise, with a follow toggle and an updating follower count.
Showing 36 of 46 examples