material-you-react/app/page.tsx

import {Fragment} from "react";
import Buttons from "./components/buttons"
import Switches from "./components/switches";
import Checkboxes from "./components/checkboxes";
import Radios from "./components/radios";
import Fabs from "./components/fabs";
import IconButtons from "./components/icon-buttons";
import {TextFields} from "./components/text-fields";

export default function Page() {
    return(
        <Fragment>
            <div style={{
                display: "flex",
                flexDirection:"column",
                justifyContent: "center",
                alignItems: "center",
                width: "100%",
                gap: "0em"
            }}>
                <h1>Google Material You UI kit</h1>
                <div style={{
                        display: "flex",
                        flexDirection:"column",
                        gap:"20px"
                }}>
                    <div style={{
                        display: "flex",
                        flexDirection:"row",
                        gap:"20px"
                    }}>
                        <div style={{
                            display: "flex",
                            flexDirection:"column",
                            gap:"20px",
                        }}>
                            <Buttons/>
                            <IconButtons/>
                        </div>
                        <Switches/>
                        <Checkboxes/>
                        <Radios/>
                        <Fabs/>
                    </div>
                    <div>
                        <TextFields/>
                    </div>
                </div>
            </div>
        </Fragment>
    )
}