Zum Inhalt springen
Elementa

Open-Source UI-Bibliothek · Made in EU

Baue bessereInterfaces.Kopiere weniger.

169+ geprüfte UI-Komponenten — live editierbar, framework-übergreifend, MIT-lizenziert. Kein npm. Kein Build-Step. Einfach kopieren und einfügen.

  • In der EU gehostet
  • DSGVO-konform
  • 0 Dependencies
  • MIT-Lizenz
Beliebt:
Zuletzt hinzugefügt:Liquid Orbit ButtonCell Division LoaderThinking Path Loader
Komponenten entdecken So funktioniert's
Silent Press Button
ReactVueSvelteTailwind CSSHTML5CSS3Next.jsTypeScriptWCAG 2.2Zero-Dependency
169+
Komponenten
6
Contributors
16
Likes gesamt
6
Frameworks
Buttons41Cards23Loader32Inputs24Toggles28Backgrounds21

Bibliothek

Beliebte Komponenten

Jede Karte ist eine echte Live-Vorschau — kein Screenshot.

Alle ansehen
Beliebt

Morphing Scenery Toggle

HTML

Ein absolutes Premium-Element mit extremen Mikro-Animationen. Die Wolken morphen durch flüssige Skalierung ihrer Pseudo-Elemente physisch in leuchtende Sterne (und zurück), während sie die Seite wechseln. Die Sonne hat eine weiche, mehrschichtige Corona (Glow), und der Mond rotiert beim Einrasten plastisch ins Bild, wobei tiefe, detaillierte Krater mit inneren Schatten sichtbar werden.

#toggle#switch
@Belkis
WCAG 3
Beliebt

Thinking Path Loader

HTML

Minimalistischer Schwarz-Weiß Loader mit breitem Punktabstand und sehr flüssiger horizontaler Bewegung.

#loader#ai
@Belkis
WCAG 2
Beliebt

Typing Bubble

HTML

Premium Chat-Typing-Loader mit Glas-Effekt, Glow und weicher Dot-Animation.

#chat#typing
@Belkis
WCAG 1

Silent Press Button

HTML

Minimalistischer Premium-Button mit ruhigem Hover-Lift, weicher Innenfläche, feiner Lichtkante und elegantem Press-Effekt.

#minimal#premium
@Belkis
WCAG 1

Animated Aurora

Svelte

Fließende Aurora-Bänder mit weichem Verlauf (echtes Svelte).

#aurora#animated
@Belkis
WCAG 1

Premium Elastic Tactile Toggle (3D Dark Mode)

HTML

Ein ultra-hochwertiger, rein auf CSS basierender Schalter im modernen, taktilen "Dark Neumorphism"-Design. Der Fokus liegt extrem auf Mikro-Animationen: Eine federnde `cubic-bezier`-Kurve sorgt für ein physikalisches Einrasten, während sich der Regler beim Gedrückthalten elastisch verformt (Squish-Effekt). Der Status wird zusätzlich durch einen leuchtenden Neon-Indikator hervorgehoben.

#toggle#switch
@Belkis
WCAG 1

Workflow

Unter 60 Sekunden bis zum Einbau

Von der Idee zur eingebauten Komponente — in drei Schritten.

01

Entdecken

Durchsuche Kategorien oder such gezielt nach Effekten — mit echter Live-Vorschau.

02

Kopieren

Ein Klick kopiert HTML/CSS in die Zwischenablage. Kein npm, kein Build-Step.

03

Einbauen

Einfügen, fertig. In deinem Framework, in unter 60 Sekunden.

Fakten statt Marketing

Warum Entwickler Elementa wählen

Kein Marketing-Versprechen, sondern nachprüfbare Fakten aus der Bibliothek.

169+

Komponenten

React, Vue, Svelte, Tailwind oder pures HTML/CSS. Eine Bibliothek für deinen Stack.

0

Dependencies

Kopieren und einfügen. Kein npm install, kein Build-Step, kein Ballast.

2.3 KB

Ø Größe

Nur das, was du brauchst — schlanke Komponenten ohne große Bundles.

WCAG 2.2

Geprüft

Geprüfte Kontraste, Fokus-Zustände und prefers-reduced-motion Unterstützung.

Vergleich von Elementa mit anderen Anbietern
FeatureElementashadcn/uiCodePen
Kostenlos
FrameworksAlleReactAlle
Live-Vorschau
DSGVO / EU-Hosting
WCAG-geprüft

Angaben nach bestem Wissen (Stand 2026); Anbieter entwickeln sich weiter.

Community

Teile deine UI-Komponenten mit der Community

Jede Komponente, die du hochlädst, wird von anderen Entwicklern entdeckt und genutzt. Werde als Experte sichtbar.

Jetzt beitragen Contributor-Guidelines

Bereits 6 Contributor · 169 Komponenten · 16 Likes