Skip to content
Dethink Components
Dethink studio

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
29
Featured recipes
25
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.

29 recipesfound.

  • Beacon incident-response landing

    A product landing page with a live incident-replay hero and a pinned, scroll-driven stage that assembles a working incident app from real components, followed by feature tabs, pricing toggle, customer stories, FAQ and a validated trial sign-up.

    Advanced
    MarketingLanding pageScrollytellingIncident response

    Components

    • NavigationMenu
    • HeroTextAnimation
    • ScanGridBackground
    • Steps
    • AvatarGroup

  • Maison Sillage perfume store

    An editorial perfume storefront with generated photography, scent discovery, bottle-size selection, animated reviews and a local shopping bag with demo checkout.

    Advanced
    MarketingCommercePerfumeLuxury

    Components

    • Button
    • IconButton
    • Badge
    • Card
    • CardScroller

  • Ollo modular robot landing

    A vibrant launch page for a fictional modular home robot. The robot stands centre stage in a pinned scene, and as you scroll its Blender-rendered parts fly apart while each feature appears beside the part it describes, followed by a module card scroller, spec tabs, and a finish configurator.

    Advanced
    MarketingLanding3DScroll

    Components

    • HeroTextAnimation
    • Button
    • Badge
    • Card
    • CardScroller

  • Alex Morgan professional CV

    An editorial designer portfolio with generated photography, filterable case studies, a career timeline, CV download, local contact flow and thoughtful motion.

    Advanced
    MarketingPortfolioCVPersonal

    Components

    • Badge
    • Button
    • Card
    • CardScroller
    • Separator

  • Forma AI agents studio

    An ivory-and-violet AI studio landing with an animated ribbon hero, runnable agent lab, selectable specialists, integration previews, engagement scopes, and a local project brief.

    Advanced
    MarketingAIAgentsAutomation

    Components

    • HeroTextAnimation
    • LightStreaksBackground
    • NavigationMenu
    • RevealButton
    • Button

  • The Current news outlet

    A rich broadcast-style news homepage with an editorial hero, generated photography, latest and most-read stories, search, saved articles, video previews, opinion, and a newsletter demo.

    Advanced
    MarketingNewsEditorialLanding

    Components

    • NavigationMenu
    • Typography
    • Card
    • Badge
    • Button

  • Automation software landing

    A shader-led software automation company landing with three runnable workflow samples, activity history, pricing, FAQ, and a matching social login.

    Advanced
    MarketingLandingAutomationShaders

    Components

    • SilkFlowBackground
    • ShaderHeroText
    • Tabs
    • Card
    • Button

  • Automation social login

    A split-layout sign-in page with a silk shader panel, Google and GitHub demos, email validation, password visibility, recovery, and retryable feedback.

    Intermediate
    AuthLoginSocialAutomation

    Components

    • SilkFlowBackground
    • ShaderHeroText
    • Button
    • Badge
    • FormField

  • 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 tiles, latency and incident-load charts, ranked alert sources, date filters, and incident data.

    Advanced
    DashboardsDashboardSidebarCommand palette

    Components

    • Sidebar
    • Breadcrumb
    • CommandPalette
    • DataTable
    • DateRangePicker

  • Issue tracker

    An issue list filtered every way at once: a text query, chips with impact counts and nested AND/OR groups, saved views in a sidebar, the filter in the URL, and an assistant that proposes filters to review.

    Advanced
    DataIssuesFiltersSaved views

    Components

    • QueryInput
    • FilterBar
    • Saved views & URL state
    • FilterAssistant
    • DataTable

  • Logs dashboard

    A log explorer with a typed query bar, filter chips and groups, server-side facet counts, a volume histogram, saved views, URL state and an assistant that turns requests into reviewable filters.

    Advanced
    DashboardsLogsFiltersQuery

    Components

    • QueryInput
    • FilterBar
    • Saved views & URL state
    • FilterAssistant
    • DataTable

  • 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