Examples
Real-world UI patterns built entirely with Cookest UI components. Each example shows how components compose together to create production-ready interfaces.
Recipe Card
A full recipe page with ingredients, step-by-step instructions, nutrition facts, and user reviews.
Login Form
Authentication flow with login/signup tabs, form validation, password visibility, and social login.
Settings Panel
User preferences page with profile editing, notification toggles, language select, and danger zone.
Dashboard
Analytics overview with stat cards, activity feed, popular recipes table, and skeleton loading.
Meal Planner
Weekly meal planning grid with add/remove meals, daily nutrition, and shopping list sidebar.
Product Page
E-commerce product detail page with color/size selectors, quantity picker, reviews, and related products.
Social Feed
Social media feed for food sharing with posts, comments, likes, follow suggestions, and trending topics.
Onboarding Wizard
Multi-step onboarding flow with name input, dietary toggles, skill level selection, and summary.
Notification Center
Notification inbox with read/unread state, tabs for All, Unread, and Mentions, and a mark-all-read action.
Pricing Plans
Three-tier pricing cards with monthly/annual toggle, feature lists, and a highlighted 'Most Popular' plan.
User Profile
Chef profile page with avatar, stats bar, profile completion progress, follow action, and tabbed recipe grid.
Order Checkout
Multi-section checkout form with contact, delivery, add-ons, payment fields, and a live order summary sidebar.
Terminal CLI
A dark terminal interface for browsing recipes via CLI commands. Shows how components adapt to a radically non-standard aesthetic.
Kitchen Display
Brutalist KDS order board with 4 stage columns, live elapsed timers, allergy badges, and one-click order progression.
Editorial
Bon Appétit-style magazine layout with hero image, pullquotes, recipe sidebar, and author bylines.
Recipe Story
TikTok/Instagram-style step-by-step recipe viewer with snap scrolling, animated content, and nav dots.
Nutrition Dashboard
Data-rich cockpit view with animated SVG macro rings, micronutrient bars, meal log, and a nutrition score.
Kinetic Menu
A fine-dining tasting menu where font weight pulses 100→900 on hover. Typography is the entire UI — no images, no cards.
Filmstrip
Vertical scroll converts to a horizontal cinematic pan through 7 street food cities. A traveling camera dolly built with framer-motion.