XO Templates

A modern, accessible UI component library built with React, TypeScript, and Tailwind CSS. This library provides a comprehensive set of design primitives and tokens that can be used to build consistent and beautiful user interfaces.

🎨 Features

• Design System Tokens: Pre-defined design tokens for colors, spacing, typography, and more
• Primitive Components: Low-level building blocks for creating custom UI components
• Accessibility First: Built with accessibility in mind using Radix UI primitives
• TypeScript Support: Full type safety and excellent developer experience
• Tailwind CSS Integration: Seamless integration with Tailwind CSS for styling
• Storybook Documentation: Interactive component documentation and examples

📦 Installation

npm install xo-templates

Peer Dependencies

This package requires the following peer dependencies to be installed in your project:

npm install react react-dom

Optional peer dependencies (install only if you need specific features):

npm install react-hook-form  # Only if using form components

🚀 Usage

import { Button } from "xo-templates";
import "xo-templates/styles";

function App() {
  return <Button variant="primary">Click me</Button>;
}

🏗️ Project Structure

xo-templates/
├── src/
│   ├── library/           # Component library source code
│   │   ├── atoms/        # Basic building blocks (buttons, inputs, etc.)
│   │   ├── molecules/    # Composite components
│   │   └── templates/    # Page layouts and templates
│   ├── design-system/    # Design tokens and primitives
│   └── stories/          # Storybook documentation
├── .storybook/           # Storybook configuration
└── dist/                 # Built library files

🛠️ Development

# Install dependencies
npm install

# Start development server
npm run dev

# Run Storybook
npm run storybook

# Build the library
npm run build

📚 Documentation

Visit our Storybook documentation to explore all available components and their usage:

npm run storybook

🎯 Design System

The library is built on top of a robust design system that includes:

• Color System: Pre-defined color palettes and semantic color tokens
• Typography: Type scale and font family definitions
• Spacing: Consistent spacing scale
• Component Tokens: Design tokens specific to each component

⚠️ Version Compatibility

This library uses peer dependencies to avoid version conflicts. Make sure your project has compatible versions of:

• React >= 18.0.0
• React DOM >= 18.0.0
• React Hook Form >= 7.0.0 (optional, only if using form components)

🤝 Contributing

We welcome contributions! Please see our contributing guidelines for more details.

📄 License

MIT © [Your Organization]