Guides

Responsive Design

trink-ui is mobile-first by default. Every section, layout component, and primitive adapts to different screen sizes without any extra work. Learn how it works and how to customize responsive behavior.

Mobile-first approach

All trink-ui components are designed mobile-first. Base styles target small screens, and responsive modifiers add layout changes at larger breakpoints. This follows Tailwind CSS conventions:

Container sizes

The Container layout component constrains content width and centers it horizontally. Choose from multiple sizes depending on how wide your content should be:

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

// Narrow content (forms, text articles)
<Container size="sm">  {/* max-width: 640px  */}
  <p>Narrow content</p>
</Container>

// Default content width
<Container size="md">  {/* max-width: 768px  */}
  <p>Medium content</p>
</Container>

// Wide content (most sections use this)
<Container size="lg">  {/* max-width: 1024px */}
  <p>Wide content</p>
</Container>

// Extra wide (feature grids, pricing)
<Container size="xl">  {/* max-width: 1280px */}
  <p>Extra wide content</p>
</Container>

// Full width with max constraint
<Container size="2xl"> {/* max-width: 1536px */}
  <p>Very wide content</p>
</Container>

Section spacing adapts automatically

The Section layout component provides responsive vertical padding. On mobile, padding is compact; on larger screens, it increases for a more spacious feel:

// Section spacing prop
<Section spacing="sm">  {/* py-8  md:py-12 */}
<Section spacing="md">  {/* py-12 md:py-16 */}
<Section spacing="lg">  {/* py-16 md:py-24 */}
<Section spacing="xl">  {/* py-20 md:py-32 */}

All trink-ui section components (Hero, Features, Pricing, etc.) use Section internally with sensible defaults, so spacing is already responsive.

Grid layouts stack on mobile

Components like FeaturesGrid, PricingCards, TestimonialsGrid, and StatsGrid use CSS Grid that automatically adapts:

Navbar collapses on mobile

The NavbarSimple component automatically converts to a hamburger menu on screens below the md breakpoint. On desktop, links display horizontally. On mobile, tapping the menu icon reveals a slide-down panel with all navigation links and action buttons stacked vertically.

<NavbarSimple
  brand={{ name: "Acme", href: "/" }}
  links={[
    { label: "Features", href: "#features" },
    { label: "Pricing", href: "#pricing" },
    { label: "FAQ", href: "#faq" },
  ]}
  actions={[
    { label: "Sign In", href: "/login", variant: "ghost" },
    { label: "Get Started", href: "/signup", variant: "primary" },
  ]}
/>
{/* Desktop: horizontal links + buttons */}
{/* Mobile: hamburger icon → slide-down menu */}

Testing responsive layouts

Use your browser's developer tools to test at various screen sizes:

• Chrome/Edge: Press F12, then Ctrl+Shift+M to toggle device mode
• Firefox: Press F12, then click the responsive design mode icon
• Safari: Enable Developer menu in Preferences, then use Responsive Design Mode
• Test at 375px (iPhone SE), 768px (iPad), 1024px (laptop), 1440px (desktop)

Custom responsive overrides

Every trink-ui component accepts a className prop. Use Tailwind responsive modifiers to add custom behavior at specific breakpoints:

// Hide a section on mobile, show on desktop
<FeaturesGrid
  className="hidden lg:block"
  title="Desktop features"
  features={...}
/>

// Adjust padding at different breakpoints
<HeroCentered
  className="px-4 sm:px-8 lg:px-16"
  title="Custom spacing"
  ...
/>

// Change text alignment based on screen size
<CTACentered
  className="text-left md:text-center"
  title="Responsive alignment"
  ...
/>