@msalehi79/panta-design-system

v1.3.7

Published

2 days ago

Design system with Tailwind and dark/light theme

Downloads

3,013

Panta Design System

A modern, production-ready React component library built with Tailwind CSS — fully typed, with built-in dark/light mode, RTL support, and excellent Next.js compatibility.

✨ Features

20+ ready-to-use components
Dark / Light Theme via CSS variables & ThemeProvider
Full RTL Support for Persian/Arabic UIs
Next.js App Router & Server Components compatible
Tailwind CSS styling
Advanced charts powered by Recharts (Bar, Line, Pie/Donut, Treemap, etc.)
Zero heavy dependencies (only recharts & clsx)
Fully Responsive & Mobile-First
Strong TypeScript support

📦 Installation

npm install @msalehi79/panta-design-system

Peer Dependencies

npm install react react-dom recharts clsx

Add Global Styles

In your main CSS file:

CSS@import "@msalehi79/panta-design-system/styles.css";

Tailwind Config

// tailwind.config.js
module.exports = {
  darkMode: "class",
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@msalehi79/panta-design-system/**/*.{js,ts,jsx,tsx}",
  ],
};

🚀 Quick Start

// app/layout.tsx
import "@msalehi79/panta-design-system/styles.css";
import { ThemeProvider } from "@msalehi79/panta-design-system";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="fa" dir="rtl">
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

// app/page.tsx
import { Button, Header } from "@msalehi79/panta-design-system";

export default function Page() {
  return (
    <>
      <Header title="داشبورد" />
      <Button variant="primary">کلیک کنید</Button>
    </>
  );
}

🧩 Components

| کامپوننت | مستندات فارسی | English Doc | |----------|----------------|------------------| | دکمه (Button) | README.fa.md | README.en.md | | بدنه اصلی (AppShell) | README.fa.md | README.en.md | | انتخاب‌گر با جست‌وجو (SearchableSelect) | README.fa.md | README.en.md | | مودال (Modal) | README.fa.md | README.en.md | | تقویم (DatePicker) | README.fa.md | README.en.md | | جعبه (Box) | README.fa.md | README.en.md | | سلکت (ButtonSelect) | README.fa.md | README.en.md | | متن کوتاه‌شده (HashText) | README.fa.md | README.en.md | | نمودار میله‌ای دوعددی (DoubleBarChart) | README.fa.md | README.en.md | | نمودار خطی دوعددی (DoubleLineChart) | README.fa.md | README.en.md | | نمودار میله‌ای تکی (SingleBarChart) | README.fa.md | README.en.md | | نمودار خطی تکی (SingleLineChart) | README.fa.md | README.en.md | | نمودار دایره‌ای (CircleChart) | README.fa.md | README.en.md | | نمودار درختی (TreeChart) | README.fa.md | README.en.md | | تب (Tabs) | README.fa.md | README.en.md | | جدول (Table) | README.fa.md | README.en.md | | نشان (Badge) | README.fa.md | README.en.md | | بارگزاری کامپوننت (Loader) | README.fa.md | README.en.md | | بارگزاری صفحه (PageLoader) | README.fa.md | README.en.md | | اینپوت (Input) | README.fa.md | README.en.md | | صفحه‌بندی (Pagination) | README.fa.md | README.en.md | | پیام (Toast) | README.fa.md | README.en.md | | راهنما (Tooltip) | README.fa.md | README.en.md | | مراحل (Stepper) | README.fa.md | README.en.md |

🎨 Theming

Theme is controlled via the dark class on and CSS variables:

:root {
  --color-primary: #6366f1;
  --bg-boxColor: #ffffff;
  --text-titleText: #111827;
}

.dark {
  --color-primary: #818cf8;
  --bg-boxColor: #1f2937;
  --text-titleText: #f9fafb;
}

🌐 RTL Support

<html lang="fa" dir="rtl">

⚙️ Next.js Notes

Interactive components are marked with "use client" internally. Import the CSS only once in the root layout. Fully compatible with Turbopack.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme