Other libs to check out

kylpo commented 1 year ago

https://github.com/mui/material-ui/issues/38137

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 commented 10 months ago

StyleX:

CSS Hooks:

kylpo commented 7 months ago

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

Chronstruct / primitives

Other libs to check out #123