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.

github chakra-ui / chakra-ui / packages / hooks / src / useTabbable / examples.tsx View on Github external
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={() =&gt; {
        console.log("over");
      }}
      onMouseEnter={() =&gt; {
        console.log("enter");
      }}
      display="inline-flex"</button>
github chakra-ui / chakra-ui / packages / hooks / src / useMenu-v2 / examples.tsx View on Github external
const Submenu2 = forwardRef((props, ref) =&gt; {
  return (
    
      
        Open submenu 2
      
      <menu>
        <menuitem>Menu 1</menuitem>
        <menuitem>Menu 2</menuitem>
      </menu>
    
  );
});

const Submenu = forwardRef((props, ref) =&gt; {
  return (
    
      
        Open submenu
      
      <menu>
        <menuitem> console.log("submenu")}&gt;Submenu 1</menuitem>
        <menuitem>
      </menuitem></menu>
    
  );
});

function SampleMenu() {
  return (
github chakra-ui / chakra-ui / packages / chakra-ui-hooks / src / useTabs / examples.tsx View on Github external
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 =&gt; (
  {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", () =&gt; (
  
    </div>
github chakra-ui / chakra-ui / packages / chakra-ui-hooks / src / useTabs / examples.tsx View on Github external
import {
  TabsProvider,
  useTab,
  useTabIndicator,
  useTabList,
  useTabPanel,
  useTabPanels,
} from "./useTabs";
import { createChakra } from "@chakra-ui/system";

const stories = storiesOf("useTabs", module).addDecorator(story =&gt; (
  {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", () =&gt; (
  
    
      Settings</div>
github chakra-ui / chakra-ui / packages / hooks / src / useAccordion / examples.tsx View on Github external
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",
  },
};
github chakra-ui / chakra-ui / packages / hooks / src / useMenu-v2 / examples.tsx View on Github external
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",
  },
github chakra-ui / chakra-ui / packages / hooks / src / useMenu-v2 / examples.tsx View on Github external
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,
});
github chakra-ui / chakra-ui / packages / hooks / src / useAccordion / examples.tsx View on Github external
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", () =&gt; (
  
    
      Toggle 1
      Panel 1
github chakra-ui / chakra-ui / packages / hooks / src / useMenu-v2 / examples.tsx View on Github external
import { 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",
};
github chakra-ui / chakra-ui / packages / chakra-ui-hooks / src / useTabs / examples.tsx View on Github external
TabsProvider,
  useTab,
  useTabIndicator,
  useTabList,
  useTabPanel,
  useTabPanels,
} from "./useTabs";
import { createChakra } from "@chakra-ui/system";

const stories = storiesOf("useTabs", module).addDecorator(story =&gt; (
  {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", () =&gt; (
  
    
      Settings
      </div>