Tarxemo UI Kit

A premium, unique React component library built with Tailwind CSS 4 and designed for the Tarxemo ecosystem.

Features

• Premium Design: Unique aesthetics with smooth transitions and glassmorphism.
• Atomic Design: Reusable atomic components (Button, Card) and complex organisms (MapView, ImageUploader).
• Design System: Fully driven by CSS variables for easy theming and dark mode support.
• TypeScript First: Full type safety for all components.

Installation

npm install @tarxemo/ui

Usage

import { Button, StatusState, MapView } from '@tarxemo/ui';
import '@tarxemo/ui/style.css';

function App() {
  return (
    <div className="dark">
      <Button variant="primary">Explore</Button>
      <MapView latitude={-6.7924} longitude={39.2083} />
      <StatusState type="loading" />
    </div>
  );
}

Components

• Atomic: Button, Card
• Organisms: MapView, FileUploader, Marquee, StatusState, MediaImageGallery, LocationAutocomplete, Directions, LocationPicker, Modal, SystemLog, NotificationCenter, OrgChart
• Data Visuals: RadialGauge, BarGauge, TelemetryChart
• Utilities: loadMapbox

Theming

The library uses the following CSS variables defined in your index.css:

:root {
  --color-primary: #3B6790;
  --color-secondary: #727D73;
  --color-accent: #F97316;
  --color-bg: #F9FAFB;
  --color-surface: #FFFFFF;
  --color-text: #1F2937;
  --color-text-muted: #4B5563;
  --color-success: #22C55E;
  --color-danger: #EF4444;
}