Devstarter - Portfolio Template
componentcontainersource: ok · refreshed
Container
A container component to apply a consistent layout
npx shadcn add "https://zippystarter.com/r/container.json"free
No selection tags yet — empty means no evidence, not lack of support.
Files1 · source cached 10/2/2026, 12:31:22 AM
src/registry/zippystarter/components/container/index.tsx
import React, { PropsWithChildren } from "react";
import { cn } from "@/lib/utils";
export function ContainerInner({
children,
className,
...props
}: React.ComponentPropsWithoutRef<"div">) {
return (
<div className={cn(className)} {...props}>
{children}
</div>
);
}
export function ContainerOuter({
children,
className,
component: Component = "div",
...props
}: React.ComponentPropsWithoutRef<"div"> & {
component?: React.ElementType;
}) {
return (
<Component className={className} {...props}>
{children}
</Component>
);
}
interface ContainerProps extends PropsWithChildren {
className?: string;
component?: React.ElementType;
wrapperClassName?: string;
}
export function Container({
className,
component,
children,
wrapperClassName,
}: ContainerProps) {
return (
<ContainerOuter component={component} className={wrapperClassName}>
<ContainerInner className={cn(className, "px-safe")}>
{children}
</ContainerInner>
</ContainerOuter>
);
}