Flex

Introduction

The Flex component provides a simple and intuitive way to create flexbox layouts in your Next.js applications. Built on top of Tailwind CSS utility classes, it offers a convenient API for controlling flex container properties without having to remember all the flexbox utility classes.

Installation

npx axionjs-ui add flex

File Structure

Here’s the file structure for the Flex component:

Variants

Row Layout (Default)

Column Layout

Responsive Layout

Flex Wrap (Grid-like)

Examples

Navigation Bar

Card with Flex Layout

Chat Interface

Dashboard Stats

Form Layout

Holy Grail Layout

Props

The Flex component comes with the following customizable props:

Customization

The Flex component can be customized further by:

// In your flex.tsx file
const flexVariants = cva("flex", {
  variants: {
    // Other variants
    gap: {
      none: "gap-0",
      xs: "gap-1",     // Added extra small
      sm: "gap-2",
      md: "gap-4",
      lg: "gap-6",
      xl: "gap-8",
      xxl: "gap-12",   // Added extra large
    },
  },
  // Default variants
});

Use Cases

The Flex component is perfect for:

• Layouts: Create complete page layouts with headers, sidebars, and content areas.
• Navigation: Build responsive navigation bars and menus.
• Card Arrangements: Organize card components in grids or rows.
• Form Layout: Structure form fields with consistent spacing and alignment.
• Content Alignment: Control the positioning and spacing of UI elements.
• Media Displays: Create galleries, image grids, and video layouts.
• Responsive Design: Build layouts that adapt to different screen sizes.

Accessibility

The Flex component follows these accessibility best practices:

• Semantic HTML: Uses appropriate HTML elements for layout
• Screen Reader Friendly: Maintains a logical document flow
• Keyboard Navigation: Preserves natural tab order of elements
• Focus Indicators: Retains proper focus handling

Features

The Flex component provides the following features:

• Multiple Directions: Row, column, row-reverse, and column-reverse layouts.
• Alignment Control: Fine-tuned control over how items align on both axes.
• Spacing Options: Predefined gap sizes for consistent spacing.
• Wrapping Control: Enable or disable wrapping for grid-like layouts.
• Composition Support: Nest Flex containers for complex layouts.
• Responsive Design: Compatible with Tailwind’s responsive modifiers.
• Polymorphic Rendering: Use any component as a flex container with asChild.

Conclusion

The Flex component is a versatile, accessible, and lightweight solution for creating flexible layouts in your application. Its intuitive API simplifies the use of CSS Flexbox, making it easy to create responsive and adaptive layouts while maintaining a consistent design language across your Next.js application.