Container Component: Inspired from Shadcn and Tailwind UI
As a front-end developer, I often find myself in a dance with familiar patterns, especially when it comes to styling and layout. It's like a well-choreographed number where every step, every twirl is known ahead of time. Yet, there's beauty in this repetition, a chance to refine and perfect.
A Nod to the Greats: shadcn/ui and Tailwind UI
shadcn/ui is a collection of reusable components that are built using Radix UI and Tailwind CSS. It stands out because it's not a traditional component library; rather, it's a set of components that developers can directly copy into their applications, offering a high degree of customization.
Tailwind UI offers a suite of beautifully designed components that adhere to Tailwind CSS's utility-first philosophy, providing developers with a rich set of classes to build responsive interfaces quickly.
A Container Component
In the spirit of shadcn's philosophy and Tailwind UI's design approach, I've created a Container component that embodies flexibility and ease of use, crafted with TypeScript to ensure type safety and enhance developer experience. This component is not part of any library; it's a standalone creation that I've made available for any developer to incorporate into their projects.
Here's the source code for the component:
import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'
const containerVariants = cva('mx-auto px-4 sm:px-6 lg:px-8', {
variants: {
variant: {
fullMobileConstrainedPadded: 'max-w-7xl sm:px-6 lg:px-8',
constrainedPadded: 'max-w-7xl px-4 sm:px-6 lg:px-8',
fullMobileBreakpointPadded: 'container mx-auto sm:px-6 lg:px-8',
breakpointPadded: 'container mx-auto px-4 sm:px-6 lg:px-8',
narrowConstrainedPadded: 'max-w-7xl px-4 sm:px-6 lg:px-8 max-w-3xl',
},
},
defaultVariants: {
variant: 'narrowConstrainedPadded',
},
})
export interface ContainerProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof containerVariants> {
asChild?: boolean
}
const Container: React.FC<ContainerProps> = ({
asChild,
className,
children,
variant,
...props
}) => {
const Comp = asChild ? React.Fragment : 'div'
const containerClasses = cn(containerVariants({ variant }), className)
return (
<Comp className={containerClasses} {...props}>
{variant === 'narrowConstrainedPadded' ? (
<div className="mx-auto max-w-3xl">{children}</div>
) : (
children
)}
</Comp>
)
}
export { Container, containerVariants }
Leveraging the Container Component
To seamlessly integrate this Container component into your project, you can copy the source code provided above. It's primed for insertion into any React project that leverages Tailwind CSS for styling. Select from a variety of layout variants to fit your design requirements by simply passing the desired props.
Important Note!
This component relies on a utility function cn
which is part of the
shadcn/ui library. If you're already using shadcn/ui, you're all set.
Otherwise, you'll need to implement a similar concatenation function to handle
class names. This is a great opportunity to get creative with your solutions
or explore other utility libraries that offer similar functionality like
clsx
Invitation for Collaboration
This Container component stands as a beacon of what's possible when we draw inspiration from the collective wisdom of the developer community. While it draws from the ethos of shadcn and Tailwind UI, it strides forward as an independent entity, ready to be a versatile player in your development repertoire.
I'm excited to witness the innovative ways in which it will be adapted and expanded within diverse projects. If you incorporate this component into your work, I'd love to hear about it. Feel free to mention me or reach out with your feedback and contributions. Together, we can continue to refine and enhance this tool, shaping it to be an even more valuable asset for developers everywhere.