Benix DS

A modern, fully-themeable React design system built on Tailwind CSS 4 and Radix UI — open source under MIT by Kactos Tecnologia, from the Benix CRM ecosystem.

npm install @kactostecnologia/benix-ds

🔗 Live demo + interactive theme playground →

Why Benix DS?

This is the design system that powers Benix CRM, our SaaS product, along with the other internal projects at Kactos. We use it every day, refine it component by component, and at some point we realized it had become good enough to be useful for more people — so we decided to release it publicly under MIT license.

• 🎨 Fully themeable — every color, radius and surface is a CSS variable. Override in 5 lines.
• 🧩 30+ components — primitives, forms, overlays, charts, tables; all accessible (Radix-based).
• 🌍 Global providers — toast.success(...) and confirm.danger(...) available anywhere via /toast and /confirm subpaths.
• ⚡ Framework-agnostic — works in Vite, Next 16, Remix, Astro with React 19.
• 🌗 Dark mode out of the box — no extra setup.
• 📦 Tree-shakeable — sideEffects: false declared, plus subpaths per category. Import { Button } and you only get Button.
• 🔒 Type-safe — full TypeScript types shipped, zero any. Select<T> infers union literals from options.
• ✅ Tested — 125 unit tests covering primitives, forms, overlays, charts, feedbacks, providers, and the CLI.
• 🪄 Init CLI — npx @kactostecnologia/benix-ds init wires up your Vite/Next.js project in seconds.

Requirements

| Peer | Minimum | |---|---| | React | ≥ 19.0 | | React DOM | ≥ 19.0 | | Tailwind CSS | ≥ 4.0 | | Node (dev) | ≥ 22 |

Tested with React 19.2 + Tailwind 4.3.

Other peers (Radix, Lucide, CVA, clsx, tailwind-merge, recharts) — see package.json. Final package ~50 KB.

Installation

Quickest — npx init (recommended)

npx @kactostecnologia/benix-ds init

Detects your framework (Vite or Next.js), installs every peer dependency, patches your CSS with the right @import/@source directives, and (for Next) wires up transpilePackages. Done in seconds, with colored prompts to confirm each step.

Manual

npm install @kactostecnologia/benix-ds

npm 7+ auto-installs every peer dependency (Radix, Lucide, CVA, clsx, tailwind-merge) for you.

Charts (recharts) and a few specialized components (react-colorful, emoji-picker-react, @tanstack/react-table) are optional peers — install only if you use them:

npm install recharts react-colorful emoji-picker-react @tanstack/react-table

Manual setup

Skip this section if you ran npx @kactostecnologia/benix-ds init — the CLI handles all of it.

1. CSS — add to your main stylesheet

@import "tailwindcss";
@import "@kactostecnologia/benix-ds/styles.css";        /* tokens + @theme */
@source "../node_modules/@kactostecnologia/benix-ds/dist/**/*.{js,mjs}";

The @source directive tells Tailwind 4 to scan utility classes used inside the package.

2. Next 16 — transpilePackages

// next.config.mjs
export default {
  transpilePackages: ['@kactostecnologia/benix-ds'],
};

3. Vite — @tailwindcss/vite plugin (default setup)

Nothing extra beyond the official plugin.

Usage

import { Button, cn } from '@kactostecnologia/benix-ds';
// or via subpath:
import { Button } from '@kactostecnologia/benix-ds/primitives';

export function MyScreen() {
  return <Button variant="default">Save</Button>;
}

Global imperative APIs

Two providers ship under their own subpaths. Mount once at the root of your app and call the helper from anywhere — no useState, no callback prop drilling.

Toast

// app/layout.tsx (Next) or main.tsx (Vite)
import { ToastProvider } from '@kactostecnologia/benix-ds/toast';

<ToastProvider position="top-right">
  <App />
</ToastProvider>

// anywhere — sonner-style
import { toast } from '@kactostecnologia/benix-ds/toast';
toast.success('Saved!');
toast.error('Failed to delete.');

