An Interest In:
Web News this Week
- March 22, 2024
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
Some of Our Sources
- Techcrunch
- Technology Review
- Smashing Magazine
- Six Revisions
- Vandelay Design
- Creative Curio
- Fudge Graphics
- Web Design Ledger
- Spyre Studios
- Design Modo
Help Webnuz
Referal links:
March 29, 2022 02:38 pm GMT
Original Link: https://dev.to/blindbat/why-chakra-ui-is-your-secret-lover-stop-denying-it-5b3f
Why Chakra-UI is your secret lover... Stop denying it
Chakra-UI is a modern component library for react created by Segun adebayo. It comes with accessible, reusable, and composable React components that you need to build front-end applications.
Chakra-UI uses Emotion and Styled System. Style systems are great kinds of infrastructure that can be used to build a UI component library. They make so many things much easier.
A great note is that Chakra-UI is typescript friendly and ready for any react app.
CREATE-REACT-APP EXAMPLE
import React from 'react';import { Button} from '@chakra-ui/react';import customTheme from "./customTheme";const App = () => { return ( <Button colorScheme="facebook" leftIcon={<FaFacebook />}> Facebook </Button> );}TYPESCRIPT EXAMPLE
import React from 'react';import { Box } from 'react';type props = { message: string;};const flexSettings = { flex: "1", minW: "300px", textAlign: "center", color: "white", mx: "6", mb: "6"} as const; const Message = ({message}: props) => { return ( <Box {...flexSettings}> {message} </Box> )}STYLED-COMPONENT EXAMPLE USING CHAKRA-UI
import {chakra} from '@chakra-ui/react';const Card = chakra("div", { baseStyle: { h: '300px', w: '300px', rounded: "sm", shadow: "lg", }})...<Card> hello there</Card>Original Link: https://dev.to/blindbat/why-chakra-ui-is-your-secret-lover-stop-denying-it-5b3f
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To