Skip to main content

Layout

Given that Spirokit was built on top of Tamagui, we are inheriting all the layout components from the Tamagui's Stack component, so you don't need to add or setup Tamagui on your project. Besides, Spirokit adds a few customizations on top, such as:

  • Color props like backgroundColor and color will only list SpiroKit colors.
  • Typography props like lineHeight, letterSpacing, fontWeight, and fontSize will also list SpiroKit tokens only.

Here's a list of all the available components:

Box​

Flexible and generic component similar to a div or a View component.

The widest street in the world: Avenida 9 de Julio

 
import { Box, Body } from "@spirokit/ui";

const App = () => {
  return (
    <Box backgroundColor={"$indigo.500"} borderRadius="$3" padding={"$4"}>
      <Body color="white">
        The widest street in the world: Avenida 9 de Julio
      </Body>
    </Box>
  );
};

HStack​

Allows you to align items horizontally.

 
import { HStack, Box } from "@spirokit/ui";

const App = () => {
  return (
    <HStack space={"$4"} backgroundColor="$indigo.900" padding={"$4"}>
      <Box height="$20" width="$20" backgroundColor="$red.500" borderRadius={"$3"} />
      <Box height="$20" width="$20" backgroundColor="$emerald.500" borderRadius={"$3"} />
      <Box height="$20" width="$20" backgroundColor="$amber.500" borderRadius={"$3"} />
      <Box height="$20" width="$20" backgroundColor="$blue.500" borderRadius={"$3"} />
    </HStack>
  );
};

VStack​

Allows you to align items vertically.

 
import { VStack, Box } from "@spirokit/ui";

const App = () => {
  return (
    <VStack space={"$4"} backgroundColor="$indigo.900" padding={"$4"}>
      <Box height={"$20"} width={"$20"} backgroundColor="$red.500" borderRadius={"$3"} />
      <Box height={"$20"} width={"$20"} backgroundColor="$emerald.500" borderRadius={"$3"} />
      <Box height={"$20"} width={"$20"} backgroundColor="$amber.500" borderRadius={"$3"} />
      <Box height={"$20"} width={"$20"} backgroundColor="$blue.500" borderRadius={"$3"} />
    </VStack>
  );
};

ZStack​

Allows you to stack elements on top of each other.

 
import { ZStack, Box } from "@spirokit/ui";

const App = () => {
  return (
    <ZStack height={"$56"}>
      <Box height={"$20"} width={"$20"} backgroundColor="$red.500" borderRadius={"$3"} />
      <Box
        height={"$20"}
        width={"$20"}
        marginTop={"$8"}
        marginLeft={"$8"}
        backgroundColor="$emerald.500"
        borderRadius={"$3"}
      />
      <Box
        height={"$20"}
        width={"$20"}
        marginTop={"$16"}
        marginLeft={"$16"}
        backgroundColor="$amber.500"
        borderRadius={"$3"}
      />
      <Box
        height={"$20"}
        width={"$20"}
        marginTop={"$24"}
        marginLeft={"$24"}
        backgroundColor="$blue.500"
        borderRadius={"$3"}
      />
    </ZStack>
  );
};

Flex​

Essentially a Box component with display: flex.

 
import { Flex, VStack, Box } from "@spirokit/ui";

const App = () => {
  return (
    <VStack space={"$6"}>
      {/* Flex direction = "column" */}
      <Flex flexDirection={"column"} backgroundColor="$indigo.900" padding={"$4"}>
        <Box
          height={"$20"}
          width={"$20"}
          backgroundColor="$red.500"
          marginBottom={"$2"}
          borderRadius={"$3"}
        />
        <Box
          height={"$20"}
          width={"$20"}
          backgroundColor="$emerald.500"
          marginBottom={"$2"}
          borderRadius={"$3"}
        />
        <Box
          height={"$20"}
          width={"$20"}
          backgroundColor="$amber.500"
          marginBottom={"$2"}
          borderRadius={"$3"}
        />
        <Box
          height={"$20"}
          width={"$20"}
          backgroundColor="$blue.500"
          borderRadius={"$3"}
        />
      </Flex>

      {/* Flex direction = "row" */}
      <Flex flexDirection={"row"} backgroundColor="$indigo.900" padding={"$4"}>
        <Box
          height={"$20"}
          width={"$20"}
          backgroundColor="$red.500"
          marginRight={"$2"}
          borderRadius={"$3"}
        />
        <Box
          height={"$20"}
          width={"$20"}
          backgroundColor="$emerald.500"
          marginRight={"$2"}
          borderRadius={"$3"}
        />
        <Box
          height={"$20"}
          width={"$20"}
          backgroundColor="$amber.500"
          marginRight={"$2"}
          borderRadius={"$3"}
        />
        <Box
          height={"$20"}
          width={"$20"}
          backgroundColor="$blue.500"
          borderRadius={"$3"}
        />
      </Flex>
    </VStack>
  );
};

AspectRatio​

Box component that allows you to define the desired height or width, and choose the aspect ratio. The component will calculate the missing dimension for you.

16 / 9

1 / 1

24 / 9

 
import { AspectRatio, VStack, Box, Body } from "@spirokit/ui";

const App = () => {
  return (
    <VStack space={"$4"}>
      {/* 16/9 */}
      <AspectRatio height={"$24"} ratio={"16 / 9"}>
        <Box justifyContent={"center"} alignItems="center" backgroundColor="$indigo.500">
          <Body color="white">16 / 9</Body>
        </Box>
      </AspectRatio>

      {/* 1/1 */}
      <AspectRatio height={"$24"} ratio={"1 / 1"}>
        <Box justifyContent={"center"} alignItems="center" backgroundColor="$red.500">
          <Body color="white">1 / 1</Body>
        </Box>
      </AspectRatio>

      {/* 24/9 */}
      <AspectRatio height={"$24"} ratio={"24 / 9"}>
        <Box justifyContent={"center"} alignItems="center" backgroundColor="$emerald.500">
          <Body color="white">24 / 9</Body>
        </Box>
      </AspectRatio>
    </VStack>
  );
};

Center​

Box component that automatically centers the content both vertically and horizontally.

Center

 
import { Center, Body } from "@spirokit/ui";

const App = () => {
  return (
    <Center backgroundColor={"$rose.400"} width={"$32"} height={"$24"}>
      <Body color="white">Center</Body>
    </Center>
  );
};

Container​

The Container restricts a content's width according to current breakpoint, while keeping the size fluid.

Yerba Mate is the most popular drink in Argentina

When it comes to famous South American drinks, you'll be hard pushed to find something more iconic than yerba mate. If you visit Argentina, you'll constantly see people sipping this caffeine-infused drink through a metal straw known as a bombilla.

 
import { Container, TitleThree, Body } from "@spirokit/ui";

const App = () => {
  return (
    <Container padding="$4">
      <TitleThree>
        Yerba Mate is the most popular drink in Argentina
      </TitleThree>
      <Body>
        When it comes to famous South American drinks, you'll be hard pushed
        to find something more iconic than yerba mate. If you visit Argentina,
        you'll constantly see people sipping this caffeine-infused drink
        through a metal straw known as a bombilla.
      </Body>
    </Container>
  );
};