Customization

Layout

How Container, Section, and SectionHeader work together to provide a consistent layout system for every landing page section.

Container

The Container component centers content and constrains its max-width. It accepts a size prop to control the width:

sm640pxNarrow content, text-heavy sections

md768pxBlog posts, documentation

lg1024pxStandard sections

xl1280pxDefault. Most landing page sections

2xl1536pxFull-width feature grids, hero sections

Container usage

import { Container } from "@trinkui/react";

<Container size="xl">
  <h2>My Section Title</h2>
  <p>Content is centered with max-width: 1280px</p>
</Container>

<Container size="sm">
  <p>Narrow container for focused content</p>
</Container>

Section

The Section component is the outermost wrapper for every landing page block. It handles vertical spacing, theme switching, and semantic HTML.

Section props

<Section
  theme="dark"        // "light" | "dark" — toggles .dark class
  spacing="lg"        // "none" | "sm" | "md" | "lg" | "xl"
  className="relative" // merged with cn()
>
  <Container size="xl">
    {/* section content */}
  </Container>
</Section>

Spacing values:

none0

smpy-8 sm:py-12

mdpy-12 sm:py-16

lgpy-16 sm:py-24

xlpy-24 sm:py-32

SectionHeader

The SectionHeader component renders the consistent title + subtitle + optional badge pattern used across all section components. It handles text alignment and responsive sizing automatically.

SectionHeader usage

import { SectionHeader } from "@trinkui/react";

<SectionHeader
  badge="New"
  title="Build landing pages faster"
  subtitle="Production-ready components that look great out of the box."
  align="center"   // "left" | "center" | "right"
/>

Composing Layout Components

All three layout components are used together inside every section component. Here is the standard composition pattern:

Standard section composition

import { Section } from "../../layout/Section";
import { Container } from "../../layout/Container";
import { SectionHeader } from "../../layout/SectionHeader";

export const MySection = forwardRef<HTMLElement, MySectionProps>(
  ({ title, subtitle, badge, theme, className, children, ...props }, ref) => {
    return (
      <Section ref={ref} theme={theme} spacing="lg" className={className} {...props}>
        <Container size="xl">
          <SectionHeader badge={badge} title={title} subtitle={subtitle} align="center" />
          <div className="mt-12">
            {children}
          </div>
        </Container>
      </Section>
    );
  }
);

Responsive Breakpoints

trink-ui follows Tailwind CSS v4 default breakpoints with a mobile-first approach:

Default0px+Mobile phones (portrait)

sm:640px+Mobile phones (landscape)

md:768px+Tablets

lg:1024px+Laptops and small desktops

xl:1280px+Desktops

2xl:1536px+Large desktops

Next step

Explore all available color variables and their semantic meanings.

Colors