Components

Explore reusable UI components built with BismillahCSS utility classes. Learn how to build, customize, and extend components for your projects.

What are Components?

Components are reusable UI elements built by combining BismillahCSS utility classes. Instead of writing CSS, you compose utilities to create anything from buttons to complex modals.

BismillahCSS provides a foundation of utilities that let you build unlimited component variations without leaving your HTML.

Component Fundamentals

Every component starts with understanding these principles:

1. Composition

Build components by composing smaller utility classes. A button is color + padding + border-radius utilities.

2. Consistency

Use the same utility classes across your project so all components feel cohesive.

3. Reusability

Create base component patterns and reuse them, modifying only what needs to change.

4. Maintainability

All component styles are visible in your markup, making changes trivial.

Available Components

🔘

Buttons

Learn to build buttons with different styles, sizes, and states.

📋

Cards

Create versatile card components for displaying content.

📝

Forms

Build accessible forms with inputs, labels, and validation states.

🪟

Modals

Create dialogs and modals for user interactions.

Building Your Own Components

Here's how to build a component using BismillahCSS utilities:

Step 1: Plan the Structure

Identify the layout, colors, spacing, and interactive states.

<!-- A simple badge component needs:
     - Background color
     - Text color
     - Padding
     - Border radius
     - Small text size -->
<span class="bismillah-bg-blue-200 bismillah-text-blue-800 bismillah-px-2 bismillah-py-1 bismillah-rounded-full bismillah-text-xs bismillah-font-semibold">
  Badge
</span>

Step 2: Add States

Add hover, focus, active, and disabled states using variant prefixes.

<button class="
  bismillah-bg-blue-600
  bismillah-text-white
  bismillah-px-4
  bismillah-py-2
  bismillah-rounded-lg
  hover:bismillah-bg-blue-700
  active:bismillah-bg-blue-800
  focus:bismillah-outline-none
  focus:bismillah-ring-2
  focus:bismillah-ring-blue-300
  disabled:bismillah-opacity-50
  disabled:bismillah-cursor-not-allowed
">
  Button
</button>

Step 3: Make it Responsive

Use responsive prefixes to adapt components across screen sizes.

<div class="
  bismillah-grid
  bismillah-grid-cols-1
  md:bismillah-grid-cols-2
  lg:bismillah-grid-cols-3
  bismillah-gap-4
">
  <!-- Cards that adapt -->
</div>

Component Patterns

Base Styles

Create base styles that all variations inherit:

<!-- Base button -->
<button class="bismillah-px-4 bismillah-py-2 bismillah-rounded-lg bismillah-font-semibold transition-colors">
  Default
</button>

<!-- Primary variant -->
<button class="bismillah-px-4 bismillah-py-2 bismillah-rounded-lg bismillah-font-semibold transition-colors bismillah-bg-blue-600 bismillah-text-white hover:bismillah-bg-blue-700">
  Primary
</button>

<!-- Secondary variant -->
<button class="bismillah-px-4 bismillah-py-2 bismillah-rounded-lg bismillah-font-semibold transition-colors bismillah-bg-gray-200 bismillah-text-gray-900 hover:bismillah-bg-gray-300">
  Secondary
</button>

Compound Components

Build complex components from simpler ones:

<!-- Card component compound -->
<div class="bismillah-bg-white bismillah-rounded-lg bismillah-shadow-md">
  <!-- Header -->
  <div class="bismillah-px-6 bismillah-py-4 bismillah-border-b bismillah-border-gray-200">
    <h3 class="bismillah-text-lg bismillah-font-bold">Card Title</h3>
  </div>
  
  <!-- Body -->
  <div class="bismillah-px-6 bismillah-py-4">
    <p class="bismillah-text-gray-600">Card content</p>
  </div>
  
  <!-- Footer -->
  <div class="bismillah-px-6 bismillah-py-4 bismillah-border-t bismillah-border-gray-200">
    <button class="bismillah-bg-blue-600 bismillah-text-white bismillah-px-4 bismillah-py-2 bismillah-rounded">
      Action
    </button>
  </div>
</div>

Variants

Create variations with conditional styling:

<!-- Alert component with variants -->

<!-- Info variant -->
<div class="bismillah-bg-blue-50 bismillah-border-l-4 bismillah-border-blue-500 bismillah-p-4 bismillah-text-blue-800">
  Info message
</div>

<!-- Success variant -->
<div class="bismillah-bg-green-50 bismillah-border-l-4 bismillah-border-green-500 bismillah-p-4 bismillah-text-green-800">
  Success message
</div>

<!-- Error variant -->
<div class="bismillah-bg-red-50 bismillah-border-l-4 bismillah-border-red-500 bismillah-p-4 bismillah-text-red-800">
  Error message
</div>

Best Practices

Keep utility classes in your markup: This makes components visible and easy to maintain.
Create component variations: Button sizes, colors, styles should all be utility-based variations.
Use semantic HTML: Always use the correct HTML elements for accessibility.
Test accessibility: Ensure components are keyboard navigable and work with screen readers.
Document variations: Show all component states and variations in your documentation.
Consistent spacing: Use the spacing scale consistently across all components.

Next Steps

Explore specific component types to learn detailed implementation patterns:

Learn to build buttons with different styles
Create flexible card layouts
Build accessible forms
Implement modal dialogs