A comprehensive collection of packages and UI components for building modern web applications, powered by React, TypeScript, and Tailwind CSS.

This monorepo contains the following packages:

• hng-sdk - Base package that re-exports all sub-packages

  npm install hng-sdk

• @hng-sdk/ui - React UI component library with Tailwind CSS and shadcn/ui

  npm install @hng-sdk/ui

• @hng-sdk/email - React email templates built with @react-email and Tailwind CSS

  npm install @hng-sdk/email

# Install all packages
npm install hng-sdk

# Or install individual packages
npm install @hng-sdk/ui @hng-sdk/email

import { Button } from '@hng-sdk/ui';
import '@hng-sdk/ui/globals.css';

function App() {
  return (
    <Button variant="default" size="lg">
      Click me
    </Button>
  );
}

import { WelcomeEmail } from '@hng-sdk/email';
import { render } from '@react-email/render';

const emailHtml = render(WelcomeEmail({ username: 'John' }));
// Send email using your preferred service

This project uses pnpm workspaces for managing the monorepo.

• Node.js 18+
• pnpm 10+

# Clone the repository
git clone https://github.com/hngprojects/hng-sdk.git
cd hng-sdk

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Run development mode
pnpm dev

# Build all packages
pnpm build

# Run tests (when available)
pnpm test

# Clean build artifacts
pnpm clean

# Run development server for docs
cd src/apps/docs
pnpm dev

• UI Components - Component library documentation
• Email Templates - Email templates documentation
• Contributing Guide - How to contribute to this project
• Code of Conduct - Community guidelines

• Language: TypeScript 5.7
• Framework: React 19
• Styling: Tailwind CSS v4
• Build Tool: TypeScript Compiler
• Package Manager: pnpm
• Email: React Email
• UI Components: Radix UI + shadcn/ui
• Monorepo: pnpm Workspaces

hng-sdk/
├── src/
│   ├── apps/
│   │   └── docs/              # Documentation site (Next.js)
│   └── packages/
│       ├── hng-sdk/           # Base package
│       ├── ui/                # UI component library
│       └── emails/            # Email templates
├── package.json               # Root package.json
├── pnpm-workspace.yaml        # Workspace configuration
├── tsconfig.base.json         # Shared TypeScript config
└── README.md                  # This file

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is licensed under the ISC License - see the LICENSE file for details.

• React Email - For the amazing email framework
• shadcn/ui - For the beautiful UI components
• Radix UI - For the accessible component primitives
• Tailwind CSS - For the utility-first CSS framework

• 📧 Email: [email protected]
• 💬 Discord: Join our community
• 🐛 Issues: GitHub Issues

• Add more UI components
• Create more email templates
• Add comprehensive testing
• Improve documentation
• Add Storybook for component playground
• Create CLI tool for scaffolding

Made with ❤️ by the HNG Team