rmnr
DocsLayoutsModulesDirectoryBest PracticeAgentsInstall

Command Palette

Search for a command to run...

New
  • Introduction
  • Installation
  • Architecture
  • Stack
  • Directory
  • Install with Agent
    new
  • Bundle Builder
    new
  • MCP server
    new
  • VPS Control Room
    new
  • Changelog
    new
  • All website templates
    new
  • Personal Brand OS
  • Agency Studio OS
  • Notion Page Clone OS — localStorage demo (pointer to open-silong for production)
  • SaaS Marketing OS
  • Kreator Studio OS
  • Konsultan OS
  • Wirausaha OS
  • Riset Kit
  • All layouts
  • 19
  • 3
  • 6
  • All slices
    new
  • 2
  • 2
  • 6
  • 3
  • 3
  • 1
  • 1
  • 7
  • 24
  • 6
  • All recipes
Catalog

Layouts

28 cookbook layouts — marketing, dashboard, and CMS shapes. For full apps, see website templates.

Website templatesSlices
28 items

Marketing(19)

cescadesigns

Landing — Hero Carousel

Full-width image carousel hero with auto-fade + dot indicators. Originally CMS-driven via Convex. Best for visual brands.

marketingcarouselimagecms
rahmanef.com

Landing — Asymmetric Masonry

8-slot repeating asymmetric grid. Intersection-observer staggered scroll-reveal. Lifted from rahmanef.com portfolio.

marketingportfoliomasonryscroll-reveal
synthesized

Landing — Bento Grid

Feature-grid marketing landing. Compose Card + Magnetic + KineticHeading. Modern SaaS feel.

marketingbentofeatures
rahmanef.com

Landing — Kinetic Text

Brand-forward landing. Letter-stagger headings + magnetic CTAs + marquee strips. Motion-heavy.

marketingmotiontype
kitab

Hero — Centered

Single-column centered hero with eyebrow pill, headline, sub-copy, and dual CTA. Radial gradient backdrop.

blockherocenteredmarketing
kitab

Hero — Split (Text + Visual)

Two-column hero: left copy + feature list + CTAs, right visual slot. 9-cell mock grid placeholder for product shot.

blockherosplitmarketingproduct
kitab

Hero — Bento Background

Bento mini-grid behind a centered headline. Radial mask focuses the eye on the copy while the grid hints at features.

blockherobentomarketingdecorative
kitab

Hero — Video Loop (dark)

Dark-mode hero with conic-gradient animated backdrop (stand-in for video). Play CTA, headline, dual CTA.

blockherovideomarketingdark
kitab

Hero — Animated Text

Rotating word inside the headline cycles every 2s with gradient text + fade-slide transition. Lightweight, no extra deps.

blockheromotionmarketingkinetic
kitab

Pricing — Three Tier

Classic 3-tier card layout. Middle tier highlighted with Most Popular badge + soft shadow.

blockpricingmarketingsaas
kitab

Pricing — Four Tier

Four-tier with Best Value badge on tier 3. Compact card chrome, 4-column grid that collapses gracefully.

blockpricingmarketingsaas
kitab

Pricing — Monthly/Yearly Toggle

3-tier with a monthly/yearly pill toggle. Yearly price strikethroughs the monthly, -20% savings badge inside the toggle.

blockpricingmarketinginteractive
kitab

Pricing — Feature Comparison

Single comparison table: feature rows × plan columns. Check/Minus icons, header row with prices, sticky CTA row.

blockpricingmarketingcomparisontable
kitab

Pricing — Usage Slider

Range slider drives the price. Tier name and per-seat cost update live. Single-card layout, focus on the math.

blockpricingmarketinginteractiveusage
kitab

Accordion — Classic FAQ

Single-open FAQ accordion. ChevronDown rotates, content reveals below. Clean, compact, perfect for support pages.

blockaccordionfaqmarketing
kitab

Accordion — Grouped Sections

FAQ split into themed groups (Getting Started / Slices / Billing). Each group is its own card. Independent open state per item.

blockaccordionfaqmarketinggrouped
kitab

Accordion — Sidebar Navigation

Docs-style: left nav switches sections, right pane shows the section's accordion. Two-axis navigation in one layout.

blockaccordiondocssidebarnavigation
kitab

Accordion — Smooth Animated

Grid-row transition for true height animation, no janky calc. Each item is a rounded card with rotating plus → primary close icon.

blockaccordionmarketingmotion
kitab

Accordion — Multi-open

All items can be open at once. Expand-all / Collapse-all toggle in header. Best for compare-style reading.

blockaccordionmarketingmulti-open

Dashboard(3)

kitab-core

Dashboard — Three Column

Kitab flagship. Left tree / main / right inspector. Resizable, collapsible, mobile drawer fallback. Used by Database, Tasks, Contacts.

dashboardthree-columnresizableresponsive
synthesized

Dashboard — IDE

Activity bar + tabs + editor + bottom panel. Editor-first apps (notion, code, doc tools).

dashboardideeditor
kitab-core

Dashboard — Mobile Dock

Mobile-first auth app. MobileTopBar + content + MobileDashboardDock bottom nav. Native-app feel on mobile, sidebar on desktop.

dashboardmobilepwa

CMS(6)

kitab-core cms-lite

CMS — Public Storefront

E-commerce / blog public storefront. Convex read-only. Cart context + currency selector + i18n.

cmsecommercestorefront
kitab

Blog — Card Grid

3-column responsive card grid. Cover thumbnail (HSL gradient), title, excerpt, author·date·read meta. Default blog index shape.

blockblogcmsgrid
kitab

Blog — Dense List

Single-column scannable list. Thumbnail left, meta + title + excerpt right. High density, low scroll.

blockblogcmslist
kitab

Blog — Magazine Layout

Editorial spread: large hero post (2/3 width) + secondary featured + tail of headlines. Issue-number header gives quarterly feel.

blockblogcmseditorialmagazine
kitab

Blog — Masonry

CSS columns-based masonry with varying card heights for organic rhythm. break-inside-avoid keeps each card intact.

blockblogcmsmasonry
kitab

Blog — Featured Hero + Tail

Full-bleed cover hero on the first post, then a tight 2-column grid for the rest. Cinematic open, fast scroll for the tail.

blockblogcmsfeaturedhero