Tenara UI Components

A React component library with built-in theming system for multi-tenant applications. Framework-agnostic design that works with any React 18+ application.

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>
  );
}

Any React Application:

// App.tsx or your root component
import { ThemeProvider, defaultTheme } from 'tenara-ui-components';
import 'tenara-ui-components/dist/index.css';

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

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

Primax Theme

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

<ThemeProvider initialTheme={primaxTheme}>
  <App />
</ThemeProvider>

• Colors: Brilliant Blue (#0061FF), Neon Mint (#00FFD2), Electric Berry (#FE0066)
• Typography: Inter font family
• Style: Bold, energetic with decorative sparkle elements and L-shaped accent borders

Components

Atoms

• Button - Multi-variant button (general, secondary, link, danger) with size variants and dark mode
• ButtonLink - Button rendered as an anchor tag
• TextLink - Styled inline link component
• Heading - Typography component with semantic levels (h1-h6) and named variants (title, subtitle, componentTitle, etc.)
• Paragraph - Body text component with dark mode support
• RichText - Styled HTML content renderer for CMS-driven content
• BulletList - Styled list with custom icon support (e.g. FontAwesome sparkle)
• Icon - SVG icon wrapper with size (xs-xl) and color variants (primary, secondary, accent, etc.)
• Breadcrumb - Navigation breadcrumb with separator and dark mode support
• Container - Layout container with optional fluid (full-width) mode
• Divider - Section wrapper with background colors, patterns (dots/grid/sparks), and shape dividers
• Grid - Responsive layout grid system (Grid + GridItem)
• Media - Image and video rendering (native + Wistia embeds)
• PlayButton - Themeable play button wrapper with CSS custom property-driven state colors
• BackgroundMedia - Media background component

Molecules

• Header - Navigation header with authentication
• Card - Content card with flexible styling
• CTA - Call-to-action component
• VideoPlayer - Video player with thumbnail and playback modes

Primax Tenant Components

• Banner - Multi-variant banner (hero, level2, level3, gated) with breadcrumbs, media, and background video support
• BannerCTA - Call-to-action section with small (heading + button) and large (heading + form slot) variants
• VideoSection - Two-column section with media block, bullet points, and description text
• HalfColumn - Pre-configured two-column layout with built-in media variants (sparkle, video, media) and multi-row support
• TwoColumn - Flexible two-column grid layout with multi-row support and vertical alignment
• MediaBlock - Media display with L-shaped accent border, sparkle overlay, Wistia popover, and mirror support (default + croppedSpark variants)
• PrimaxCard - Content card with icon, image (insights), and profile (team member) variants
• PlayIcon - Primax-branded SVG play button icon

Pages

• Page - Complete page layout template

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

• ✅ React 18+ - Full compatibility with modern React
• ✅ Vite + React - Optimized for Vite-based projects
• ✅ Create React App - Works with CRA setups
• ✅ Next.js 14/15 - Compatible with App Router & Pages Router
• ✅ Any React framework - Framework-agnostic design