Bundler integration

tekivex-ui works with every major bundler and meta-framework. Pick yours below; the recipe is copy-pasteable.

tekivex-ui is ESM-first with TypeScript declarations. Vite needs zero config — just install, import the stylesheet, wrap your app.

npm install tekivex-ui react react-dom

// vite.config.ts (optional — only for faster dev cold-starts)
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: { include: ['tekivex-ui'] },
});

import { createRoot } from 'react-dom/client';
import { ThemeProvider } from 'tekivex-ui';
import 'tekivex-ui/styles';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <ThemeProvider mode="auto">
    <App />
  </ThemeProvider>,
);

13 components are RSC-compatible. Mark interactive ones with 'use client'; use server-safe primitives (Card, Typography, Badge) anywhere.

npm install tekivex-ui react react-dom

module.exports = {
  transpilePackages: ['tekivex-ui'],
  experimental: { optimizePackageImports: ['tekivex-ui'] },
};

import 'tekivex-ui/styles';
import { Providers } from './providers';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body><Providers>{children}</Providers></body>
    </html>
  );
}

'use client';
import { ThemeProvider } from 'tekivex-ui';

export function Providers({ children }: { children: React.ReactNode }) {
  return <ThemeProvider mode="auto">{children}</ThemeProvider>;
}

npm install tekivex-ui

module.exports = { transpilePackages: ['tekivex-ui'] };

import type { AppProps } from 'next/app';
import { ThemeProvider } from 'tekivex-ui';
import 'tekivex-ui/styles';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider mode="auto">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

npm install tekivex-ui
npm install --save-dev style-loader css-loader

module.exports = {
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.jsx', '.mjs'],
    conditionNames: ['import', 'require', 'default'],
  },
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/ },
    ],
  },
};

import type { LinksFunction } from '@remix-run/node';
import { ThemeProvider } from 'tekivex-ui';
import tekivexStyles from 'tekivex-ui/dist/style.css?url';

export const links: LinksFunction = () => [
  { rel: 'stylesheet', href: tekivexStyles },
];

Parcel 2: Zero-config. Install + import.

Rollup (library): Mark tekivex-ui and /^tekivex-ui\/.*/ as external so consumers bring their own copy.

Astro: Use inside React islands. npx astro add react, then load CSS in your layout’s frontmatter.

Verify your install

Drop this anywhere:

import { TkxCard, TkxCardBody, TkxButton, TkxBadge } from 'tekivex-ui';

export function HealthCheck() {
  return (
    <TkxCard>
      <TkxCardBody>
        <TkxBadge variant="success">tekivex-ui v2.7 ready</TkxBadge>
        <TkxButton style={{ marginLeft: 12 }}>Click me</TkxButton>
      </TkxCardBody>
    </TkxCard>
  );
}

If you see a styled card and a button, the integration is correct.

Bundler not listed?

Open an issue with your config and we’ll add a recipe within 48 hours.