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.