yarn add intuitive-flexbox
import { HBox, VBox } from "intuitive-flexbox";
export default function HomePage() {
return (
<VBox className="h-screen bg-black py-10 text-white">
<h1 className="mb-2">This is a VBox</h1>
<HBox className="bg-blue-500 bg-opacity-50 py-2">
This is an HBox
<div className="mx-2 bg-red-500 px-2">with</div>
<div className="mx-2 bg-green-500 px-2">multiple items</div>
</HBox>
<HBox className="bg-yellow-500 bg-opacity-50">This another HBox</HBox>
</VBox>
);
}
Prop name | Type | Default value | Description |
---|---|---|---|
children | ReactNode | - | The content of the component |
className | string | - | Additional CSS class name(s) |
id | string | - | The id attribute of the component |
center | boolean | false | Whether to horizontally center the children |
vcenter | boolean | false | Whether to vertically center the children |
hFull | boolean | false | Whether to make the component full width |
Prop name | Type | Default value | Description |
---|---|---|---|
children | ReactNode |
- | The content of the component |
className | string |
- | Additional CSS class name(s) |
id | string |
- | The id attribute of the component |
wFull | boolean |
false |
Whether to make the component full width |
hFull | boolean |
false |
Whether to make the component full height |
spaceBetween | boolean |
false |
Whether to add space between the children |
center | boolean |
false |
Whether to horizontally center the children |
vcenter | boolean |
false |
Whether to vertically center the children |
style | Record<string, unknown> |
- | Additional inline styles to apply to the component |
wrap | boolean |
false |
Whether to wrap the children onto multiple lines |
to Theodorus Clarence for this https://github.com/theodorusclarence/ts-nextjs-tailwind-starter