Other libs to check out

[kylpo]

mui/material-ui#38137

---

Box | Kuma UI

const ThisIsTheButton = () => {
  return (
    <Box
      as="button"
      p={8}
      bg="black"
      color="white"
      borderRadius={4}
      _hover={{
        opacity: 0.8,
      }}
    >
      Hello world
    </Box>
  );
};

---

Styled System

const Button = styled('button')(
  {
    appearance: 'none',
    fontFamily: 'inherit',
  },
  variant({
    variants: {
      primary: {
        color: 'white',
        bg: 'primary',
      },
      secondary: {
        color: 'white',
        bg: 'secondary',
      },
    }
  })
)

---

NativeBase: Universal Components for React & React Native

<Box
  shadow="2"
  rounded="lg"
  w={{ base: "64", md: "80", lg: "md" }}
  _light={{ bg: "coolGray.50" }}
  _dark={{ bg: "gray.700" }}
>
  <AspectRatio w="100%" ratio={ratio}>
    <Image source={HeroImg} alt="image base" />
  </AspectRatio>
  <Text bold position="absolute" color="coolGray.50" top="0" m="4">
    NEWS
  </Text>
  <Stack space="2" p="4">
    <Text color="gray.400">August 7, 2023</Text>
    <Heading size={["md", "lg", "md"]} fontWeight="medium">
      The Garden City
    </Heading>
    <Text isTruncated noOfLines={["4", "4", "4"]}>
      Bengaluru (also called Bangalore) is the center of India's
      high-tech industry. It is located in southern India on the Deccan
      Plateau.The city is also known for its parks and nightlife.
      Bangalore is the major center of India's IT industry, popularly
      known as the Silicon Valley of India.
    </Text>
  </Stack>
  <HStack space="3" px="4" pb="4">
    <MoreIcon _light={{ color : "emerald.800" }} _dark={{ color : "emerald.300" }} />
    <Text _light={{ color : "emerald.800" }} _dark={{ color : "emerald.300" }}>
      Find out more
    </Text>
  </HStack>
</Box>

---

Rewind-UI - A fully customizable React-TailwindCSS component library

function App() {
  return (
    <Accordion defaultItem="item-1" bordered={false} shadow="base" shadowColor="gray">
      <Accordion.Item anchor="item-1">
        <Accordion.Header>Header</Accordion.Header>
        <Accordion.Body>Body</Accordion.Body>
      </Accordion.Item>

      <Accordion.Item anchor="item-2">
        <Accordion.Header>Header</Accordion.Header>
        <Accordion.Body>Body</Accordion.Body>
      </Accordion.Item>

      <Accordion.Item anchor="item-3">
        <Accordion.Header>Header</Accordion.Header>
        <Accordion.Body>Body</Accordion.Body>
      </Accordion.Item>
    </Accordion>
  );
}

[kylpo]

StyleX:

• https://github.com/facebook/stylex
• https://www.youtube.com/watch?v=6ZDiGtg1jN4

CSS Hooks:

• https://css-hooks.com
• https://nsaunders.dev/posts/css-madness-to-hooks
• https://twitter.com/markdalgleish/status/1729399475494608923
• https://twitter.com/adamwathan/status/1732209400641724785

[kylpo]

https://github.com/mui/material-ui/tree/master/packages/pigment-css-react