{# app/templates/admin/components.html #} {% extends "admin/base.html" %} {% block title %}UI Components{% endblock %} {# ✅ CRITICAL: Link to Alpine.js component #} {% block alpine_data %}adminComponents(){% endblock %} {% block content %}

UI Components Library

Back to Dashboard

Quick Reference Library

Copy-paste ready UI components for your admin pages. All components support dark mode and are fully accessible.

Sections

Pro Tip

Click any code block to copy it to your clipboard!

Forms

Basic Input

Required Field with Error

Textarea

Select Dropdown

Checkbox

Disabled/Read-Only Input

Buttons

Primary Button

Secondary Button

Danger Button

Button States

Cards

Stats Card

Total Users

1,234

Info Card

Card Title

Field Label

Field Value

Another Label

Another Value

Badges

Active Pending Inactive Info

Alerts & Toasts

Tables

See your existing table components in the vendor and user list pages.

Modals

Modal dialogs for confirmations and forms.

{% endblock %} {% block extra_scripts %} {# ✅ CRITICAL: Load JavaScript file #} {% endblock %}