chakra

インストールと導入

Installation – Chakra UI
https://v2.chakra-ui.com/getting-started

上記サイトから下記コードをコピー

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

▽ターミナルで上記コードを実行するとpackage.jsonでインストールされたことが確認できます

  "dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.98",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "framer-motion": "^11.2.10",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },

▽<ChakraProvider></ChakraProvider>で囲います

import { Button, ChakraProvider } from '@chakra-ui/react';

function App() {
  return (
    <div className="App">
      <ChakraProvider>
        <Button>button</Button>
      </ChakraProvider>
    </div>
  );
}

export default App;