Bearnie UI
A premium, accessibility-first component library built with Astro, Tailwind v4, and a touch of biophilic design.
Actions
Button
Versatile trigger for actions, supports variants, sizes, and icons.
Switch
A control that allows users to toggle a setting on or off.
Display
Badge
Small status indicators or category labels.
Accordion
Stacked list of collapsible content sections.
Data & Status
Progress & Slider
Visual indicators for status and value selection.
Alert
Direct feedback or important notifications.
Note
Error
Warning
Success
Default
Feedback & Loading
Spinner
Visual cue for background processes.
Skeleton
Placeholder for content during loading.
Tabs
Tabs
Organize content into multiple views that share a single space.
Forms
Input Elements
Common form controls for user data entry.
Selection
Radio groups and single-choice controls.
Overlays
Dialog / Modal
Interactive overlay that pauses focus on the primary page.
Edit profile
Toast
Global Modal
Global System Modal
This modal is globally available and can be triggered via JS from anywhere.
Inhalt von ID (HTML Element)
Nutzt data-bearnie-modal="#id" um den HTML-Inhalt eines Elements direkt im Modal anzuzeigen.
Benutzerdefinierter Inhalt
Dieser Inhalt kommt von einem versteckten div auf der Seite mit der ID #my-custom-content.
- Kein extra AJAX
- Komplettes HTML möglich
- SEO freundlich
Modal Größen
AJAX mit Selector
Lädt die Seite und extrahiert nur den Inhalt des main Elements via data-selector.
AJAX & Iframe (Externe Inhalte)
Lädt Inhalte via fetch oder bettet sie in ein
iframe ein, inkl. Lade-Anzeige.
Auto-Trigger (Bildvergrößerung)
Klick auf das Bild nutzt das globale Modal für eine Vergrößerung – ohne extra Script!
QR Code & Scanner
QR Code Generator
Server-side generated QR codes using SVG/Data URL.
QR Code Scanner
Real-time camera-based scanning using html5-qrcode.
Flippable cards (BBCard)
Default flippable card (Current URL)
This is the back of the card. It was flipped from the QR code!
Custom QR Value
The front QR code points to Google.com.
Face-Specific Styling
Front and back have different background classes!
Multilingual `` Component
Default Source (DE)
<T>Biomasse</T>Result: Biomass
<T>Jetzt starten</T>Result: Start Now
English Source (EN)
<T lang="en">Forest Protection Investment</T>Result: Forest Protection Investment
<T lang="en">Ready to become a forest owner?</T>Result: Ready to become a forest owner?
Current Page Language: en