[feat]: Flex Component

[Chukwu3meka]

Feature description

An easy to use Flex component where users can easily set vertical, wrap, justify, align, flex, gap, and component as is in other UI libraries particularly Ant Design.

Property	Description
vertical	Is direction of the flex vertical, use flex-direction: column
wrap	Set whether the element is displayed in a single line or in multiple lines
justify	Sets the alignment of elements in the direction of the main axis
align	Sets the alignment of elements in the direction of the cross axis
flex	flex CSS shorthand properties
gap	Sets the gap between grids
component	custom element type

Affected component/components

Flex

Additional Context

Additional details here...

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues and PRs

[Chukwu3meka]

I'd love to work on this component

[pablomayobre]

What you are describing is a <div className="flex"> and you can add tailwindcss classes for all those properties you just mentioned, and make it responsive and whatnot.

What are the benefits of a Flex component?

[Chukwu3meka]

The benefits from my view is as it is currently with input, card, skeleton and many more components in shadcn that rely solely on Tailwind but the simplicity of using these components as opposed to typing or serching for the tailwind classes you might need.

It's not just <div className="flex"> per se, as users should be able to indicate the underlying component not necessarily a div could be a span, nav or any other tag which is what the component prop would do. Also, the properties I indicated initially should have their defaults.