flowbite-react

import { useState } from 'react'; import { Button, Modal, Flowbite } from 'flowbite-react'; import type { CustomFlowbiteTheme } from 'flowbite-react'; // Custom theme example for demonstration const customTheme: CustomFlowbiteTheme = { button: { base: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800' }, modal: { content: { base: 'relative h-full w-full p-4 md:h-auto' } } }; function App() { const [openModal, setOpenModal] = useState(false); return ( <Flowbite theme={{ theme: customTheme }}> <div className="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white"> <h1 className="text-3xl font-bold mb-4">Welcome to Flowbite React!</h1> <Button onClick={() => setOpenModal(true)}>Show Modal</Button> <Modal show={openModal} onClose={() => setOpenModal(false)} popup> <Modal.Header>Terms of Service</Modal.Header> <Modal.Body> <div className="space-y-6"> <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400"> With less than a month to go before the European Union enacts new consumer privacy laws, companies around the world are scrambling to update their data governance policies. </p> <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400"> The European Union’s General Data Protection Regulation (GDPR) goes into effect on May 25, 2018, and is meant to ensure a common set of data rights in the European Union. </p> </div> </Modal.Body> <Modal.Footer> <Button onClick={() => setOpenModal(false)}>I accept</Button> <Button color="gray" onClick={() => setOpenModal(false)}> Decline </Button> </Modal.Footer> </Modal> </div> </Flowbite> ); } export default App;