1. Home
  2. Docs
  3. Components
  4. Layout
  5. Container

Container

Gives content a fluid padding. If viewport goes beyond the website's max width, the content stays centered.

Usage

ContainerExample.tsx
  1. 1
<Container>Some content</Container>

This page is wrapped in a <Container />. To see it in action, click this checkbox , edit the values below, and resize the window and see how the padding grows fluidly with viewport width. Also notice how the <Container /> remains centered when the viewport goes beyond the website's max width of 1536px.

styles.css
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
:root {
	/* Website width */
	--website-min-width: ; /* 👈 Unitless pixels */
	--website-max-width: ; /* 👈 Unitless pixels */
 
	/* Spacing */
	--container-min-padding: ; /* 👈 Unitless pixels */
	--container-max-padding: ; /* 👈 Unitless pixels */
}

Features

  • Padding flows between min and max values.
  • Inherits the website's max width and centers content beyond it.

Source

container.tsx
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
import { type HTMLAttributes, type PropsWithChildren, forwardRef } from 'react'
import { cn } from '#app/utils/tailwind-merge.ts'


/**
 * Container component.
 *
 * @component
 * @example
 * ```jsx
 * <Container>Some content</Container>
 * ```
 *
 * @param {string} [className] - Additional CSS class names.
 * @param {React.HTMLAttributes<HTMLDivElement>} [props] - Additional HTML attributes.
 * @returns {JSX.Element} The Container component.
 */
const Container = forwardRef<HTMLDivElement, PropsWithChildren<HTMLAttributes<HTMLDivElement>>>(({ className, ...props }, ref) => (
	<div ref={ref} className={cn('container', className)} {...props} />
))
Container.displayName = 'Container'


export { Container }

Styling

tailwind.css
  1. 1
  2. 2
  3. 3
.container {
	@apply max-w-website px-viewport-padding mx-auto w-full overflow-x-hidden;
}