Skip to main content

Chapter 12: Styling and Layout

TL;DR​

  • Worka provides the Chakra UI component library to all packs automatically.
  • Import components directly: import { Button, Box, VStack } from '@chakra-ui/react';
  • Use layout components like VStack, HStack, and Flex for structure.
  • Use style props for CSS: <Box bg="blue.500" color="white" p={4}>Hello</Box>.
  • Your UI will automatically adopt the user's selected theme (light/dark mode).

To ensure a consistent and high-quality user experience across the entire platform, Worka provides a single, powerful component and styling library to all packs: Chakra UI.

You do not need to install or configure it. It is provided by the Worka Host application, and your pack's UI can use it immediately.

Using Chakra UI Components​

You can import any component from the Chakra UI library directly in your .tsx files. The most common components are available for everything from buttons and inputs to modals and spinners.

import { Button, Heading, Input, Text } from '@chakra-ui/react';

function MyView() {
  return (
    <>
      <Heading>My Pack's UI</Heading>
      <Text>This is a description.</Text>
      <Input placeholder="Enter some data" />
      <Button colorScheme="teal">Submit</Button>
    </>
  );
}

Layout and Stacks​

Chakra UI shines when it comes to layout. Instead of writing custom CSS with Flexbox or Grid, you can use its intuitive layout components to structure your UI.

  • Box: The most primitive component. It's like a <div> that you can apply styles to.
  • VStack: Stacks its children vertically with a consistent spacing.
  • HStack: Stacks its children horizontally with a consistent spacing.
  • Flex: A powerful component that gives you direct access to CSS Flexbox properties.

Example:

import { VStack, HStack, Box, Text } from '@chakra-ui/react';

function LayoutExample() {
  return (
    <VStack spacing={8} p={5}>
      <Text>Header</Text>
      <HStack spacing={4}>
        <Box bg="gray.200" p={4}>Child 1</Box>
        <Box bg="gray.200" p={4}>Child 2</Box>
      </HStack>
      <Text>Footer</Text>
    </VStack>
  );
}

Styling with Style Props​

A key feature of Chakra UI is style props. You can apply most CSS properties directly as props on any Chakra component. This allows for rapid and readable styling without ever leaving your JSX.

  • p: padding
  • m: margin
  • bg: background or background-color
  • color: text color
  • fontWeight: font-weight
  • fontSize: font-size

Example:

<Box
  p={4} // padding
  m={2} // margin
  bg="blue.500" // background color from the theme
  color="white" // text color
  borderRadius="md" // border-radius
  boxShadow="lg" // box-shadow
>
  This is a styled box.
</Box>

For a full list of available components and style props, please refer to the official Chakra UI documentation, which is an excellent resource.

Automatic Theming (Light/Dark Mode)​

Because your pack's UI runs inside the Worka Host's ChakraProvider, it will automatically respect the user's global theme preference. If the user switches Worka from light mode to dark mode, your pack's UI will update instantly with no extra work required from you. All the theme colors (like blue.500 or gray.200) will adapt automatically.