"use client"
import Flex from "@/components/ui/flex"
export function FlexDemo() {
return (
<Flex justify="center" align="center" gap="lg" className="w-full p-8">
<div className="bg-card border-border text-foreground flex size-16 items-center justify-center rounded-full border shadow-md">
<span className="text-xl font-semibold">1</span>
</div>
<div className="bg-card border-border text-foreground flex size-16 items-center justify-center rounded-full border shadow-md">
<span className="text-xl font-semibold">2</span>
</div>
<div className="bg-card border-border text-foreground flex size-16 items-center justify-center rounded-full border shadow-md">
<span className="text-xl font-semibold">3</span>
</div>
</Flex>
)
}
Installation
Usage
import Flex from "@/components/ui/flex"<Flex direction="row" gap="md" align="center" justify="between">
<div>Start</div>
<div>End</div>
</Flex>Examples
Column Layout
<Flex direction="col" gap="md">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</Flex>Centered Content
<Flex justify="center" align="center" className="h-64">
<div>Centered Content</div>
</Flex>Responsive Layout
<Flex direction="row" directionMobile="col" gap="lg" gapMobile="sm">
<div>Responsive Item 1</div>
<div>Responsive Item 2</div>
</Flex>Space Between
<Flex justify="between" align="center">
<span>Left</span>
<span>Right</span>
</Flex>Props
Flex
Notes
- The component uses the
use-mobilehook to detect mobile screens and apply mobile-specific props. - All responsive props (ending with
Mobile) will only apply when the viewport is considered mobile. - The component is polymorphic and can be rendered as any HTML element using the
asprop.