Container

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

Demo

React

1980px

sm: 384px

md: 768px

lg: 1024px

xl: 1280px

Vue

1980px

sm: 384px

md: 768px

lg: 1024px

xl: 1280px

Usage

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 container
  </Container>
);

Vue

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

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

Props

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

Types

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