tenara-ui-components

v0.2.8

Published

5 days ago

A React component library with built-in theming system for multi-tenant applications. Built with atomic design principles and optimized for separate tenant deployments.

0High
0Medium
0Low

velera-marketing

Tenara UI Components

A React component library with built-in theming system for multi-tenant applications. Built with atomic design principles and optimized for separate tenant deployments.

Installation

npm install tenara-ui-components

Quick Start

1. Import Styles and Wrap Your App with ThemeProvider

// app/globals.css or your main CSS file
import 'tenara-ui-components/dist/index.css';
// app/layout.tsx (Next.js 13+) or _app.tsx
import { ThemeProvider, mySiteTheme } from 'tenara-ui-components';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ThemeProvider initialTheme={mySiteTheme} initialThemeName="theme-name-here">
          {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
Next.js 15
TypeScript
SCSS
Storybook
Rollup