// or idiomatic hook (same instance):
import { useToast } from '@kactostecnologia/benix-ds/toast';
const { success } = useToast();

Confirm — Promise-based

import { ConfirmProvider } from '@kactostecnologia/benix-ds/confirm';

<ConfirmProvider><App /></ConfirmProvider>

// async/await — no isOpen state, no onConfirm callback
import { confirm } from '@kactostecnologia/benix-ds/confirm';

async function handleDelete() {
  const ok = await confirm.danger({
    title: 'Delete permanently?',
    message: 'This action cannot be undone.',
    confirmText: 'Yes, delete',
  });
  if (!ok) return;
  await api.delete();
}

Theme customization 🎨

The DS exposes semantic tokens as CSS variables. To adapt to your branding, override them after importing styles.css:

@import "tailwindcss";
@import "@kactostecnologia/benix-ds/styles.css";
@source "../node_modules/@kactostecnologia/benix-ds/dist/**/*.{js,mjs}";

@layer base {
  :root {
    --primary: #ff6b00;          /* your primary color */
    --primary-hover: #e55f00;
    --primary-foreground: #ffffff;
    --ring: #ff6b00;
    --radius: 0.75rem;
  }
  .dark {
    --primary: #ff8533;
    --primary-hover: #ff6b00;
  }
}

Available tokens

Surfaces

| Token | Light default | Dark default | |---|---|---| | --background | #ffffff | #020617 | | --background-soft | #f8fafc | #0f172a | | --foreground | #020617 | #f8fafc | | --card | #ffffff | #020617 | | --card-foreground | #020617 | #f8fafc | | --popover | #ffffff | #020617 | | --popover-foreground | #020617 | #f8fafc |

Brand + states

| Token | Default | |---|---| | --primary | #0084FF | | --primary-hover | #0073e6 | | --primary-soft | 10% mix on white | | --primary-foreground | #ffffff | | --secondary | #f1f5f9 | | --secondary-foreground | #0f172a | | --accent | #f1f5f9 | | --accent-foreground | #0f172a | | --muted | #f1f5f9 | | --muted-foreground | #64748b |

Semantic (feedback)

| Token | Default | |---|---| | --destructive | #ef4444 | | --destructive-foreground | #ffffff | | --warning | #f59e0b | | --warning-foreground | #ffffff | | --success | #22c55e | | --success-foreground | #ffffff | | --info | #3b82f6 | | --info-foreground | #ffffff |

Borders + radius

| Token | Default | |---|---| | --border | #e2e8f0 | | --input | #e2e8f0 | | --ring | #0084FF | | --radius | 0.5rem |

Charts (HSL — use H S% L% format)

• --funnel-1 to --funnel-6 — funnel palette
• --bar-1 to --bar-5 — bar chart palette

Dark mode

Wired by default. Add the .dark class to <html> (or use the exported ThemeProvider) and components follow automatically.

Other override paths

Apps can customize in 4 ways (least to most invasive):

1. CSS vars (above) — changes anything using the token. Recommended.
2. className prop — every component accepts it; overrides per instance.
3. Wrap and extend — function MyButton(props) { return <Button {...props} className={cn(...)} /> }.
4. Don't import from the DS — build your own. Zero coupling.

About Kactos Tecnologia

Kactos Tecnologia is a software house and outsourcing company. Beyond our internal products like Benix CRM, we also build custom applications for clients and provide specialized engineering talent for technology projects.

This design system started as a tool for our own teams, grew project by project, and eventually reached the point where it makes more sense to share it than to keep it locked away. We maintain it actively for our own use — and you're welcome to adopt it in your project too.

If Benix DS helps you out, take a look at Benix or drop us a line at [email protected] — it means a lot.

Feedback

Bug reports, suggestions or questions: [email protected].

License

MIT © Kactos Tecnologia

Free to use and redistribute in commercial and personal projects. We only ask that the copyright notice stays intact.