How to use @chakra-ui/system - 10 common examples
To help you get started, we’ve selected a few @chakra-ui/system examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
chakra-ui / chakra-ui / packages / hooks / src / useTabbable / examples.tsx View on Github 
import { storiesOf } from "@storybook/react";
import * as React from "react";
import useTabbable from "./useTabbable";
import { createChakra } from "@chakra-ui/system";
const stories = storiesOf("useTabbable", module);
const Button = createChakra("div", { hook: useTabbable });
stories.add("Button", () => (
<>
<button> {
alert("clicked");
}}
onMouseOver={() => {
console.log("over");
}}
onMouseEnter={() => {
console.log("enter");
}}
display="inline-flex"</button>const Submenu2 = forwardRef((props, ref) => {
return (
Open submenu 2
<menu>
<menuitem>Menu 1</menuitem>
<menuitem>Menu 2</menuitem>
</menu>
);
});
const Submenu = forwardRef((props, ref) => {
return (
Open submenu
<menu>
<menuitem> console.log("submenu")}>Submenu 1</menuitem>
<menuitem>
</menuitem></menu>
);
});
function SampleMenu() {
return (import React from "react";
import {
TabsProvider,
useTab,
useTabIndicator,
useTabList,
useTabPanel,
useTabPanels,
} from "./useTabs";
import { createChakra } from "@chakra-ui/system";
const stories = storiesOf("useTabs", module).addDecorator(story => (
{story()}
));
const Tab = createChakra("button", { hook: useTab });
const TabList = createChakra("div", { hook: useTabList });
const TabPanel = createChakra("div", { hook: useTabPanel });
function TabPanels(props: any) {
const tabpanels = useTabPanels(props);
return {tabpanels};
}
function TabIndicator(props: any) {
const styles = useTabIndicator();
return <div style="{{">;
}
stories.add("useTabs", () => (
</div>import {
TabsProvider,
useTab,
useTabIndicator,
useTabList,
useTabPanel,
useTabPanels,
} from "./useTabs";
import { createChakra } from "@chakra-ui/system";
const stories = storiesOf("useTabs", module).addDecorator(story => (
{story()}
));
const Tab = createChakra("button", { hook: useTab });
const TabList = createChakra("div", { hook: useTabList });
const TabPanel = createChakra("div", { hook: useTabPanel });
function TabPanels(props: any) {
const tabpanels = useTabPanels(props);
return {tabpanels};
}
function TabIndicator(props: any) {
const styles = useTabIndicator();
return <div style="{{">;
}
stories.add("useTabs", () => (
Settings</div>import { createChakra } from "@chakra-ui/system";
import { storiesOf } from "@storybook/react";
import React from "react";
import {
Accordion,
AccordionItem,
useAccordionButton,
useAccordionPanel,
} from "./useAccordion";
const stories = storiesOf("useAccordion", module);
const AccordionButton = createChakra("button", {
hook: useAccordionButton,
});
AccordionButton.defaultProps = {
display: "block",
width: "100%",
border: 0,
borderBottom: "1px solid #e2e2e2",
padding: "16px 20px",
fontWeight: 600,
textAlign: "left",
fontSize: "16px",
_expanded: {
bg: "lightgray",
},
};const Menu = createChakra("div", {
hook: useMenu,
});
Menu.defaultProps = {
color: "#212121",
bg: "white",
p: "0.25rem",
rounded: "0.25rem",
border: "1px solid rgba(33, 33, 33, 0.25)",
outline: 0,
width: "240px",
};
const MenuItem = createChakra("button", {
hook: useMenuItem,
});
MenuItem.defaultProps = {
border: 0,
width: "100%",
padding: "0.5em 0.24em",
color: "#212121",
_focus: {
bg: "#006DFF",
color: "white",
},
_expanded: {
bg: "#006DFF",
color: "white",
},import React from "react";
import {
MenuProvider,
useMenu,
useMenuDisclosure,
useMenuItem,
} from "./useMenu";
const stories = storiesOf("useMenu v2", module);
//@ts-ignore
const MenuDisclosure = createChakra("button", {
hook: useMenuDisclosure,
});
const Menu = createChakra("div", {
hook: useMenu,
});
Menu.defaultProps = {
color: "#212121",
bg: "white",
p: "0.25rem",
rounded: "0.25rem",
border: "1px solid rgba(33, 33, 33, 0.25)",
outline: 0,
width: "240px",
};
const MenuItem = createChakra("button", {
hook: useMenuItem,
});AccordionButton.defaultProps = {
display: "block",
width: "100%",
border: 0,
borderBottom: "1px solid #e2e2e2",
padding: "16px 20px",
fontWeight: 600,
textAlign: "left",
fontSize: "16px",
_expanded: {
bg: "lightgray",
},
};
const AccordionPanel = createChakra("div", {
hook: useAccordionPanel,
});
AccordionPanel.defaultProps = {
padding: "16px",
fontFamily: "system-ui",
};
stories.add("default", () => (
Toggle 1
Panel 1import { createChakra, forwardRef } from "@chakra-ui/system";
import { storiesOf } from "@storybook/react";
import React from "react";
import {
MenuProvider,
useMenu,
useMenuDisclosure,
useMenuItem,
} from "./useMenu";
const stories = storiesOf("useMenu v2", module);
//@ts-ignore
const MenuDisclosure = createChakra("button", {
hook: useMenuDisclosure,
});
const Menu = createChakra("div", {
hook: useMenu,
});
Menu.defaultProps = {
color: "#212121",
bg: "white",
p: "0.25rem",
rounded: "0.25rem",
border: "1px solid rgba(33, 33, 33, 0.25)",
outline: 0,
width: "240px",
};TabsProvider,
useTab,
useTabIndicator,
useTabList,
useTabPanel,
useTabPanels,
} from "./useTabs";
import { createChakra } from "@chakra-ui/system";
const stories = storiesOf("useTabs", module).addDecorator(story => (
{story()}
));
const Tab = createChakra("button", { hook: useTab });
const TabList = createChakra("div", { hook: useTabList });
const TabPanel = createChakra("div", { hook: useTabPanel });
function TabPanels(props: any) {
const tabpanels = useTabPanels(props);
return {tabpanels};
}
function TabIndicator(props: any) {
const styles = useTabIndicator();
return <div style="{{">;
}
stories.add("useTabs", () => (
Settings
</div>
