1. Home
  2. Components
  3. Layout
  4. Container
Getting StartedIntroduction SOONInstallation SOONChange log SOONRoadmap SOON
Components
Layout
ContainerFlex SOONGrid SOONSticky SOONSeparator SOONAspect Ratio SOONVisually Hidden SOON
Overlays
DialogPopover SOONTooltipDropdown Menu SOONContext Menu SOONHover Card SOON
Navigation
Link SOONNavigation Menu SOONBreadcrumbs SOONPagination SOONStepper SOON
Disclosure
Collapsible SOONAccordion SOONTabs SOON
Typography
H1 SOONH2 SOONH3 SOONH4 SOONH5 SOONH6 SOONP SOONSpan SOONEm SOONI SOONStrong SOONB SOONQ SOONBlockquote SOONUl SOONOl SOONKbd SOONCode SOONTable of Contents SOON
Media
Icon SOONAvatar SOONAvatar Group SOONImage SOONVideo SOON
Notifications
Notification SOONNotification Panel SOONToast SOONAlert SOON
Status
Spinner SOONProgress Bar SOON
Buttons
Button SOONBurger Button SOONButton Group SOON
Data Display
Article Preview SOONBadge SOONCard SOONCommand Line SOONTable SOONTag SOONTag Group SOONTag Picker SOONTestimonial SOONProduct Tile SOONSkeleton SOONStatistic SOON
Data Entry
Address Input SOONCheckbox SOONCalendar Input SOONCalendar Range Input SOONColor Picker SOONCurrency Input SOONCredit Card Input SOONDate Input SOONDate Picker SOONDate Range Input SOONDate Range Picker SOONFieldset SOONFile Input SOONFile Dropzone SOONFile Picker SOONLabel SOONPin Input SOONPhone Number Input SOONRadio Button SOONRadio Group SOONRange Slider SOONRating SOONSearch Input SOONSwitch SOONSegmented Control SOONSelect SOONSlider SOONText Input SOONTextarea SOONToggle SOONToggle Group SOONURL Input SOON
Forms
TBD SOON

Container

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

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: var(
); /* 👈 Use the space scale */
	--container-max-padding: var(
); /* 👈 Use the space scale */
}
Resize the viewport to see the container's margins and paddings.

Features

Parts and their API

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, 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.

Source

Get all-access

Styling

The Container component inherits the --content-max-width variable and has its own fluid space rule.

design-tokens.css
  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
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
/* Website width */
@layer base {
	:root {
		/* Editable website width values */
		--content-min-width: 20; /* 20rem = 320px */
		--content-max-width: 96; /* 96rem = 1536px */
	}
}
	
/* Container Space */
@layer components {
	:root {
		/* Editable container paddings */
		--container-min-padding: var(--scale-4); /* 6px */
		--container-max-padding: var(--scale-13); /* 32px */


		/* Calculations */
		--container-deltaY: calc(var(--container-max-padding) - var(--container-min-padding));
		--container-gradient: calc(var(--container-deltaY) / var(--size-deltaX));
		--container-intercept: calc(var(--container-min-padding) - (var(--container-gradient) * var(--content-min-width)));
		--container-padding-size: calc(var(--container-gradient) * 100vw + var(--container-intercept) * 1rem);


		/* Container fluid padding */
		--container-padding-x: clamp(calc(var(--container-min-padding) * 1rem), var(--container-padding-size), calc(var(--container-max-padding) * 1rem));


		/* Container max width */
		--container-max-width: calc(var(--content-max-width) * 1rem);
	}
}

From which the max-w-container and *-container space utilities are created.

extended-theme.ts
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
export const extendedTheme = {
	/* Website width */
	maxWidth: {
		container: 'var(--container-max-width)',
	},
	/* Space scale */
	spacing: {
		container: 'var(--container-padding-x)',
	},
}

Even thought the *-container space utility works with all the properties that accept a size value, such as padding, margin, width, minWidth, maxWidth, height, minHeight, maxHeight, gap, inset, space, translate, scrollMargin, and scrollPadding, it should probably only be used for the Container component.

component-styles.css
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
/* ### Layout ### */
@layer components {
	/* Container. The container's class is called 'container-class' because TailwindCSS already has a 'container' class. */
	.container-class {
		@apply max-w-container mx-auto w-full px-container;
	}
}

Unfortunately, TailwindCSS already has a container class, so we had to name ours container-class.