@xtown/ui-template

A reusable UI design system and component library for Xtown projects. This package provides consistent styling, components, and design tokens across all Xtown applications.

🚀 Installation

npm install @xtown/ui-template

🎨 Design System

Color Palette

• Primary Gradient: linear-gradient(135deg, #211531, #9254de)
• Primary Color: #4012b2
• Background: #f8fafc
• White: #ffffff

Typography

• Font Family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif
• Primary Text: #130114
• Secondary Text: #64748b

📦 Available Components

Layout Components

• DashboardLayout - Simple dashboard layout with gradient sidebar, logo, and "Powered by Xtown" text
• AuthLayout - Simple centered auth layout
• AuthSplitLayout - Split-screen auth layout with gradient background

Loading Components

• LoadingScreen - Full-screen loading with animated particles and logo
• LoadingOverlay - Modal loading overlay with spinner

🛠️ Usage

Basic Setup

import React from 'react';
import { 
  DashboardLayout, 
  LoadingScreen, 
  DESIGN_SYSTEM 
} from '@xtown/ui-template';
import '@xtown/ui-template/dist/styles.css';

function App() {
  return (
    <DashboardLayout>
      <div className="p-6">
        {/* Your content here */}
        <h1>Welcome to your dashboard</h1>
        <p>This is your main content area</p>
      </div>
    </DashboardLayout>
  );
}

Using Design System Constants

import { DESIGN_SYSTEM } from '@xtown/ui-template';

const MyComponent = () => (
  <div style={{ 
    background: DESIGN_SYSTEM.colors.primaryGradient,
    color: DESIGN_SYSTEM.colors.white,
    padding: DESIGN_SYSTEM.spacing.lg,
    borderRadius: DESIGN_SYSTEM.borderRadius.lg
  }}>
    Styled with design system
  </div>
);

Loading Screen

import { LoadingScreen } from '@xtown/ui-template';

function App() {
  const [loading, setLoading] = useState(true);

  if (loading) {
    return <LoadingScreen message="Initializing..." />;
  }

  return <MainApp />;
}

Auth Layout

import { AuthSplitLayout } from '@xtown/ui-template';

function LoginPage() {
  return (
    <AuthSplitLayout
      left={
        <div className="text-white text-center">
          <h1 className="text-4xl font-bold mb-4">Welcome Back</h1>
          <p className="text-xl">Sign in to your account</p>
        </div>
      }
    >
      <div className="bg-white p-8 rounded-lg shadow-lg">
        {/* Your login form here */}
      </div>
    </AuthSplitLayout>
  );
}

📁 Package Structure

@xtown/ui-template/
├── dist/                    # Built files
├── components/              # React components
│   ├── DashboardLayout.jsx
│   ├── AuthLayout.jsx
│   ├── LoadingScreen.jsx
│   └── LoadingOverlay.jsx
├── styles/                  # CSS styles
│   └── index.css
├── assets/                  # Static assets
│   ├── xtown-light.png
│   └── README.md
├── index.js                 # Main entry point
├── package.json
├── tsconfig.json
├── rollup.config.js
└── README.md

🎯 Component Props

DashboardLayout

<DashboardLayout>
  {children}                 // Your main content
</DashboardLayout>

LoadingScreen

<LoadingScreen
  message={string}           // Loading message (optional)
/>

🎨 Customization

Overriding Styles

You can override the default styles by importing the CSS and adding your own:

/* Your custom styles */
.xtown-dashboard {
  /* Override dashboard styles */
}

.xtown-loading {
  /* Override loading styles */
}

Using Design Tokens

Access design system constants for consistent styling:

import { DESIGN_SYSTEM } from '@xtown/ui-template';

const customStyle = {
  color: DESIGN_SYSTEM.colors.primary,
  fontSize: DESIGN_SYSTEM.typography.fontSize.lg,
  padding: DESIGN_SYSTEM.spacing.md,
  borderRadius: DESIGN_SYSTEM.borderRadius.lg
};

📱 Responsive Design

All components are built with responsive design in mind:

• Mobile-first approach
• Touch-friendly interactions
• Adaptive layouts
• Optimized for all screen sizes

🔧 Development

Building the Package

npm run build

Development Mode

npm run dev

Publishing

npm publish

📄 License

MIT License - see LICENSE file for details.

🤝 Support

For support and questions, contact the Xtown development team.