Section
A semantic section container with configurable layout variants.
Preview
Section Title
This is a default section with some content. Sections help organize and structure your content with consistent spacing and layout.
import {
AuraContainer,
Section,
} from "@/components/ui/Section";
export function SectionDemo() {
return {
return (
<Section>
<h1>Section Title</h1>
<p>
This is a default section with some content. Sections help organize and
structure your content with consistent spacing and layout.
</p>
</Section>
);
};Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/sectionManual
Copy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the Section component into your components/ui/Section.tsx file.
/**
* @description A semantic section container with configurable layout variants.
*/
import * as React from "react";
import { cn } from "@/utils/class-names";
export type AuraContainer = "smash" | "smesh" | "smish" | "smosh" | "smush";
function Wrapper({ className, ...props }: React.ComponentProps<"div">) {
return (
<section className={cn("pad", className)} data-slot="wrapper" {...props} />
);
}
function WrapperContainer({
container = "smush",
className,
...props
}: React.ComponentProps<"div"> & {
container?: AuraContainer;
className?: string;
}) {
return (
<div
data-slot="wrapper-container"
className={cn(container, className)}
{...props}
/>
);
}
type SectionProps = {
children: React.ReactNode;
container?: React.ComponentProps<typeof WrapperContainer>["container"];
subClassName?: string;
} & React.ComponentProps<typeof Wrapper>;
const Section = ({
children,
container,
subClassName,
...props
}: SectionProps) => {
return (
<Wrapper {...props}>
<WrapperContainer container={container} className={subClassName}>
{children}
</WrapperContainer>
</Wrapper>
);
};
export { Wrapper, WrapperContainer, Section };