Die Linke UI

Eine moderne React-Komponentenbibliothek für Die Linke mit vollständiger TypeScript-Unterstützung und animierten Komponenten.

🚀 Installation

npm install dielinke-ui

📦 Verfügbare Komponenten (v1.4.0)

Interaktive Komponenten

• Button - Vielseitige Button-Komponente mit Variants, Sizes und Glow-Effekt
• Accordion - Zusammenklappbare Inhalts-Sektionen mit Die Linke Branding
• UpvoteDownvote - Interaktives Voting-Widget mit animierten Zahlen
• Chip - Kompakte Chips mit 6 Varianten, Größen und Close-Button-Option
• Toggle - Animierte Toggle-Komponente mit drei Varianten
• Tabs ✨ - Tab-Navigation mit smooth sliding underline Animation

Kalender & Eingabe

• Calendar - Kalender-Komponente mit Einzeltag-Auswahl
• RangeCalendar - Kalender für Zeitraum-Auswahl

Layout & Information

• FullwidthInfo - Full-width Informations-Komponente mit Text-Bild-Layout
• FileDownloader - File-Download-Komponente mit verschiedenen Dateitypen

Feedback

• Toast - Notification-System mit Placement, Auto-Close und Promise-Support

🎨 Design System

Alle Komponenten folgen dem Die Linke Design System mit:

• Konsistenten Farben (Rot, Dunkelrot, Türkis, etc.)
• Work Sans Typography für Headlines
• Inter Typography für Body Text
• Smooth Animationen und Übergänge

📝 Verwendung

import { Button, Tabs, Toast } from 'dielinke-ui';

function App() {
  const [activeTab, setActiveTab] = useState('tab1');
  
  const tabs = [
    { key: 'tab1', label: 'Erster Tab' },
    { key: 'tab2', label: 'Zweiter Tab' },
  ];

  return (
    <div>
      <Tabs 
        tabs={tabs}
        activeTab={activeTab}
        onTabChange={setActiveTab}
      />
      
      <Button variant="primary" size="md">
        Click me
      </Button>
    </div>
  );
}

🔗 Weitere Informationen

• Vollständige Dokumentation
• Design System Guide
• Komponenten-Übersicht

📄 Lizenz

MIT