tenara-ui-components

v0.2.10

Published

3 months ago

A React component library with built-in theming system for multi-tenant applications

0High
0Medium
0Low

react nextjs next.js react-components components ui ui-library theme theming multi-tenant design-system atomic-design app-router storybook

Tenara UI Components

A React component library with built-in theming system for multi-tenant applications. Optimized for Next.js with full support for App Router and Server Components.

Installation

npm install tenara-ui-components

Quick Start

1. Import Styles and Wrap Your App with ThemeProvider

// Import CSS in your main entry file
import 'tenara-ui-components/dist/index.css';
import { ThemeProvider, defaultTheme } from 'tenara-ui-components';

// Wrap your app
function App() {
  return (
    <ThemeProvider initialTheme={defaultTheme} initialThemeName="default">
      {/* Your app content */}
    </ThemeProvider>
  );
}

Next.js App Router:

// app/layout.tsx
import { ThemeProvider, defaultTheme } from 'tenara-ui-components';
import 'tenara-ui-components/dist/index.css';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ThemeProvider initialTheme={defaultTheme} initialThemeName="default">
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

2. Use Components

import { Button, Card, Header } from 'tenara-ui-components';

function HomePage() {
  return (
    <div>
      <Header 
        onLogin={() => console.log('Login')}
        onCreateAccount={() => console.log('Sign up')}
      />
      <Card>
        <h2>Welcome</h2>
        <Button buttonType="general" label="Get Started" />
        <Button buttonType="cta" label="Learn More" />
      </Card>
    </div>
  );
}

Available Themes

Default Theme (Velera)

import { ThemeProvider, defaultTheme } from 'tenara-ui-components';

<ThemeProvider initialTheme={defaultTheme} initialThemeName="default">
  <App />
</ThemeProvider>

Colors: Cobalt Blue & Gold
Style: Professional, modern

Components

Atoms

Button - Multi-variant button component
TextLink - Styled link component
Heading - Typography component
BackgroundMedia - Media background component

Molecules

Header - Navigation header with authentication
Card - Content card with flexible styling
CTA - Call-to-action component

Architecture

Each site gets:

✅ Automatic brand colors
✅ Consistent component styling
✅ Zero configuration beyond theme selection
✅ Full TypeScript support

Features

🎨 Built-in Theming - Multiple brand themes included
🏗️ Atomic Design - Scalable component architecture
📱 Responsive - Mobile-first design approach
♿ Accessible - WCAG compliant components
🔧 TypeScript - Full type safety
📚 Storybook - Interactive component documentation

Built With

React 19
TypeScript
SCSS
Storybook
Rollup

Framework Support

✅ Next.js 14/15 (App Router & Pages Router) - Primary target
✅ Vite + React
✅ Create React App
✅ Any React 18+ framework