Components

Frontend Hamroun provides a rich set of components to help you build interactive and responsive user interfaces.

Filter:

Component Overview

Explore all available components in the Frontend Hamroun library. Use the search and filter options above to find specific components by name, description, or tags.

42k

4.9

Virtual DOM

NEW

Efficient diffing and rendering algorithm for minimal DOM operations

7 contributors

Updated 2 days ago

CorePerformance

38k

4.7

Component Architecture

Create reusable UI components with declarative syntax

12 contributors

Updated 1 week ago

Core

27k

4.6

Context API

UPDATED

Pass data through the component tree without prop drilling

5 contributors

Updated 3 days ago

State Management

18k

4.5

Suspense

Handle asynchronous operations with components that wait for data

4 contributors

Updated 2 weeks ago

LoadingAdvanced

31k

4.8

Client Components

Interactive client-side components with hooks and state

9 contributors

Updated 5 days ago

Client-side

23k

4.9

Server Components

NEW

Server-rendered components that improve performance

6 contributors

Updated 1 day ago

Server-side

45k

4.9

Button

POPULAR

Interactive buttons with various styles and animations

15 contributors

Updated 3 days ago

UIInteractive

39k

4.7

Card

UPDATED

Versatile content containers with hover effects

8 contributors

Updated 1 week ago

UILayout

35k

4.6

Modal

Popup dialogs and modal windows with accessibility features

7 contributors

Updated 2 weeks ago

UIOverlay

22k

4.8

Calendar

NEW

Date picker with various display options and localization

5 contributors

Updated 4 days ago

UIDate

33k

4.7

Table

Responsive tables with sorting, filtering, and pagination

10 contributors

Updated 1 week ago

DataDisplay

28k

4.6

Chart

Data visualization with interactive charts and graphs

8 contributors

Updated 10 days ago

DataDisplay

Component Comparison

Compare different components to find the right one for your use case.

Feature	Button	IconButton	LinkButton	GlowButton
Keyboard Navigation	✅	✅	✅	✅
Icon Support	✅	✅	✅	✅
Loading State	✅	✅	❌	✅
Hover Effects	Basic	Basic	Underline	Advanced
Form Submit	✅	❌	❌	✅
Bundle Size Impact	Small	Small	Small	Medium

Interactive Examples

Try out some of our most popular components with these interactive examples. Toggle between light/dark themes and desktop/mobile views to see how they adapt.

Button Component

Code Example

playground.jsx

import { Button } from 'frontend-hamroun/ui';

function SaveButton() {
  return (
    <Button 
      variant="primary"
      icon={<SaveIcon />}
      onClick={() => saveData()}
    >
      Save Changes
    </Button>
  );
}

Button Variants

Card Component

Code Example

playground.jsx

import { Card } from 'frontend-hamroun/ui';

function FeatureCard() {
  return (
    <Card
      title="Interactive UI"
      description="Build engaging user interfaces with our components"
      image="/images/feature.png"
      variant="hover"
    >
      <Button>Learn More</Button>
    </Card>
  );
}

Interactive Card

This card demonstrates the interactive 3D hover effect available in our card components.

Interactive Icons

API Reference

Detailed documentation for component props and configuration options.

Button Props

Prop	Type	Default	Description
variant	"primary" \| "accent" \| "subtle"	"primary"	The visual style variant of the button
size	"sm" \| "md" \| "lg"	"md"	Controls the size of the button
disabled	boolean	false	When true, disables the button
icon	ReactNode	undefined	Optional icon to display inside the button
href	string	undefined	If provided, renders as an anchor tag
onClick	() => void	undefined	Function called when button is clicked
className	string	""	Additional CSS class names

Card Props

Prop	Type	Default	Description
title	string	undefined	Card title displayed at the top
description	string	undefined	Optional description text
image	string	undefined	Optional image URL to display
variant	"default" \| "hover" \| "interactive"	"default"	The visual style and behavior of the card
className	string	""	Additional CSS class names
children	ReactNode	undefined	Content to display inside the card

Component FAQs

Create custom components by defining a function or class that returns JSX. You can extend existing components using composition or inheritance patterns.

Yes, all components are fully typed with TypeScript definitions included in the package. This provides excellent IDE support and type safety.

Components accept className props for styling with CSS or Tailwind. You can also use the theme system, CSS modules, or styled-components.

Yes, all components follow WCAG guidelines with proper ARIA attributes, keyboard navigation support, and focus management.

Related Resources

Explore tutorials, videos, and additional documentation to master Frontend Hamroun components.

Component Popularity

See which components are most widely used in the community.

Button

4.9

95% usage34k downloads

Card

4.8

88% usage31k downloads

TextField

4.7

82% usage29k downloads

Modal

4.6

75% usage26k downloads

Getting Started with Components

Basic Component Usage

playground.jsx

import { useState } from 'frontend-hamroun';
import { Button, Card, TextField } from 'frontend-hamroun/ui';

function MyFirstComponent() {
  const [name, setName] = useState('');
  
  return (
    <Card title="Welcome to Frontend Hamroun">
      <p>Enter your name to get started:</p>
      <TextField 
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Your name"
      />
      <Button onClick={() => alert(`Hello, ${name}!`)}>
        Say Hello
      </Button>
    </Card>
  );
}

Read the Full Guide

Menu

Components

Component Overview

Virtual DOM

Component Architecture

Context API

Suspense

Client Components

Server Components

Button

Card

Modal

Calendar

Table

Chart

Virtual DOM

Component Architecture

Context API

Suspense

Client Components

Server Components

Button

Card

Modal

Calendar

Table

Chart

Component Comparison

Interactive Examples

Button Component

Code Example

Button Variants

Card Component

Code Example

Interactive Card

Interactive Icons

API Reference

Button Props

Card Props

Component FAQs

How do I create custom components?

Can I use Hamroun components with TypeScript?

How do I style components?

Are these components accessible?

Related Resources

Component Best Practices

Building a Dashboard with Hamroun

Component Architecture Deep Dive

Component Showcase Gallery

Component Popularity

Button

Card

TextField

Modal

Getting Started with Components

Basic Component Usage