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.

📚 Documentation

Visit https://impact-nova.iaproducts.ai/ to view the full documentation: component reference, interactive React examples, props and controls, and usage notes—all in the browser, with no local checkout required.

That documentation site is published with Storybook (storybook.js.org), the same format many design systems use; you can treat the URL like any other docs hub even if you are not familiar with Storybook.

MCP server (impact-nova-mcp)

Use impact-nova-mcp on npm if you want a Model Context Protocol (MCP) server for Impact Nova in Cursor, Windsurf, Claude, Antigravity, or other MCP-capable clients—component lists, specs, design tokens, codegen, and conventions wired for assistants.

What MCP is, what this server exposes, and how to install and configure your editor are documented in packages/mcp/README.md in this repository.

LLM editor rules (impact-nova/llms + vibe-rules)

This package ships a ./llms export so assistants can load static Impact Nova conventions from the same Markdown as impact-nova-mcp under packages/mcp/data/. It is built into dist/llms when you run npm run build on this repo.

• MCP (impact-nova-mcp): live tools (list components, specs, tokens, etc.) in the IDE.
• impact-nova/llms: bundled rules for editors that support the vibe-rules CLI.

After installing impact-nova in an app, install the vibe-rules CLI (globally or as a devDependency), then from the app root:

npx vibe-rules install cursor

That scans node_modules for packages exposing ./llms and installs Cursor rules. Other editors are supported by vibe-rules (see their docs). Optional: add vibe-rules as a devDependency if you want a pinned CLI version in CI.

🚀 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:[email protected]&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
• Manohar R
• Pratik Pradhan
• Balaji Utukuri

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.