Tag · tutorial
Posts on tutorial.
40 posts filed under this topic.
The UI libraries worth reaching for on a SaaS landing in 2026
shadcn, Tailwind UI, Park UI, Aceternity, Magic UI, Origin UI. Six libraries, the jobs each one is actually good at, and the trap of combining them.
- ui-libraries
- landing
- tutorial
Settings pages that don't sprawl
Every product's settings start sane and end as a junk drawer. The structure, the rules, and the conventions that keep settings findable past year two.
- settings
- dashboard
- tutorial
Changelog pages that build trust over time
A changelog is your most under-rated marketing surface. The structure that makes it skimmable, the cadence that makes it work, and the entries worth writing.
- changelog
- marketing
- tutorial
File uploaders that don't feel cheap
Drag-drop, paste, progress, retry. The five elements every file upload needs, and the small touches that separate a real product from a wrapper around a file input.
- upload
- forms
- tutorial
Date pickers users don't actually hate
The most-cursed input in product UI, and the small set of decisions that turn it into one users almost don't notice.
- date-picker
- forms
- tutorial
Notification centers that respect attention
Toasts confirm, notifications inform. The anatomy of a notification center users actually open, plus the rules that keep it from becoming spam.
- notifications
- tutorial
- patterns
Tabs, accordions, and steppers: pick the right one
Three surfaces that look similar and behave nothing alike. A field guide to picking the one that actually fits, plus the rules that make each one quiet.
- tabs
- patterns
- tutorial
Charts in product UI without the marketing varnish
Dashboard charts aren't marketing graphics. The four chart types worth shipping, and the editorial rules that keep them quiet and readable.
- charts
- dashboard
- tutorial
Tooltips and popovers without the nagging
When a tooltip helps, when a popover replaces a modal, and the small accessibility rules that make both feel calm instead of clingy.
- tooltips
- tutorial
- patterns
Loading states beyond the spinner
Skeletons, optimistic UI, progress bars. The four loading patterns worth shipping, and the latency thresholds that decide which one.
- loading-states
- tutorial
- ux
The launch day distribution stack: where to actually post
Product Hunt, Hacker News, Reddit, X, LinkedIn, Bluesky, Indie Hackers. The order, the copy, and the post-launch surfaces that compound for a year.
- launch
- distribution
- growth
- tutorial
Your footer is a second hero, treat it like one
Mega-footers, minimal footers, and the quiet conversion work the bottom of the page does when no one's watching.
- footer
- tutorial
- navigation
Navigation patterns that stay out of the way
Sticky bars, mega menus, sidebars, mobile sheets. The four navigation models, and the rules that make each one quiet.
- navigation
- tutorial
- patterns
A design tokens cheat sheet for solo founders
Color, type, spacing, radius, shadow, motion. The minimum-viable token system, the names that scale, and the file you can paste into your project this afternoon.
- design-tokens
- tutorial
- design-systems
FAQ sections that actually answer the question
Accordions, two-column, search-driven, and the brutal honesty about which questions should be on the page versus in your docs.
- faq
- tutorial
- conversion
Auth flows that don't make users rage-quit
Magic links, social, passwords, passkeys. The actual data on what converts, and the small UX details that quietly halve drop-off.
- auth
- tutorial
- conversion
Toast notifications without the spam
When to use a toast, when to use a banner, when to use nothing. The three placement rules and the timing tradeoffs nobody documents.
- notifications
- tutorial
- ui
The anatomy of a hero section that actually converts
The first 600 pixels decide whether someone stays. Here's what the best product teams ship, and why.
- hero
- tutorial
- conversion
Data tables that respect the user
Sticky headers, sane defaults, and the unglamorous rules that make a table usable past 50 rows.
- data-table
- dashboard
- tutorial
Framer vs Webflow vs Next.js for your marketing site
Three tools, three jobs, and the decision most solo founders get wrong. A real tradeoff matrix, plus the case for shipping in the boring choice.
- framer
- webflow
- nextjs
- landing
Multistep forms that don't make users rage-quit
Progress indicators, save-and-resume, and the single biggest UX mistake teams make with onboarding forms.
- forms
- onboarding
- tutorial
Dashboard layouts that actually work
Sidebar+main, top-tabs, kanban, data-grid. The four dashboard archetypes, when each one fits, and the rules that keep dense pages from feeling cramped.
- dashboard
- tutorial
- patterns
Magnetic buttons and other microinteractions worth shipping
The handful of motion details that earn their keep, and the dozens that don't.
- motion
- interaction
- tutorial
Page transitions that don't annoy on the second visit
View Transitions, route-level fades, and why most slick page animations should be turned off after the first session.
- motion
- tutorial
- interaction
Forms that feel fast (even when they're not)
Inline validation, field grouping, the multi-step pattern, and the small details that turn a 12-field form into something users actually finish.
- forms
- tutorial
- ux
Mobile nav beyond the hamburger
The bottom bar, the floating pill, and four other patterns, when each one wins on touch.
- navigation
- mobile
- tutorial
Feature sections that still work in 2026
Bento, alternating rows, and feature tables, when each pattern wins, and which ones are quietly dying.
- features
- landing
- tutorial
Error states are where trust lives or dies
404s, 500s, payment failures, and the recovery copy that decides whether the user blames you or themselves.
- errors
- empty-states
- tutorial
Empty states are your second chance at onboarding
The empty dashboard is the user's first real impression of your product. Most teams ship a shrug, here's how to ship a tutorial instead.
- empty-states
- tutorial
- onboarding
The pricing page patterns SaaS uses in 2026
Three plans isn't a law. Here are the patterns the best teams ship, and the per-plan moves that actually move conversion.
- pricing
- tutorial
- conversion
Dark mode is a design decision, not a CSS variable
Why most dark modes look broken, and the contrast, depth, and color rules that separate good dark UI from inverted light UI.
- dark-mode
- design-foundations
- tutorial
Modals, sheets, and drawers: when to interrupt
Dialog, sheet, drawer, popover, four ways to overlay content, four different jobs. The decision tree, the spec, and the accessibility traps.
- modals
- tutorial
- patterns
Typography for product UI is mostly about restraint
Two fonts, four sizes, and the tracking, leading, and weight choices that make product type feel premium.
- typography
- design-foundations
- tutorial
Command menus 101: why every modern app has one
From Spotlight to Linear's K-bar. What makes a good command menu, and how to ship one without rebuilding it from scratch.
- interaction
- tutorial
- patterns
Spacing systems that scale past the first screen
The 4px / 8px debate, the cases for both, and how to keep spacing consistent when your product grows to 200 screens.
- spacing
- design-foundations
- tutorial
Social proof: logos, numbers, stories
Three tiers of social proof, ordered by trust. When to use a logo strip, when to use a metric, and when only a real story will do.
- social-proof
- tutorial
- conversion
Color systems for product teams that aren't design teams
Primary, neutrals, semantic colors, and how to ship a usable palette without hiring a brand consultant.
- color
- design-foundations
- tutorial
Developer portfolios that get replies, not just praise
The four-section structure recruiters skim in 90 seconds, and why most engineer portfolios pitch the wrong thing.
- portfolio
- developers
- tutorial
The comparison table that closes the deal
Vs competitor, vs alternative, vs status quo. Three comparison patterns, when each one converts, and how to ship one without looking petty.
- comparison
- tutorial
- conversion
The launch day landing page checklist
What to ship on day-of, what to ship the week before, and the post-launch surfaces most teams forget.
- launch
- landing
- tutorial