@kibamail/stack

The Open-source messaging platform for transactional and marketing email.

Installation

npm install @kibamail/stack
# or
yarn add @kibamail/stack
# or
pnpm add @kibamail/stack

Usage

JavaScript/TypeScript

import { PageContainer } from '@kibamail/stack';

function App() {
  return (
    <PageContainer>
      <h1>Hello World</h1>
    </PageContainer>
  );
}

CSS with Tailwind

To use the styles with Tailwind, you need to:

1. Import the raw CSS file in your main CSS file:

/* Import the styles in your CSS file */
@import '@kibamail/stack/css/styles.css';

2. Configure your Tailwind to scan the @kibamail/stack components by extending your tailwind.config.js:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    // Add this line to include @kibamail/stack components
    './node_modules/@kibamail/stack/dist/**/*.{js,mjs}'
  ],
  // You can also extend the base configuration from @kibamail/stack
  presets: [
    require('@kibamail/stack/tailwind.config.js')
  ],
  theme: {
    extend: {
      // Your theme extensions
    },
  },
  plugins: [
    // Your plugins
  ],
};

This approach allows you to use the raw CSS files and let your project's Tailwind process them, avoiding duplicate CSS generation.

Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build the package
pnpm build

License

ISC