Components
Container
A responsive and customizable layout container for consistent spacing and width management.
Previews with Code
Default Container
Default container content goes here.
Installation
The Container component provides consistent width and spacing for layout management.
Quickly add the component using:
Variant Container
This is a `sm` container.
This is a `md` container.
This is a `lg` container.
This is a `xl` container.
This is a `2xl` container.
This is a `3xl` container.
This is a `4xl` container.
This is a `5xl` container.
This is a `6xl` container.
This is a `7xl` container.
Styled Container
Custom styled container content.
Installation
The Container component provides consistent width and spacing for layout management.
Quickly add the component using:
File Structure
container.tsx
Props
The Container component accepts the following props:
| Prop | Type | Default |
|---|---|---|
variant | "default" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "default" |
className | string | - |
otherProps | React.HTMLAttributes<HTMLDivElement> | - |
Features
The Container component includes the following features:
- Predefined Width Variants:
- Sizes range from
smto7xl, ensuring responsive design and consistent spacing.
- Sizes range from
- Customizable Styling:
- Add custom classes via the
classNameprop.
- Add custom classes via the
- Utility-First Design:
- Built with utility classes for flexibility and reusability.
- Supports Standard HTML Props:
- Includes all standard
divelement attributes.
- Includes all standard
Accessibility
The Container component is inherently accessible as it serves as a layout container. Ensure child elements follow accessibility standards.
Conclusion
The Container component is a simple yet powerful utility for building consistent, responsive layouts. Use it to manage widths and spacing efficiently across your application.