Stackables Components

A collection of reusable React components designed for use with Contentstack projects. These components are built with Tailwind CSS and designed to work seamlessly with Contentstack's content modeling capabilities.

Installation

npm install stackables-components

Quick Start

import { HeroBanner, ProductCard } from '@contentstack-solutions/stackables-components';

// Import the required styles
import '@contentstack-solutions/stackables-components/styles/globals.css';

function MyPage() {
  return (
    <div>
      <HeroBanner 
        heading="Welcome to Our Site"
        subheading="Discover amazing products"
        cta_button={{ text: "Get Started", link: "/products" }}
      />
      <ProductCard 
        product_name="Amazing Product"
        description="This product will change your life"
        price={99.99}
      />
    </div>
  );
}

Available Components

Hero Banners

• HeroBanner: Full-width gradient hero with CTA button
• SplitHeroBanner: Split layout hero with content and image placeholder

Carousels

• ImageCarousel: Interactive image carousel with navigation

Product Components

• ProductCard: Individual product display card
• ProductGrid: Grid layout for multiple products

Cards

• FeatureCard: Feature highlight card with icon

Forms

• ContactForm: Customizable contact form

Navigation

• NavigationBar: Responsive navigation with mobile menu

Footers

• FooterMultiColumn: Multi-column footer with links

Container Width System

Components use a flexible container width system. You can control the maximum width using CSS custom properties:

/* Set global container width */
.component-container {
  --container-width: 1200px;
}

/* Or use preset classes */
<div className="container-1440">
  <HeroBanner />
</div>

Available preset classes:

• container-768 (768px)
• container-1024 (1024px)
• container-1280 (1280px)
• container-1440 (1440px - default)
• container-1600 (1600px)
• container-1920 (1920px)

Styling

This library requires Tailwind CSS. Make sure your project has Tailwind CSS configured. The components use utility classes and should integrate seamlessly with your existing Tailwind setup.

TypeScript Support

Full TypeScript definitions are included. Import types for better development experience:

import { HeroBannerProps, ProductCardProps } from '@contentstack-solutions/stackables-components';

const myHeroProps: HeroBannerProps = {
  heading: "Welcome",
  subheading: "Get started today"
};

Contributing

This is a Contentstack Solutions project. For contributions or issues, please contact the Contentstack Solutions team.

License

MIT