Container

The component centers content and constrains its maximum width for optimal readability.

Demo

React

xs: 384px

sm: 720px

md: 1280px

lg: 1440px

xl: 1600px

1980px (max)

Vue

xs: 384px

sm: 720px

md: 1280px

lg: 1440px

xl: 1600px

1980px (max)

Example

The Container component provides base styles (full width and padding). Use the w prop to set maximum width, and Tailwind CSS classes for additional styling.

React

import { Container } from '@fintech-sandpit/ui/react';

return (
  <Container w="md">
    Medium-width container
  </Container>
);

Vue

<script setup lang="ts">
import { Container } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Container w="md">
    Medium-width container
  </Container>
</template>

Props

Name	Type	Required	Default	Description
w	ContainerSize	Yes	—	Maximum width of the container

Types

type ContainerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'