Container

zippystarter/container

FreeComponent

A container component to apply a consistent layout

Live preview

live · rendered by the registry

Rendered by zippystarter on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://zippystarter.com/r/container.json

Source

src/registry/zippystarter/components/container/index.tsxzippystarter.com/r/container.json

1import React, { PropsWithChildren } from "react";
2import { cn } from "@/lib/utils";
3 
4export function ContainerInner({
5  children,
6  className,
7  ...props
8}: React.ComponentPropsWithoutRef<"div">) {
9  return (
10    <div className={cn(className)} {...props}>
11      {children}
12    </div>
13  );
14}
15 
16export function ContainerOuter({
17  children,
18  className,
19  component: Component = "div",
20  ...props
21}: React.ComponentPropsWithoutRef<"div"> & {
22  component?: React.ElementType;
23}) {
24  return (
25    <Component className={className} {...props}>
26      {children}
27    </Component>
28  );
29}
30 
31interface ContainerProps extends PropsWithChildren {
32  className?: string;
33  component?: React.ElementType;
34  wrapperClassName?: string;
35}
36 
37export function Container({
38  className,
39  component,
40  children,
41  wrapperClassName,
42}: ContainerProps) {
43  return (
44    <ContainerOuter component={component} className={wrapperClassName}>
45      <ContainerInner className={cn(className, "px-safe")}>
46        {children}
47      </ContainerInner>
48    </ContainerOuter>
49  );
50}

Files it writes

src/registry/zippystarter/components/container/index.tsx

More from zippystarter

All 77 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Avataravatar	zippystarter	Components	Free	1 dep · 2 files
Imageimage	zippystarter	Components	Free	no deps
Linklink	zippystarter	Components	Free	no deps