All Components at a Glance
This page lists all React components available under @webbycrown/layout-suite/src/components. Every component can be imported directly from @webbycrown/layout-suite.
ArticleDetail
Detail layout for long-form articles or stories.
import { ArticleDetail } from "@webbycrown/layout-suite";ArticleMasonry
Masonry grid of article tiles for editorial landing pages.
import { ArticleMasonry } from "@webbycrown/layout-suite";ArticleNav
In-article navigation for headings, sections, or anchors.
import { ArticleNav } from "@webbycrown/layout-suite";ArticleTile
Card-style preview for a single article or post.
import { ArticleTile } from "@webbycrown/layout-suite";AssuranceStrip
Row of trust signals like support, returns, or guarantees.
import { AssuranceStrip } from "@webbycrown/layout-suite";AuthorBadge
Compact author avatar and metadata for content pieces.
import { AuthorBadge } from "@webbycrown/layout-suite";BannerBlend
Marketing banner with blended background imagery and copy.
import { BannerBlend } from "@webbycrown/layout-suite";BannerElite
Premium hero-style banner for high-impact campaigns.
import { BannerElite } from "@webbycrown/layout-suite";BannerFrost
Frosted glass banner for subtle, on-brand promotions.
import { BannerFrost } from "@webbycrown/layout-suite";BasketBare
Minimal shopping basket layout for simple carts.
import { BasketBare } from "@webbycrown/layout-suite";BasketClassic
Classic basket layout with line items and totals.
import { BasketClassic } from "@webbycrown/layout-suite";BasketElite
Elevated cart experience with richer visuals and CTAs.
import { BasketElite } from "@webbycrown/layout-suite";BasketNeo
Modern basket layout with emphasis on product cards.
import { BasketNeo } from "@webbycrown/layout-suite";BasketSideDrawer
Slide-in side drawer basket for quick cart access.
import { BasketSideDrawer } from "@webbycrown/layout-suite";BradCrump
Breadcrumb-style navigation for product and content hierarchies.
import { BradCrump } from "@webbycrown/layout-suite";CatalogView
Main catalog layout for browsing multiple products.
import { CatalogView } from "@webbycrown/layout-suite";CollectionGrid
Grid of products or items within a collection.
import { CollectionGrid } from "@webbycrown/layout-suite";CollectionMasonry
Masonry-style arrangement for visually rich collections.
import { CollectionMasonry } from "@webbycrown/layout-suite";CollectionShowcase
Feature a curated collection with imagery and copy.
import { CollectionShowcase } from "@webbycrown/layout-suite";CommentThread
Threaded comments for reviews, discussions, or feedback.
import { CommentThread } from "@webbycrown/layout-suite";CompareTable
Side-by-side comparison of plans, products, or SKUs.
import { CompareTable } from "@webbycrown/layout-suite";ContentsNavigator
Table-of-contents style navigation for long pages.
import { ContentsNavigator } from "@webbycrown/layout-suite";ContactStepEmail
Checkout or onboarding step for capturing contact email.
import { ContactStepEmail } from "@webbycrown/layout-suite";CrewPanel
Team or crew showcase with roles and short bios.
import { CrewPanel } from "@webbycrown/layout-suite";DeliveryStepAddress
Checkout step for entering or confirming delivery address.
import { DeliveryStepAddress } from "@webbycrown/layout-suite";DetailsContent
Rich detail content area for specifications or descriptions.
import { DetailsContent } from "@webbycrown/layout-suite";FavoritesList
List of favorited items or saved products.
import { FavoritesList } from "@webbycrown/layout-suite";FilterBar
Horizontal filter controls for catalog or collection pages.
import { FilterBar } from "@webbycrown/layout-suite";FilterRail
Vertical filter rail for more complex filtering setups.
import { FilterRail } from "@webbycrown/layout-suite";FooterLayout
Site-wide footer layout with navigation and legal links.
import { FooterLayout } from "@webbycrown/layout-suite";HeaderClassic
Classic header with logo, primary navigation, and actions.
import { HeaderClassic } from "@webbycrown/layout-suite";HeaderElite
Premium header variant with richer layout and context.
import { HeaderElite } from "@webbycrown/layout-suite";HeaderFrame
Framed header that pairs well with product detail layouts.
import { HeaderFrame } from "@webbycrown/layout-suite";HelpCenter
Hub layout for help topics and support articles.
import { HelpCenter } from "@webbycrown/layout-suite";HelpPulse
Quick help surface with highlighted or trending topics.
import { HelpPulse } from "@webbycrown/layout-suite";HelpShowcase
Showcase curated help content or starter guides.
import { HelpShowcase } from "@webbycrown/layout-suite";HighlightsElite
Premium layout for calling out top product highlights.
import { HighlightsElite } from "@webbycrown/layout-suite";HighlightsStack
Vertically stacked list of key benefits or features.
import { HighlightsStack } from "@webbycrown/layout-suite";HighlightsStream
Scrollable stream of concise product highlights.
import { HighlightsStream } from "@webbycrown/layout-suite";ItemBanner
Hero banner specifically for a single product or item.
import { ItemBanner } from "@webbycrown/layout-suite";ItemInfoPanel
Information panel with price, options, and key details.
import { ItemInfoPanel } from "@webbycrown/layout-suite";ItemLoadingShell
Skeleton state for loading a product detail page.
import { ItemLoadingShell } from "@webbycrown/layout-suite";ItemPageClassic
Classic product detail template with gallery and info.
import { ItemPageClassic } from "@webbycrown/layout-suite";ItemPageFrame
Framed product page layout with structured regions.
import { ItemPageFrame } from "@webbycrown/layout-suite";ItemPageNeo
Modern, high-contrast product detail page.
import { ItemPageNeo } from "@webbycrown/layout-suite";ItemShowcaseBare
Minimal product showcase with focus on imagery.
import { ItemShowcaseBare } from "@webbycrown/layout-suite";ItemShowcaseHeritage
Heritage-inspired product layout with storytelling focus.
import { ItemShowcaseHeritage } from "@webbycrown/layout-suite";ItemShowcaseNeo
Contemporary product showcase with structured content.
import { ItemShowcaseNeo } from "@webbycrown/layout-suite";ItemStoryPanel
Story-driven panel to explain a product’s background.
import { ItemStoryPanel } from "@webbycrown/layout-suite";LostPage
Opinionated 404-style page for “lost” visitors.
import { LostPage } from "@webbycrown/layout-suite";LostPageLoadingShell
Skeleton state while a not-found or error page resolves.
import { LostPageLoadingShell } from "@webbycrown/layout-suite";MediaGallery
Gallery for product images and media assets.
import { MediaGallery } from "@webbycrown/layout-suite";MosaicGrid
Artful mosaic layout for imagery or product shots.
import { MosaicGrid } from "@webbycrown/layout-suite";MotionRail
Animated rail for logos, badges, or product highlights.
import { MotionRail } from "@webbycrown/layout-suite";OrderRecapPanel
Order summary panel for checkout confirmation.
import { OrderRecapPanel } from "@webbycrown/layout-suite";OriginPanel
Story panel focused on a product’s origin or craftsmanship.
import { OriginPanel } from "@webbycrown/layout-suite";PageStepper
Paged step indicator for multi-step flows.
import { PageStepper } from "@webbycrown/layout-suite";PathCrumb
Single crumb element used inside breadcrumb trails.
import { PathCrumb } from "@webbycrown/layout-suite";PathCrumbs
Composed breadcrumb trail for navigation paths.
import { PathCrumbs } from "@webbycrown/layout-suite";PaymentStepMethod
Checkout step to choose and configure payment method.
import { PaymentStepMethod } from "@webbycrown/layout-suite";PlansBoard
Board-style layout for viewing multiple pricing plans.
import { PlansBoard } from "@webbycrown/layout-suite";PlansElite
Premium pricing layout with highlighted featured tiers.
import { PlansElite } from "@webbycrown/layout-suite";PlansStream
Scrollable stream of pricing or subscription plans.
import { PlansStream } from "@webbycrown/layout-suite";ProgressDots
Dot-based progress indicator for carousels or steps.
import { ProgressDots } from "@webbycrown/layout-suite";PromoBadge
Small promotional badge for discounts or limited offers.
import { PromoBadge } from "@webbycrown/layout-suite";PurchaseActions
Cluster of primary purchase-related actions (add to cart, buy now).
import { PurchaseActions } from "@webbycrown/layout-suite";PurchaseCardPanel
Card-style panel summarizing purchase details.
import { PurchaseCardPanel } from "@webbycrown/layout-suite";PurchaseFlowBare
Minimal multi-step purchase flow scaffolding.
import { PurchaseFlowBare } from "@webbycrown/layout-suite";PurchaseFlowElite
Feature-rich purchase flow with guidance and reassurance.
import { PurchaseFlowElite } from "@webbycrown/layout-suite";PurchaseFlowNeo
Modern purchase experience optimized for clarity.
import { PurchaseFlowNeo } from "@webbycrown/layout-suite";PurchaseFlowPulse
Dynamic purchase flow with progress and status cues.
import { PurchaseFlowPulse } from "@webbycrown/layout-suite";PurchaseHeaderBar
Header bar variant tailored for checkout or purchase pages.
import { PurchaseHeaderBar } from "@webbycrown/layout-suite";PurchaseLoadingShell
Skeleton UI for loading purchase-related flows.
import { PurchaseLoadingShell } from "@webbycrown/layout-suite";PurchaseStepper
Step indicator for purchase or onboarding sequences.
import { PurchaseStepper } from "@webbycrown/layout-suite";QtyPicker
Quantity picker control for product ordering.
import { QtyPicker } from "@webbycrown/layout-suite";QuickPeekModal
Modal for quickly previewing a product without leaving context.
import { QuickPeekModal } from "@webbycrown/layout-suite";RatingWall
Wall of ratings and snippets of reviews for social proof.
import { RatingWall } from "@webbycrown/layout-suite";ReachUsLoadingShell
Skeleton state for “contact us” or support layouts.
import { ReachUsLoadingShell } from "@webbycrown/layout-suite";ReachUsNeo
Modern contact or reach-out layout with multiple channels.
import { ReachUsNeo } from "@webbycrown/layout-suite";ReachUsNeo
Modern contact or reach-out layout with multiple channels.
import { ReachUsNeo } from "@webbycrown/layout-suite";ReachUsPanel
Compact panel for showing primary contact options.
import { ReachUsPanel } from "@webbycrown/layout-suite";RelatedRail
Horizontal rail of related or recommended products.
import { RelatedRail } from "@webbycrown/layout-suite";ReviewsCarousel
Carousel of customer reviews and testimonials.
import { ReviewsCarousel } from "@webbycrown/layout-suite";ReviewsTimeline
Timeline view of reviews over time or releases.
import { ReviewsTimeline } from "@webbycrown/layout-suite";SearchBar
Search input bar for catalog or help experiences.
import { SearchBar } from "@webbycrown/layout-suite";ShareBar
Inline sharing bar for sending links to social channels.
import { ShareBar } from "@webbycrown/layout-suite";SharePanel
Panel with expanded sharing options and metadata.
import { SharePanel } from "@webbycrown/layout-suite";SortBar
Sorting controls for catalog and collection views.
import { SortBar } from "@webbycrown/layout-suite";StarRating
Star-based rating display for products or content.
import { StarRating } from "@webbycrown/layout-suite";StoryPanel
Panel layout for storytelling or long-form narratives.
import { StoryPanel } from "@webbycrown/layout-suite";TeamSection
Full team section for “About” or company pages.
import { TeamSection } from "@webbycrown/layout-suite";TechSpecsPanel
Technical specifications panel for product details.
import { TechSpecsPanel } from "@webbycrown/layout-suite";TrialStepOffer
Step in a flow focused on offering trials or promotions.
import { TrialStepOffer } from "@webbycrown/layout-suite";UploadDropArea
Drag-and-drop upload area for files or assets.
import { UploadDropArea } from "@webbycrown/layout-suite";ValueHighlights
Grid or list of key value props for your product.
import { ValueHighlights } from "@webbycrown/layout-suite";ViewToggle
Toggle between grid, list, or other catalog views.
import { ViewToggle } from "@webbycrown/layout-suite";WarrantyStepCover
Checkout step for warranty or protection plan selection.
import { WarrantyStepCover } from "@webbycrown/layout-suite";WorkGallery
Gallery of case studies, projects, or portfolio items.
import { WorkGallery } from "@webbycrown/layout-suite";