@sankhyatronics/SankhyaUI

The core UI library for the SankhyaUI system. Build dynamic, JSON-driven portals with ease.
Pure view React components (React 19) designed for seamless integration with headless CMS platforms.

Explore the Docs & Storybook »

Sample App »

Features

• Highly Modular: Each component is independent and purely visual.
• CMS Ready: Designed to work with Storyblok, Contentful, or custom JSON backends.
• Tailwind Integrated: Uses Tailwind CSS for modern, responsive designs.
• Dynamic Rendering: Includes a DynamicRenderer to map JSON data directly to React components.

Installation

Using pnpm (recommended):

pnpm add @sankhyatronics/sankhya-ui

Using npm:

npm install @sankhyatronics/sankhya-ui

Using yarn:

yarn add @sankhyatronics/sankhya-ui

Quick Start

1. Import Styles

Import the CSS file at the root of your application (e.g., main.tsx or App.tsx):

import '@sankhyatronics/sankhya-ui/styles';

2. Using DynamicRenderer

The DynamicRenderer is the heart of SankhyaUI for CMS-driven pages. It iterates over a list of content blocks and renders the appropriate component.

import { DynamicRenderer } from '@sankhyatronics/sankhya-ui';

// Example data usually fetched from a CMS API
const pageData = [
  {
    type: "Hero", // Matches the component name
    data: {
      Title: "Hello World",
      SubTitle: "Welcome to my portal"
    }
  },
  {
    type: "Stats",
    data: {
      items: [
        { label: "Users", value: "10k+" },
        { label: "Revenue", value: "$5M" }
      ]
    }
  }
];

function App() {
  return <DynamicRenderer data={pageData} />;
}

3. Using Individual Components

You can also import and use components individually:

import { Hero, Card } from '@sankhyatronics/sankhya-ui';

function LandingPage() {
  return (
    <>
      <Hero data={{ Title: "My Landing Page", SubTitle: "Built with SankhyaUI" }} />
      <Card title="Feature 1" description="Amazing feature" />
    </>
  );
}

Available Components

Layout & Structure

• BentoGrid: A flexible grid layout for displaying varied content.
• Card: Standard card component for items.
• ContentBlock: Generic content container.
• FeatureSplit: Left/right split content for features.
• FeaturesSection: A full section to showcase multiple features.
• FeatureItem: Individual item within a features section.
• ItemsAccordion: Accordion-style list for FAQs or details.

Navigation

• Header: Main site header.
• Footer: Site footer.
• MenuGrid: Grid-based menu layout.
• MenuGridItem: Individual item providing navigation within a grid.
• MenuItem: Standard menu item.
• Dropdown: Dropdown menu component.

Inputs & Actions

• PromoBanner: Call-to-Action section to drive user engagement.
• IconButton: Button with an icon.
• Select: Dropdown selection input.

Branding & Marketing

• Hero: Top-of-page hero section.
• Carousel: A sliding carousel component for displaying multiple Hero items.
• Stats: Section to display statistics or numbers.
• Testimonials: Section for user feedback and reviews.

Development

To run the project locally for development:

pnpm dev

To build the library:

pnpm build

To run the linter:

pnpm lint

License

Distributed under the MIT License. See LICENSE for more information.