Base ComponentFoundational building block for UI elements.

BaseComponent

Lorem ipsum content in BaseComponent

import BaseComponent from '@/components/BaseComponent';
export function Example() {  return (    <BaseComponent>      Lorem ipsum content    </BaseComponent>  );}

BaseComponent (margin props)

Margin all sides

Margin horizontal

Margin vertical

Margin top and bottom

import BaseComponent from '@/components/BaseComponent';
export function Example() {  return (    <>      <BaseComponent $m={2}>Margin all sides</BaseComponent>      <BaseComponent $mx={3}>Margin horizontal</BaseComponent>      <BaseComponent $my={1}>Margin vertical</BaseComponent>      <BaseComponent $mt={4} $mb={2}>Margin top and bottom</BaseComponent>    </>  );}

BaseComponent (padding props)

Padding all sides

Padding horizontal

Padding vertical

Padding top and bottom

import BaseComponent from '@/components/BaseComponent';
export function Example() {  return (    <>      <BaseComponent $p={2}>Padding all sides</BaseComponent>      <BaseComponent $px={3}>Padding horizontal</BaseComponent>      <BaseComponent $py={1}>Padding vertical</BaseComponent>      <BaseComponent $pt={4} $pb={2}>Padding top and bottom</BaseComponent>    </>  );}

BaseComponent (responsive and float)

Desktop only content (hidden on mobile)

Mobile only content (hidden on desktop)

Floated left

Floated right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.

import BaseComponent from '@/components/BaseComponent';
export function Example() {  return (    <>      <BaseComponent $desktopOnly>Desktop only content</BaseComponent>      <BaseComponent $mobileOnly>Mobile only content</BaseComponent>      <BaseComponent $float="left">Floated left</BaseComponent>      <BaseComponent $float="right">Floated right</BaseComponent>    </>  );}

BaseComponent (as prop)

Section element with padding

Article element with margin

Header element with vertical padding

import BaseComponent from '@/components/BaseComponent';
export function Example() {  return (    <>      <BaseComponent as="section" $p={3}>Section element</BaseComponent>      <BaseComponent as="article" $m={2}>Article element</BaseComponent>      <BaseComponent as="header" $py={1}>Header element</BaseComponent>      <BaseComponent as="footer" $mt={4}>Footer element</BaseComponent>    </>  );}