Recipes

Complete product surfaces built from Dethink Components.

Browse copyable, live compositions for common SaaS, dashboard, internal-tool, and AI-native workflows. Every recipe links back to the components that power it.

Total recipes: 19
Featured recipes: 15
Categories: 8

Browse recipes

Filter by workflow or search across recipe names, tags, and component usage. Gallery previews stay lightweight; open a recipe for the full interactive surface and source.

AI Chat Studio
A complete AI conversation workspace with thinking and tool activity, approvals, streaming, sources, attachments, recovery, and independent conversation history.
Advanced
AIAIChatStreaming
Components
- Chat
- Button
- IconButton
- Avatar
- Badge
Relay AI research landing
A paper-and-cobalt research landing page with an editorial hero, three explorable research samples, source-linked answers, evidence dialogs, and a guided sample workspace.
Intermediate
MarketingLandingAIResearch
Components
- Tabs
- Card
- Badge
- Button
- Dialog
Onboarding workspace
A responsive workspace onboarding flow with a generic top navigation and a branch-aware step sequence for solo and team setups.
Intermediate
AuthOnboardingStepsNavigation
Components
- Steps
- FormField
- Input
- Button
- Link
Daymark hospitality launch landing
A warm editorial launch page for hospitality, restaurant, and retail teams, with a live opening room, sunlit hero, richly styled guest-note card rail, and opening-day walkthrough.
Advanced
MarketingLandingHospitalityEditorial
Components
- HeroTextAnimation
- LightStreaksBackground
- RevealButton
- CardScroller
- CardStack
Lumen creative operations landing
An expressive, dark-mode landing page for a fictional creative operating system, combining a kinetic hero, interactive project console, animated background layers, a narrative card rail, proof deck, and compact navigation dock.
Advanced
MarketingLandingCreative OpsMotion
Components
- HeroTextAnimation
- RevealButton
- NavDock
- CardScroller
- CardStack
SaaS landing page
A conversion-focused SaaS page with product navigation, animated hero copy, feature bento cards, pricing, FAQ, and CTA.
Advanced
MarketingLandingHeroBento
Components
- NavigationMenu
- HeroTextAnimation
- Button
- RevealButton
- Card
Security platform landing
A zero-trust security product landing page composed almost entirely from interactive Dethink components: a NavigationMenu pill nav, an animated hero beside a live Tabs/Table/Switch/ProgressCircle console, a reusable Dialog+form that fires Toasts, a defense-in-depth feature bento, an incident-response Timeline, a Switch-driven pricing toggle, and an Accordion FAQ.
Advanced
MarketingLandingSecurityInteractive
Components
- HeroTextAnimation
- NavigationMenu
- Tabs
- Table
- Dialog
Energy orchestration landing
A production-grade clean-energy platform landing page with a Signal Control hero, live dispatch console, operational proof, rollout timeline, audit conversion flow, and FAQ.
Advanced
MarketingLandingEnergyInteractive
Components
- NavigationMenu
- HeroTextAnimation
- Badge
- Button
- RevealButton
Curated travel landing
An editorial slow-travel landing page with a seasonal planning hero, responsive local photography, curated stay cards, a human planning flow, traveller proof, and FAQ.
Advanced
MarketingLandingTravelEditorial
Components
- NavigationMenu
- HeroTextAnimation
- Badge
- Button
- Card
Command-center dashboard
A full app command center with sidebar navigation, breadcrumbs, command search, KPI cards, date filters, and incident data.
Advanced
DashboardsDashboardSidebarCommand palette
Components
- Sidebar
- Breadcrumb
- CommandPalette
- DataTable
- DateRangePicker
CRUD resource manager
A record-management surface with searchable rows, row actions, edit drawer, create dialog, delete confirmation, empty state, and toast feedback.
Advanced
DataCRUDDataTableDrawer
Components
- DataTable
- Dialog
- Drawer
- DropdownMenu
- Select
Settings and billing
An account settings page with profile fields, feature toggles, plan selection, invoice rows, usage controls, and a danger zone.
Intermediate
SettingsSettingsBillingForms
Components
- FormField
- Switch
- RadioGroup
- Select
- NumberInput
Release readiness
A shared release room with an owner-led checklist, live readiness meters, an activity timeline, and a final approval dialog.
Intermediate
DashboardsReleaseChecklistApproval
Components
- Checkbox
- Feedback States
- Tabs
- Timeline
- Dialog
Integrations hub
A searchable connector directory with connected-tool filters, a configuration drawer, sync preferences, pending feedback, and saved local settings.
Intermediate
SettingsIntegrationsSettingsDrawer
Components
- Tabs
- Drawer
- Input
- FormField
- Switch
Invoice approval desk
A finance review queue with searchable invoices, line-item totals, approval and correction dialogs, and a persistent local decision record.
Intermediate
BillingInvoicesApprovalFinance
Components
- Table
- Select
- Dialog
- Input
- Textarea
AI workspace
An AI-native workspace using current navigation, command, timeline, loading, and composition primitives before dedicated chat components exist.
Advanced
AIAIWorkspaceTimeline
Components
- Sidebar
- NavDock
- CommandPalette
- Textarea
- Timeline
Customer Support Copilot
A communication-focused support inbox with a responsive app shell, selectable customer conversations, semantic message history, and an accessible text-reply workflow.
Advanced
AISupportInboxCopilot
Components
- Sidebar
- Avatar
- Badge
- FormField
- Textarea
Scheduler and booking
A scheduling surface that pairs internal availability management with a public booking panel and event detail drawer.
Advanced
SchedulingSchedulerBookingAvailability
Components
- SlotPlanner
- Calendar
- DateTimePicker
- DateRangePicker
- Drawer
SaaS checkout order summary
A B2B checkout-style subscription flow with plan selection, usage inputs, order table, progress, alert messaging, and confirmation.
Intermediate
BillingCheckoutOrder summarySubscription
Components
- Card
- RadioGroup
- Input
- NumberInput
- Table