@cartigram/brand-ui

The official React brand component library for Cartigram. This package provides standardized UI elements, such as the "Powered By" badge, ensuring brand consistency across all Cartigram-powered applications.

Built with TypeScript, Vite, and Tailwind CSS.

🚀 Installation

Install the package via pnpm:

pnpm add @cartigram/brand-ui

🛠 Required Setup (Tailwind CSS)

This library uses Tailwind CSS utility classes. Because these classes are processed at build-time, you must tell your local Tailwind configuration to scan the library's files in node_modules.

Add the following path to your tailwind.config.js or tailwind.config.ts:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    // ⬇️ IMPORTANT: Add this line to include the library styles ⬇️
    "./node_modules/@cartigram/brand-ui/dist/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

📦 Usage

PoweredBy Component

The PoweredBy component is a ready-to-use badge for attribution. It includes the official Cartigram logo and styling.

import { PoweredBy } from '@cartigram/brand-ui';

const App = () => {
  return (
    <div className="flex justify-center p-10">
      <PoweredBy />
    </div>
  );
};

💎 Features

• TypeScript Ready: Full type definitions included out of the box.
• Dual-Build: Supports both ESM and CommonJS.
• Optimized Assets: Logo assets are handled intelligently by the Vite bundler.
• Server Components: Compatible with Next.js App Router (uses "use client").

📄 License

MIT © Cartigram