Styled UI Library

Components

Box

A box is a foundational primitive component serving as a generic container.

Examples

link

Default

The box can accommodate any type of content, ranging from simple strings and individual components to more intricate structures. The default box is provided without any props, yet it supports various props including: flexLayout, flexAlignItems, flexJustifyContent, hasRadius, radiusVariant, hasShadow, divider, isTransparent and bgColor.

Any content can be placed inside the Box component

import { Box } from '@millanbrankovic/styled-ui-library';

function DefaultBoxExample() {
  return (
    <Box>
      <p>Any content can be placed inside the Box component</p>
    </Box>
  );
};

export default DefaultBoxExample;
link

Appearance

Rounded Corners & Shadow

A Box component is available in two different visual variations, rounded corners & shadow. By passing either or both hasRadius, hasShadow visual appearance can be changed.

Any content can be placed inside the Box component

import { Box } from '@millanbrankovic/styled-ui-library';

function RoundedCornersBoxExample() {
  return (
    <Box hasRadius hasShadow>
      <p>Any content can be placed inside the Box component</p>
    </Box>
  );
};

export default RoundedCornersBoxExample;
link

Radius Variant

Available radiusVariant's are: 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomRight' | 'bottomLeft'

Any content can be placed inside the Box component

Any content can be placed inside the Box component

Any content can be placed inside the Box component

Any content can be placed inside the Box component

Any content can be placed inside the Box component

Any content can be placed inside the Box component

import { Box } from '@millanbrankovic/styled-ui-library';

function RadiusVariantBoxExample() {
  return (
    <Box radiusVariant='top' hasShadow>
      <p>Any content can be placed inside the Box component</p>
    </Box>
    <Box radiusVariant='topLeft' hasShadow>
      <p>Any content can be placed inside the Box component</p>
    </Box>
    <Box radiusVariant='topRight' hasShadow>
      <p>Any content can be placed inside the Box component</p>
    </Box>
    <Box radiusVariant='bottom' hasShadow>
      <p>Any content can be placed inside the Box component</p>
    </Box>
    <Box radiusVariant='bottomRight' hasShadow>
      <p>Any content can be placed inside the Box component</p>
    </Box>
    <Box radiusVariant='bottomLeft' hasShadow>
      <p>Any content can be placed inside the Box component</p>
    </Box>
  );
};

export default RadiusVariantBoxExample;
link

Border

Border Variants & Shadow

Available border variants are: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'

Any content can be placed inside the Box component

Any content can be placed inside the Box component

Any content can be placed inside the Box component

Any content can be placed inside the Box component

Any content can be placed inside the Box component

Any content can be placed inside the Box component

import { Box } from '@millanbrankovic/styled-ui-library';

function BorderShadowBoxExample() {
  return (
    <Box border='primary' hasShadow>
      <p>Any content can be placed inside the Box component</p>
    </Box>
    <Box border='secondary' hasShadow>
      <p>Any content can be placed inside the Box component</p>
    </Box>
    <Box border='info' hasShadow>
      <p>Any content can be placed inside the Box component</p>
    </Box>
    <Box border='success' hasShadow>
      <p>Any content can be placed inside the Box component</p>
    </Box>
    <Box border='warning' hasShadow>
      <p>Any content can be placed inside the Box component</p>
    </Box>
    <Box border='danger' hasShadow>
      <p>Any content can be placed inside the Box component</p>
    </Box>
  );
};

export default BorderShadowBoxExample;
link

Practical use case

Box Element

The Box component, when paired with BoxElement, offers a robust foundation for crafting versatile layouts. As exemplified here, these fundamental building blocks pave the way for designing familiar yet innovative components and patterns, enhancing the user experience.

Jane Doe

Jane Doe

Jane Doe is Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet...

import { Box } from '@millanbrankovic/styled-ui-library';

function ContentBoxExample() {
  return (
    <Box hasRadius hasShadow>
      <Avatar title="Jane Doe" src={src} size="medium" status='online' />

      <BoxElement>
        <Text title="Jane Doe" tag="h3" size="hSize4" />
        <Text
          title={text}
          tag="p"
          size="regular"
        />
      </BoxElement>

      <BoxElement
        flexLayout="flexColumn"
        flexAlignItems="flexEnd"
        flexJustifyContent="flexEnd"
      >
        <Button title="Send message" appearance="primary" isRound />
      </BoxElement>
    </Box>
  );
};

export default ContentBoxExample;