import { KitchenProvider, Badge, Button, Container, Image, Text } from "@tonightpass/kitchen";

import "@tonightpass/kitchen/fonts.css";

export default function App() {
  return (
    <KitchenProvider>
      <Container h={"100vh"} align={"center"} justify={"center"}>
        <Container maxW={245}>
          <Container pos={"relative"}>
            <Image
              src={
                "https://unsplash.com/photos/RUvW1KGD9a4/download?ixid=MnwxMjA3fDB8MXxzZWFyY2h8MTB8fGNoYW1icmV8ZnJ8MHx8fHwxNjgwNDcwNjM2&w=640"
              }
              br={"square"}
              alt={"Example"}
              w={"100%"}
            />
            <Badge pos={"absolute"} t={"small"} l={"small"}>
              {"Superhost"}
            </Badge>
          </Container>
          <Container mt={"small"} align={"center"} justify={"space-between"} row>
            <Text weight={"bold"}>Apartment in Paris</Text>
            <Text span>{" "}
              <Text weight={"bold"} span>
                4.9
              </Text>{" "}
              (20)
            </Text>
          </Container>
          <Container mt={"tiny"}>
            <Text color={"lighter"}>Large 2 rooms flat with a terrace</Text>
            <Text color={"lighter"}>1 king bed</Text>
            <Text color={"lighter"}>Aug 19 - 26</Text>
          </Container>
          <Text color={"lighter"} mt={"tiny"}>
            <Text color={"lighter"} decoration={"line-through"} span>
              $114
            </Text>{" "}
            <Text color={"lightest"} weight={"bold"} span>
              $120
            </Text>{" "}
            <Text color={"lightest"} span>
              {"night ·"}
            </Text>{" "}
            $735 total
          </Text>
          <Container>
            <Button mt={"small"}>Book now</Button>
          </Container>
        </Container>
      </Container>
    </KitchenProvider>
  );
}

Trusted by teams around the world

All features Kitchen contains

Discover all of them. Say bye to wasted time and hello to fresh design.

Accessible

Kitchen strictly follows WAI-ARIA standards for all components.

Responsive support

Build simple web apps with our simple responsive system.

Themeable

Customize any part of our components to match your design needs.

All platform support

Whether you use React, React Native or a framework react, Kitchen is compatible with all platforms.

Active Community

We are a team of active maintainers ready to help you whenever you need, and using it for our own products.

Reusable hooks

Lots of useful hooks to use in your applications.

Developer experience

Guaranteed to boost your productivity when building your mobile app or website.

Light & Dark support

Kitchen strictly follows WAI-ARIA standards for all components.

Stylable

Easy to redesign with your standard thanks to styled components already implemented.