⚡ Version 2.0

UtilaCSS Components

Beautiful, responsive, and modern UI components. Build faster with our comprehensive library.

Documentation

🔘 Buttons

Interactive buttons in various styles and sizes

Standard Buttons
Outline Buttons
Button Sizes

⚠️ Alerts

Contextual feedback messages

✓ Success! Your action was completed successfully.
ℹ Info: Here's some helpful information for you.
⚠ Warning: Please review this important message.
✕ Error: Something went wrong. Please try again.

🏷️ Badges

Small status indicators

Primary Success Danger Warning Info

📦 Cards

Flexible content containers

Featured Card

Beautiful card component with header and body sections.

📝 Forms

Input fields and form controls

📊 Tables

Organized data display

NameEmailRoleStatus
Ahmed Aliahmed@example.comDeveloperActive
Sara Mohamedsara@example.comDesignerActive
Omar Hassanomar@example.comManagerPending

📈 Progress

Visual progress indicators

25%
50%
75%

⏳ Spinners

Loading indicators

📑 Tabs

Organize content in tabs

🏠 Home Tab

Welcome to the home tab content! This is where you'll find your dashboard.

📋 Accordion

Collapsible content panels

What is UtilaCSS? ▼
UtilaCSS is a lightweight and modern CSS framework for building beautiful web interfaces quickly and efficiently.
How do I get started? ▼
Simply include the UtilaCSS stylesheet in your HTML and start using the pre-built components and utilities.
Is it responsive? ▼
Yes! UtilaCSS is fully responsive and works great on all devices from mobile to desktop.

🍞 Breadcrumb

Navigation path

📄 Pagination

Page navigation

📝 List Group

Organized lists with style

✓ First item in the list
✓ Second item in the list
✓ Third item in the list
✓ Fourth item in the list

🪟 Modal

Dialog windows

🔔 Toast

Notifications

🧭 Navbar

Navigation bar component

🔔 Notification
This is a toast notification message!