OnSpot-UX

OnSpot-UX is the design system and UI component library specifically developed for the OnSpot ecosystem. It provides reusable components, consistent styles, and development tools.

Content

🎨 OnSpot-UX Introduction

Overview of the OnSpot-UX library, its purpose, and how to integrate it into projects.

Includes:

• Design philosophy
• Installation and configuration
• Getting started with the library
• Basic usage examples

🪄 Components

Complete catalog of components available in OnSpot-UX with implementation examples.

Includes:

• Complete component table
• Properties and configurations
• Code examples
• Recommended use cases

📚 Storybook

Interactive documentation and development tool for exploring and testing components.

Includes:

• Storybook configuration
• Component navigation
• Isolated development
• Visual testing

---

Key Features

• 🎯 Specific Components: Designed for OnSpot's needs
• 🔧 Highly Configurable: Multiple variants and styles
• 📱 Responsive: Automatic adaptation to different devices
• 🎨 Consistent Design: Unified design system
• ⚡ Optimized: Performance-optimized components

Technologies

• React - Component foundation
• TypeScript - Strong typing
• Sass/CSS - Styles and themes
• Storybook - Interactive documentation

Getting Started with Onspot-UX

1. Read the Introduction to understand basic concepts
2. Explore the Component Catalog to see what's available
3. Use Storybook to experiment with components
4. Implement components in your project following the examples

Instalación

npm install @twlgroup/onspot-ux

Uso Básico

import { Button, Text } from "@twlgroup/onspot-ux";

const MyComponent = () => {
  return (
    <div>
      <Text styleTemplate="heading-1">Welcome to Onspot</Text>
      <Button styleTemplate="primary">Get Started</Button>
    </div>
  );
};