HexalUI - Component Library

Getting Started

Installation

Components

Card Component

Explore different card variants with flip effects, theme options, and customizable styles.

Flip Effect Card with Light Theme

Light Theme Card

This card has a flip effect that reveals additional content on hover.

This is additional content inside the card.

import { Card } from 'hexal-ui';

<Card title="Light Theme Card" description="This card has a flip effect that reveals additional content on hover." imageSrc="https://images.unsplash.com/photo-1692606959658-d6f886889751?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8ZG9nJTIwcGljdHVyZXxlbnwwfDF8MHx8fDA%3D" linkLabel="Explore More" linkUrl="https://hexalui.com/" theme="light">Additional content</Card>

Flip Effect Card with Dark Theme

Dark Theme Card

This card uses a dark theme and flips to reveal content when hovered.

This is additional content inside the card.

import { Card } from 'hexal-ui';

<Card title="Dark Theme Card" description="This card uses a dark theme and flips to reveal content when hovered." imageSrc="https://images.unsplash.com/photo-1692606959658-d6f886889751?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8ZG9nJTIwcGljdHVyZXxlbnwwfDF8MHx8fDA%3D" linkLabel="Learn More" linkUrl="https://hexalui.com/" theme="dark">Additional content</Card>