Impact Nova 🚀

Impact Nova is a comprehensive, enterprise-grade React design system engineered for scalability, performance, and accessibility. Built on the modern stack of React 19, Vite, and Tailwind CSS, it empowers developers to build complex, data-rich applications with speed and precision.

"Design is not just what it looks like and feels like. Design is how it works."

🎯 Objectives & Benefits

Impact Nova is designed to solve common challenges in enterprise application development.

• Consistency: A single source of truth for UI components ensures a unified look and feel across all products.
• Velocity: Ready-to-use, tested components allow developers to focus on feature logic rather than pixel-pushing.
• Quality: Built-in accessibility and rigorous testing raise the baseline quality of every application.
• Scalability: The system is architected to grow with the business, supporting new features and distinct brand themes.

📐 Design Principles

Impact Nova is built upon four core pillars that guide every component application:

1. Accessibility First: Components are built on Radix UI primitives, ensuring full WAI-ARIA compliance, keyboard support, and screen reader compatibility.
2. Composition over Inheritance: We favor composition. Use sub-components (e.g., Dialog.Content) for full control without prop drilling.
3. Design Tokens: Styling is driven by tokens (colors, typography, spacing) mapped via Tailwind CSS, ensuring pixel-perfect consistency.
4. Developer Experience: Built for speed with strict TypeScript, intuitive naming, and comprehensive documentation to help you move fast.

🚀 Getting Started

Everything you need to install, configure, and start building with Impact Nova.

Installation

Install the package via your preferred package manager. Impact Nova requires React 19 or later.

npm install impact-nova
# or
pnpm add impact-nova
# or
yarn add impact-nova

Note on Peer Dependencies: You must also ensure react, react-dom, ag-grid-react, ag-grid-enterprise, and highcharts (if used) are installed in your project, as these are peer dependencies.

Styles & Configuration

Import the bundled CSS in your root entry file (e.g., main.tsx, App.tsx, or layout.tsx).

import React from 'react';
import ReactDOM from 'react-dom/client';

// ⚠️ Import styles before your App
import 'impact-nova/dist/impact-nova.css'; 

import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <App />
);

Typography

Impact Nova looks best with Manrope. We recommend adding it to your project:

1. Import Font:

   <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet" />

2. Configure Tailwind:

   @layer base {
     body {
       font-family: 'Manrope', sans-serif;
     }
   }

🔨 Usage

Import components directly from the package. All components export strong TypeScript definitions for props and events.

Core Components

import { Button, Card, DatePicker } from 'impact-nova';

export default function MyPage() {
  return (
    <Card className="p-6">
      <h1 className="text-xl font-bold mb-4">Dashboard</h1>
      <div className="flex gap-4">
        <DatePicker />
        <Button variant="primary">Save Changes</Button>
      </div>
    </Card>
  );
}

Using Icons

Impact Nova includes a custom-built icon library. Icons are treeshakeable and accept standard SVG props.

import { Icons } from 'impact-nova';

export function StatusBadge() {
  return (
    <div className="flex items-center gap-2 text-green-600">
      <Icons.CheckCircle size={16} />
      <span>Operation Successful</span>
    </div>
  );
}

Type Safety

You can import component props to ensure type safety in your own interfaces.

import { Button, type ButtonProps } from 'impact-nova';

interface CustomActionProps extends ButtonProps {
  analyticsId: string;
}

export const CustomAction = ({ analyticsId, ...props }: CustomActionProps) => {
  return <Button {...props} onClick={() => track(analyticsId)} />;
};

Internationalization (i18n)

Impact Nova supports multiple languages via a provider and message overrides. Wrap your app (or subtree) with ImpactNovaI18nProvider and set locale and optionally messages.

Locale packs (German, Spanish, Hindi, Kannada) are exported so you can use them as-is or override only the strings you need:

import { ImpactNovaI18nProvider, de, defaultMessages } from 'impact-nova';

// Use a full locale pack as-is
function App() {
  return (
    <ImpactNovaI18nProvider locale="de" messages={de}>
      <MyApp />
    </ImpactNovaI18nProvider>
  );
}

Override only a few keys by spreading a locale pack and then overriding specific sections or keys. The provider merges your messages over the built-in English defaults (or over the pack you pass), so you only need to provide the keys you want to change:

import { ImpactNovaI18nProvider, de } from 'impact-nova';

// German with custom labels for calendar only
const messages = {
  ...de,
  calendar: { ...de.calendar, apply: 'Übernehmen', cancel: 'Schließen' },
};

<ImpactNovaI18nProvider locale="de" messages={messages}>
  <MyApp />
</ImpactNovaI18nProvider>

Tree-shakeable locale imports (if you only need one language and want to avoid pulling others into your bundle):

import { de } from 'impact-nova/locale/de';
// or
import { de, es, hi, kn } from 'impact-nova/locale';

• locale: BCP 47 code (e.g. 'en', 'de') used for date/number formatting. Supported: en, en-US, en-GB, de, es, hi, kn.
• messages: Optional Partial<ImpactNovaMessages>. Merged over the built-in English defaults; only provided keys are overridden. Use a locale pack (de, es, hi, kn) or spread one and override specific keys.
• Per-component overrides: Components that accept props like placeholder, submitButtonLabel, or cancelLabel use those when provided; otherwise they use values from the provider.

Calendar, date pickers, Select, NestedList, DataTableColumnList, and aria labels (e.g. Alert close, Breadcrumb, Chips remove) use the context. See docs/I18N_PLAN.md for the full list of message keys and components.

🏗️ Architecture

The library utilizes a modern, headless architecture pattern:

1. Logic Layer: Headless state management and interactions powered by Radix UI and internal hooks.
2. Styling Layer: Utility-first CSS using Tailwind CSS and class-variance-authority (CVA) for scalable, type-safe component variant management.
3. Build System: High-performance tooling with Vite and React 19 for instant HMR.

� Component Library

Impact Nova provides a rich set of components structured for any enterprise use-case.

📝 Forms & Inputs

• Button, Button Group
• Checkbox, Radio Group, Switch
• Input, Smart Input, Textarea
• Select, Slider
• File Upload
• Date Picker, Date Range Picker
• Month Picker, Week Picker
• Prompt, Form Group

🧭 Navigation

• Sidebar, Navigation Bar
• Tabs, Breadcrumb, Stepper
• Card, Accordion, Nested List
• Header, Separator
• Dynamic Layout

💬 Feedback & Overlay

• Alert, Alert Dialog, Dialog
• Sheet, Drawer, Modal
• Toast, Tooltip, Popover
• Hover Card, Dropdown Menu
• Loader, Skeleton, Progress Bar

📊 Data Display

• Avatar, Badge, Tag, Chips
• Calendar, Chart
• Empty Container, Notification Panel
• Table (AG Grid), Data Table
• Product Tile, Value With Unit

📞 Support & Community

• Issue Reporting: Submit bugs or feature requests to our Jira Board.
• Community: Join #design-system-support on Slack for quick questions and integration help.

✨ Credits & Contributors

Core Development

• Anil M
• Ritesh Ranjan

Design Architecture

• Jaymin Pancholi
• Sudip Sarkar

UX & Product UI

• Kalyan
• Vikram
• Aditi Chaudhary

Inspiration

• Impact UI

Special Thanks

• Girish Pattana Setty
• Himanshu K
• Harish V

📄 License

Impact Nova is licensed under the MIT License.