TENsor

Multi-brand design system for TENbase Labs products. Shared foundations with per-project themes.

Features

✨ Multi-brand theming — PlusOne, HooverSheet, and more with runtime switching 🎨 Design tokens — Consistent colors, typography, spacing, and motion ⚛️ React 19 — Built for the latest React with full TypeScript support 🎯 Accessibility — WCAG 2.1 AA compliant with keyboard and screen reader support 📦 Monorepo — Core tokens, React components, and themes in one place 🛠️ Developer experience — Storybook 10, Vite, Tailwind CSS v4

Quick Start

Installation

npm install @tenbaselabs/tensor-react @tenbaselabs/tensor

Basic Usage

import { Button, Card } from '@tenbaselabs/tensor-react';
import { plusone } from '@tenbaselabs/tensor-themes/plusone';

// Apply theme
document.documentElement.classList.add(plusone);

function App() {
  return (
    <Card>
      <h1>Welcome to TENsor</h1>
      <Button variant="primary">Get Started</Button>
    </Card>
  );
}

Packages

Package	Description	Version
@tenbaselabs/tensor	Core design tokens and utilities
@tenbaselabs/tensor-react	React components
@tenbaselabs/tensor-themes	Brand-specific themes

Documentation

📚 Full Documentation — Comprehensive guides and API reference

Getting Started

• Installation — Setup guide
• Quick Start — Build your first component

Core Concepts

• Design Tokens — Colors, typography, spacing, motion
• Components — React component library
• Themes — Multi-brand theming system
• Accessibility — WCAG compliance and best practices

Guides

• Migration Guide — Upgrading between versions
• Contributing — How to contribute to TENsor

Development

Prerequisites

• Node.js >= 18.0.0
• npm >= 9.0.0

Setup

# Clone repository
git clone https://github.com/TENbase-Labs/tensor.git
cd tensor

# Install dependencies
npm install

# Start Storybook
npm run storybook

# Run tests
npm test

# Build packages
npm run build

Project Structure

tensor/
├── packages/
│   ├── tensor/              # Core tokens
│   ├── tensor-react/        # React components
│   └── tensor-themes/       # Brand themes
├── src/
│   ├── docs/                # Documentation (MDX)
│   └── stories/             # Storybook stories
└── .storybook/              # Storybook config

Scripts

npm run dev              # Start Vite dev server
npm run storybook        # Start Storybook
npm run build            # Build all packages
npm run build-storybook  # Build Storybook for deployment
npm test                 # Run tests
npm run lint             # Lint codebase
npm run typecheck        # TypeScript type checking

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

Development Workflow

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Write tests
5. Commit using conventional commits (git commit -m 'feat(button): add loading state')
6. Push to your fork (git push origin feature/amazing-feature)
7. Open a Pull Request

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT © TENbase Labs

Community

• GitHub Issues: Report bugs or request features
• GitHub Discussions: Ask questions, share ideas
• NPM: @tenbaselabs/tensor

Credits

Built with:

• React 19
• TypeScript
• Tailwind CSS v4
• Storybook 10
• Vite
• Vitest

---

Made with ❤️ by TENbase Labs