UI Templates

Alle gängigen UI-Elemente im Design-System Stil. Verwende diese Vorlagen als Referenz für konsistente Designs.

Buttons

Primary Buttons

Secondary Buttons

Shadcn Button Variants

Link

Button Sizes

Icon Buttons

Toggle/Collapse Buttons

Cards

Glass Cards

Standard Card

Eine Standard Glass-Card mit Blur-Effekt und subtilen Rahmen.

Card mit Glow

Glass-Card mit zusätzlichem Glow-Effekt für Hervorhebungen.

98%
Score

Shadcn Cards

Card Title

Card description text here

Card content goes here. This is the main body of the card.

Featured Card

Mit Icon im Header

Highlighted card with primary border accent.

Gradient Card

Mit Gradient Hintergrund

Card with gradient background for emphasis.

Stat Cards

Besucher
12,543
+12.5%
Performance
98%
+5.2%
Keywords
847
-2.1%
SEO Score
A+
Exzellent

Formulare

Input-Elemente

0 50 100
0% 25% 25% 75% 100%
0 70 100

Alerts & Notifications

bwShowNotification Alerts

Deine Änderungen wurden erfolgreich gespeichert.
Deine Sitzung läuft in 5 Minuten ab.
Die Verbindung zum Server konnte nicht hergestellt werden.
Du musst dein Google-Konto authentifizieren, um Search Console Daten abzurufen.

Inline Status

Erfolgreich
Bestanden
Warnung
Überprüfen
Fehler
Fehlgeschlagen
Info
Hinweis

Badges & Tags

Custom Badges

Live Primary Erfolg Warnung Fehler Info

Shadcn Badges

Default Secondary Destructive Outline

Status Pills

Online Away Offline Unknown

Tag Groups

React TypeScript Tailwind SEO Featured

Tabellen

Glass Table

Page Score Issues
/home 98 0 Issues
/about 76 3 Issues
/contact 45 8 Issues

Typografie

Ãœberschriften

Heading 1 (Display)

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Fließtext

Extra Large Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Large Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Normal Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Small Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Extra Small Text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Styles

Muted Text - Für sekundäre Informationen

Primary Color Text

Bold Text

Semibold Text

Italic Text

Underlined Text

Strikethrough Text

Link Text

Gradient Text

Primary Gradient Text

Custom Gradient Text

Listen

Unordered List

  • Erster Listenpunkt
  • Zweiter Listenpunkt
  • Dritter Listenpunkt
  • Vierter Listenpunkt

Ordered List

  1. Erster Schritt
  2. Zweiter Schritt
  3. Dritter Schritt
  4. Vierter Schritt

Farben

Gradienten

Primary Gradient

Purple → Pink

Blue → Cyan

Status Farben

Success

green-500

Warning

yellow-500

Error

red-500

Info

blue-500

Glass Effekte

Glass Card

Glass Card

.glass-card

Glass + Glow

Glass + Glow

.glow-effect

Stat Card

Stat Card

.stat-card

Icons

Feature Icons (Gradient)

Standard Icons

Home

User

Mail

Bell

Settings

Search

Status Icons

Success
Error
Warning
Info

SEO Icons

Website
Rankings
Analytics
Visibility
Security

Animationen

Hover Animationen

Hover Scale

Hover Rotate

Hover Opacity

CSS Animationen

Pulse
Glow Pulse
Bounce
Spin
Ping

Loading States

Spinner
Dots
Progress
Skeleton

Float Animation