Chakra UI

Chakra UI is a **React component library** with “style props” (e.g., `px`, `bg`, `rounded`).

Install

bash

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

Provider setup

tsx

import { ChakraProvider, extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  config: { initialColorMode: "dark", useSystemColorMode: false },
  colors: { brand: { 500: "#2563eb" } },
});

export function AppProviders({ children }: { children: React.ReactNode }) {
  return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
}

Component example

tsx

import { Button, Card, CardHeader, CardBody, Heading, Text } from "@chakra-ui/react";

export function ExampleCard() {
  return (
    <Card bg="blackAlpha.300" borderWidth="1px" borderColor="whiteAlpha.200">
      <CardHeader><Heading size="md">Server Ready</Heading></CardHeader>
      <CardBody>
        <Text opacity={0.9}>Deploy behind Nginx, add TLS, and monitor.</Text>
        <Button mt={4} colorScheme="blue">Get Started</Button>
      </CardBody>
    </Card>
  );
}