Layout components provide the foundation for page structure in AnimeThemes Web.
Container
A centered container with max-width for page content.
Usage
import { Container } from "@/components/container/Container";
export default function Page() {
return (
<Container>
<h1>Page Content</h1>
</Container>
);
}
Props
Container extends div and accepts all standard HTML div attributes.
Styling
Centered with auto horizontal margins
padding
string
default:"24px 16px"
Responsive padding
Flex
A flexible container using CSS flexbox.
Usage
import { Flex } from "@/components/box/Flex";
<Flex
$wrap={true}
style={{
"--justify-content": "space-between",
"--align-items": "center",
"--gap": "16px"
}}
>
{/* content */}
</Flex>
Props
Enable flex-wrap for multi-line layouts
style['--justify-content']
CSS justify-content value
Row
A horizontal flex container (flex-direction: row).
Usage
import { Row } from "@/components/box/Flex";
<Row style={{ "--gap": "8px", "--align-items": "baseline" }}>
<Text>Label:</Text>
<Text>Value</Text>
</Row>
Example from ThemeDetailCard
From /src/components/card/ThemeDetailCard.tsx:61:
<StyledRow>
<Text variant="small" color="text">
{theme.type}{theme.sequence || null}
</Text>
<Text>
<SongTitle song={theme.song} />
<Performances song={theme.song} expandable />
</Text>
<ThemeMenu theme={theme} />
</StyledRow>
Column
A vertical flex container (flex-direction: column).
Usage
import { Column } from "@/components/box/Flex";
<Column style={{ "--gap": "16px" }}>
<Text variant="h1">Title</Text>
<Text>Description</Text>
</Column>
Example from VideoPlayerBar
From /src/components/video-player/VideoPlayerBar.tsx:118:
<Column style={{ "--gap": "8px" }}>
<Text color="text-muted" maxLines={1}>
<SongTitle song={theme.song} href={videoPagePath} />
</Text>
{!!theme.song?.performances?.length && (
<Text variant="small" color="text-muted" maxLines={1}>
<Text>Performed</Text>
<Performances song={theme.song} maxPerformances={3} />
</Text>
)}
</Column>
Solid
A container with solid background color from the theme.
Usage
import { Solid } from "@/components/box/Solid";
<Solid>
<Text>Content with solid background</Text>
</Solid>
Props
Solid extends div and accepts all standard HTML div attributes.
Styling
Uses theme.colors["solid"] from the theme system
Real-World Example
Combining layout components for a complex UI:
import { Container } from "@/components/container/Container";
import { Column } from "@/components/box/Flex";
import { Text } from "@/components/text/Text";
export default function AnimePage() {
return (
<Container>
<Column style={{ "--gap": "24px" }}>
<Text variant="h1">Anime Title</Text>
<Row style={{ "--gap": "16px", "--align-items": "center" }}>
<Text variant="small">2024</Text>
<Text>•</Text>
<Text variant="small">Winter</Text>
</Row>
</Column>
</Container>
);
}