@akshar-technosoft/ui

✨ A complete, type-safe UI component library featuring elegant layouts, data displays, and utility components. Built with TypeScript, Tailwind CSS, and React.

🌟 Features

• Layout System: Pre-built, composable layout components (AppContainer, AppHeader, AppContent, AppFooter)
• Type Safety: Fully typed components with intelligent prop completion
• Context-Aware: Built-in app meta management for titles, breadcrumbs, and actions
• Utility-First: Includes helpful utilities like GeneralHelper for formatting and UI helpers
• Customizable: Themeable and extensible with Tailwind CSS

📦 Installation

# Using npm
npm install @akshar-technosoft/ui

# Using yarn
yarn add @akshar-technosoft/ui

# Using pnpm
pnpm add @akshar-technosoft/ui

Peer Dependencies:

npm install react react-dom clsx tailwind-merge lucide-react

🚀 Quick Start

1. Setup App Meta Provider

// App.tsx
import { AppMetaProvider } from '@tmj/ui';

function App() {
  return (
    <AppMetaProvider>
      <MyPage />
    </AppMetaProvider>
  );
}

2. Use Layout Components

import {
  AppContainer,
  AppHeader,
  AppContent,
  AppFooter
} from '@tmj/ui';

function DashboardPage() {
  return (
    <AppContainer>
      <AppHeader />
      <AppContent>
        <h1>Dashboard Content</h1>
      </AppContent>
      <AppFooter />
    </AppContainer>
  );
}

3. Manage Page Metadata

import { usePageTemplate } from '@tmj/ui/hooks';

function ProductPage() {
  usePageTemplate({
    title: 'Product Details',
    breadcrumbs: [
      { label: 'Home', href: '/' },
      { label: 'Products', href: '/products' },
      { label: 'Current Product' }
    ],
    primaryActions: <Button>Edit Product</Button>
  });

  return <div>...</div>;
}

🧩 Core Components

Layout System

| Component | Description | |-----------------|-------------| | AppContainer | Root layout container with spacing and padding controls | | AppHeader | Top navigation bar with title, breadcrumbs, and actions | | AppContent | Flexible content area with multiple layout modes | | AppFooter | Bottom bar with secondary actions and pagination |

Utility Components

import { GeneralHelper } from '@tmj/ui';

// Format currency
const price = GeneralHelper.formatINR(1500, { compact: true }); // ₹1.5K

// Status badge
<GeneralHelper.StatusBadge status="active" variant="outline" />

// Copy to clipboard
<GeneralHelper.CopyToClipboard text="Copy me!" />

🛠️ Advanced Usage

Custom Route Types

// lib/app-meta.ts
import { createAppMetaContext } from '@tmj/ui/context/app-meta';

type AppRoutes = '/' | '/dashboard' | '/products/:id';

const { AppMetaProvider, useAppMeta } = createAppMetaContext<AppRoutes>();

export { AppMetaProvider, useAppMeta };

Theming

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: 'var(--color-primary)',
          light: 'var(--color-primary-light)',
        }
      }
    }
  }
}

📚 API Reference

AppMeta Context

| Hook/Component | Description | |---------------|-------------| | AppMetaProvider | Provides context for page metadata | | useAppMeta() | Access and update app metadata | | usePageTemplate() | Hook to set page metadata |

GeneralHelper Utilities

| Method | Description | |--------|-------------| | formatINR() | Format numbers as Indian Rupees | | formatDate() | Date formatting utilities | | toProperCase() | String case conversion | | StatusBadge | Configurable status indicator | | CopyToClipboard | Clipboard copy component |

🎨 Design Philosophy

1. Consistent: Unified design language across components
2. Composable: Mix and match layout components as needed
3. Type-Safe: Full TypeScript support with intelligent hints
4. Performant: Optimized for fast rendering and updates
5. Accessible: Built with WAI-ARIA standards

🛣️ Roadmap

• [x] Core layout components
• [x] App meta management system
• [x] Data table component
• [x] Data template component
• [] Form components
• [x] Dark mode support
• [] Component playground

🤝 Contributing

We welcome contributions! Please open an issue to discuss your ideas or submit a PR.

📄 License

MIT © Tirth Jasoliya