├── .all-contributorsrc ├── .codesandbox └── ci.json ├── .eslintrc ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── stale.yml ├── .gitignore ├── .nowignore ├── .prettierignore ├── .prettierrc ├── .storybook ├── addons.js └── config.js ├── BACKERS.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── ROADMAP.md ├── babel.config.js ├── examples ├── create-react-app │ ├── .gitignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.css │ │ ├── App.test.tsx │ │ ├── App.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ ├── logo.svg │ │ ├── react-app-env.d.ts │ │ └── serviceWorker.ts │ └── tsconfig.json ├── gatsby-starter-chakra-ui │ ├── .eslintrc │ ├── .gitignore │ ├── CHANGELOG.md │ ├── gatsby-config.js │ ├── package.json │ └── src │ │ └── pages │ │ └── index.js └── nextjs │ ├── README.md │ ├── package.json │ └── src │ ├── components │ ├── CTA.js │ ├── Container.js │ ├── DarkModeSwitch.js │ ├── Footer.js │ ├── Hero.js │ └── Main.js │ ├── pages │ ├── _app.js │ └── index.js │ └── theme.js ├── lerna.json ├── logo ├── logo-black.svg ├── logo-black@2x.png ├── logo-colored.svg ├── logo-colored@2x.png ├── logomark-black.svg ├── logomark-black@2x.png ├── logomark-colored.svg └── logomark-colored@2x.png ├── next-env.d.ts ├── now.json ├── package.json ├── packages ├── chakra-ui-docs │ ├── .gitignore │ ├── CHANGELOG.md │ ├── components │ │ ├── CodeBlock.js │ │ ├── ColorPalette.js │ │ ├── DocsHeader.js │ │ ├── Header.js │ │ ├── Logo.js │ │ ├── MDXComponents.js │ │ ├── MobileNav.js │ │ ├── NavLink.js │ │ ├── NoFlashSript.js │ │ ├── Pagination.js │ │ ├── Portal.js │ │ ├── SEO.js │ │ ├── SideNav.js │ │ └── components.js │ ├── next.config.js │ ├── package.json │ ├── pages │ │ ├── Box.mdx │ │ ├── _app.js │ │ ├── _document.js │ │ ├── accordion.mdx │ │ ├── alert.mdx │ │ ├── alertdialog.mdx │ │ ├── aspectratiobox.mdx │ │ ├── avatar.mdx │ │ ├── badge.mdx │ │ ├── breadcrumb.mdx │ │ ├── button.mdx │ │ ├── checkbox.mdx │ │ ├── circularprogress.mdx │ │ ├── closebutton.mdx │ │ ├── code.mdx │ │ ├── collapse.mdx │ │ ├── color-mode.mdx │ │ ├── contributing.mdx │ │ ├── controlbox.mdx │ │ ├── cssreset.mdx │ │ ├── divider.mdx │ │ ├── drawer.mdx │ │ ├── editable.mdx │ │ ├── flex.mdx │ │ ├── formcontrol.mdx │ │ ├── getting-started.mdx │ │ ├── grid.mdx │ │ ├── heading.mdx │ │ ├── icon.mdx │ │ ├── iconbutton.mdx │ │ ├── image.mdx │ │ ├── index.js │ │ ├── input.mdx │ │ ├── keyboardkey.mdx │ │ ├── link.mdx │ │ ├── list.mdx │ │ ├── menu.mdx │ │ ├── modal.mdx │ │ ├── numberinput.mdx │ │ ├── popover.mdx │ │ ├── principles.mdx │ │ ├── progress.mdx │ │ ├── pseudobox.mdx │ │ ├── radio.mdx │ │ ├── recipes.mdx │ │ ├── responsive-styles.mdx │ │ ├── select.mdx │ │ ├── simplegrid.mdx │ │ ├── slider.mdx │ │ ├── spinner.mdx │ │ ├── stack.mdx │ │ ├── stat.mdx │ │ ├── style-props.mdx │ │ ├── switch.mdx │ │ ├── tabs.mdx │ │ ├── tag.mdx │ │ ├── text.mdx │ │ ├── textarea.mdx │ │ ├── theme.mdx │ │ ├── toast.mdx │ │ ├── tooltip.mdx │ │ ├── useClipboard.mdx │ │ ├── useDisclosure.mdx │ │ ├── useTheme.mdx │ │ └── visuallyhidden.mdx │ ├── seo.config.js │ └── static │ │ ├── favicon.ico │ │ └── favicon.png ├── chakra-ui-theme │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ └── themes │ │ ├── airbnb.js │ │ ├── linkedin.js │ │ ├── paystack.js │ │ ├── stripe.js │ │ └── tailwind.js ├── chakra-ui │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── Accordion │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Alert │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── AlertDialog │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── AspectRatioBox │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Avatar │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── AvatarGroup │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Badge │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── Box │ │ │ ├── config.js │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Breadcrumb │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Button │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── ButtonGroup │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── CSSReset │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── preflight.js │ │ ├── Callout │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Checkbox │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── CheckboxGroup │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── CircularProgress │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── CloseButton │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Code │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Collapse │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── ColorModeProvider │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── ControlBox │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Css │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Divider │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Drawer │ │ │ ├── components.js │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Editable │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Flex │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── FormControl │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── FormErrorMessage │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── FormHelperText │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── FormLabel │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Grid │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Heading │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Icon │ │ │ ├── custom.js │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── IconButton │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── IconPaths.js │ │ ├── Image │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Input │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── InputAddon │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── InputElement │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── InputGroup │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Kbd │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Link │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── List │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Menu │ │ │ ├── MenuOption.d.ts │ │ │ ├── MenuOption.js │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── Modal │ │ │ ├── components.js │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── NumberInput │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── Popover │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Popper │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── Portal │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Progress │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── PseudoBox │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Radio │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── RadioButtonGroup │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── RadioGroup │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Select │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── utils.js │ │ ├── SimpleGrid │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── utils.js │ │ ├── Slider │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── Spinner │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Stack │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Stat │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Switch │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Tabs │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── styles.js │ │ ├── Tag │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Text │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Textarea │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── ThemeProvider │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Toast │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Tooltip │ │ │ ├── examples.js │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── Transition │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── VisuallyHidden │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── common-types.d.ts │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── theme │ │ │ ├── colors-utils.js │ │ │ ├── colors.js │ │ │ ├── examples.js │ │ │ ├── icons.d.ts │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ ├── sizes.js │ │ │ ├── theme.js │ │ │ └── typography.js │ │ ├── useClipboard │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── useDisclosure │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ ├── useNumberInput │ │ │ ├── index.d.ts │ │ │ ├── index.js │ │ │ └── utils.js │ │ ├── usePrevious │ │ │ ├── index.d.ts │ │ │ └── index.js │ │ └── utils │ │ │ ├── index.d.ts │ │ │ └── index.js │ ├── tests │ │ ├── .eslintrc │ │ └── index-test.js │ ├── tsconfig.json │ └── tslint.json └── gatsby-plugin-chakra-ui │ ├── .babelrc │ ├── .gitignore │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── index.js │ ├── package.json │ └── src │ ├── gatsby-browser.js │ ├── gatsby-ssr.js │ └── theme.js ├── scripts └── copy-files.js ├── tsconfig.json └── yarn.lock /.codesandbox/ci.json: -------------------------------------------------------------------------------- 1 | { 2 | "buildCommand": "core:build", 3 | "packages": ["packages/chakra-ui"], 4 | "sandboxes": [ 5 | "27i2n" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parserOptions": { 3 | "ecmaVersion": 2018 4 | }, 5 | "extends": [ 6 | "eslint-config-react-app", 7 | "plugin:jsx-a11y/recommended", 8 | "eslint-config-prettier" 9 | ], 10 | "plugins": ["jsx-a11y"], 11 | "rules": { 12 | "no-console": "off" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: segunadebayo 5 | open_collective: chakra-ui 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help make Chakra UI better 4 | title: "[Component] A concise description of bug" 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | 14 | **Expected Behavior** 15 | A clear and concise description of what you expected to happen. 16 | 17 | 18 | **To Reproduce** 19 | - Use this template: 20 | - List the steps to reproduce the behavior: 21 | 1. Go to '...' 22 | 2. Click on '....' 23 | 3. Scroll down to '....' 24 | 4. See error 25 | 26 | **Suggested solution(s)** 27 | 28 | 29 | **Desktop (please complete the following information):** 30 | - OS: [e.g. iOS] 31 | - Browser [e.g. chrome, safari] 32 | - Version [e.g. 22] 33 | 34 | **Additional context** 35 | Add any other context about the problem here. 36 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for a feature or a new component for Chakra UI 4 | title: Request to add [Component] component 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Number of days of inactivity before an issue becomes stale 2 | daysUntilStale: 60 3 | # Number of days of inactivity before a stale issue is closed 4 | daysUntilClose: 14 5 | # Issues with these labels will never be considered stale 6 | exemptLabels: 7 | - regression 8 | - pinned 9 | - security 10 | # Label to use when marking an issue as stale 11 | staleLabel: stale 12 | # Comment to post when marking an issue as stale. Set to `false` to disable 13 | markComment: > 14 | This issue has been automatically marked as stale because it has not had 15 | recent activity. It will be closed if no further activity occurs.Thank you for 16 | your contributions. 17 | # Comment to post when closing a stale issue. Set to `false` to disable 18 | closeComment: false 19 | unmarkComment: false 20 | only: issues 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | lerna-debug.log 3 | npm-debug.log 4 | packages/*/lib 5 | packages/*/.next 6 | storybook-static 7 | packages/*/coverage 8 | packages/*/dist 9 | packages/*/node_modules 10 | npm-debug.log* 11 | packages/*/.env 12 | *.log 13 | yarn.lock 14 | yarn-error.log 15 | packages/*/.rpt2_cache 16 | packages/*/.rts2_cache* 17 | .next 18 | # Local Netlify folder 19 | .netlify -------------------------------------------------------------------------------- /.nowignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | public 3 | out 4 | .next 5 | .env 6 | .cache 7 | yarn-error.log -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | coverage 4 | .next 5 | build 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "bracketSpacing": true, 4 | "jsxBracketSameLine": false, 5 | "jsxSingleQuote": false, 6 | "printWidth": 80, 7 | "proseWrap": "always", 8 | "requirePragma": false, 9 | "semi": true, 10 | "singleQuote": false, 11 | "tabWidth": 2, 12 | "trailingComma": "all", 13 | "useTabs": false 14 | } 15 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import "@storybook/addon-knobs/register"; 2 | import "@storybook/addon-actions/register"; 3 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { addDecorator, configure } from "@storybook/react"; 2 | import React from "react"; 3 | import { CSSReset, ThemeProvider } from "../packages/chakra-ui/src"; 4 | 5 | // function loadStories() { 6 | // require("../stories"); 7 | // } 8 | 9 | const req = require.context("../packages", true, /examples\.(js|mdx)$/); 10 | 11 | function loadStories() { 12 | req.keys().forEach(filename => req(filename)); 13 | } 14 | 15 | const AppProvider = ({ children }) => { 16 | return ( 17 | 18 | 19 | {children} 20 | {/* 21 | 28 | */} 29 | 30 | ); 31 | }; 32 | 33 | addDecorator(story => {story()}); 34 | 35 | configure(loadStories, module); 36 | -------------------------------------------------------------------------------- /BACKERS.md: -------------------------------------------------------------------------------- 1 | # Chakra UI backers 2 | 3 | Chakra UI is licensed as MIT and completely Open Source and free to use. However 4 | the amount of effort needed to maintain and develop new features is not 5 | sustainable without proper financial backing. 6 | 7 | ## How to become a backer or Insider 8 | 9 | ## Chakra Insiders 10 | 11 | You can get regular insider updates and become an Insider from as little as 5 12 | USD / mo by sponsoring the lead maintainer, 13 | [Segun Adebayo via Patreon](https://patreon.com/segunadebayo). You'll get 14 | regular updates with all the news, blogs, content and early access to features. 15 | 16 | [Become a Backer today](https://patreon.com/segunadebayo) 17 | 18 | ## Individual backers (Patreon / GitHub) 19 | 20 | Whatever tier, whether 5 USD or 500 USD, if you're a backer on Patreon, or a 21 | GitHub Sponsor, then please send a PR to have your name listed below: 22 | 23 | - Bolaji Ayodeji 24 | - Olaoluwa Faniyi 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Segun Adebayo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /ROADMAP.md: -------------------------------------------------------------------------------- 1 | Here is a table of components we're looking to add to Chakra and their status. 2 | 3 | ✅ - Released
⚠️ - Released but buggy
🛠 - Planning to Build
❓ - 4 | Might Build? 5 | 6 | ## Layout Primitives 7 | 8 | - Box ✅ 9 | - Flex ✅ 10 | - Grid ✅ 11 | - PseudoBox ✅ 12 | - AspectRatioBox ✅ 13 | 14 | ## Image Elements 15 | 16 | - Avatar ✅ 17 | - AvatarGroup ✅ 18 | - Image ✅ 19 | 20 | ## Informational 21 | 22 | - Badge ✅ 23 | - List ✅ 24 | - Kbd ✅ 25 | - Code ✅ 26 | 27 | ## Navigation Components 28 | 29 | - Accordion ✅ 30 | - Breadcrumb ✅ 31 | - Link ✅ 32 | - Tabs ✅ 33 | 34 | ## Messaging and Alerts 35 | 36 | - Alert ✅ 37 | - AlertDialog ✅ 38 | - Toast ✅ 39 | 40 | ## Overlay Components 41 | 42 | - Popover ⚠️ [Help wanted] 43 | - Modal ✅ 44 | - Drawer ✅ 45 | - Tooltip ✅ 46 | 47 | ## Form Elements 48 | 49 | - Button ✅ 50 | - Input ✅ 51 | - Select ✅ 52 | - Editable ✅ 53 | - Slider ✅ 54 | - Horizontal Slider ✅ 55 | - Vertical Slider 🛠 56 | - Slider (Multi-Thumb) 🛠 57 | - Custom Select 🛠 58 | - Single Select 59 | - Multiselect 60 | - Tags Input 🛠 61 | - ComboBox 🛠 62 | - DatePicker ❓ 63 | - ListBox 🛠 64 | - Radio Button ✅ 65 | - Checkbox ✅ 66 | 67 | ## Others 68 | 69 | - Collapse ✅ 70 | - Tree View 🛠 71 | - Progress Steps 🛠 72 | - Toolbar 🛠 73 | - Table 🛠 74 | 75 | Feel free to pick any of these components and work on them but please create an 76 | issue first to discuss your API, and how you intend to build the component. 77 | 78 | Kindly Go over the design principles in the docs. Happy building and thank you 79 | so much for contributing. 80 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | const BABEL_ENV = process.env.BABEL_ENV; 2 | const isBuilding = BABEL_ENV !== undefined && BABEL_ENV !== "cjs"; 3 | 4 | const presets = [ 5 | [ 6 | "@babel/preset-env", 7 | { 8 | loose: true, 9 | modules: isBuilding ? false : "commonjs", 10 | }, 11 | ], 12 | "@babel/preset-react", 13 | ]; 14 | 15 | const plugins = [ 16 | "@babel/plugin-proposal-object-rest-spread", 17 | "@babel/plugin-transform-runtime", 18 | [ 19 | "babel-plugin-transform-react-remove-prop-types", 20 | { 21 | mode: "unsafe-wrap", 22 | }, 23 | ], 24 | ]; 25 | 26 | module.exports = { 27 | presets: presets, 28 | plugins: plugins, 29 | }; 30 | -------------------------------------------------------------------------------- /examples/create-react-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /examples/create-react-app/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. See 4 | [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## 0.1.1 (2019-12-13) 7 | 8 | ### Bug Fixes 9 | 10 | - **types:** update types to allow for migration to TS 73bbe73 11 | - improve NumberInput API bca497e 12 | -------------------------------------------------------------------------------- /examples/create-react-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-react-app", 3 | "version": "0.1.1", 4 | "private": true, 5 | "dependencies": { 6 | "@types/jest": "24.0.18", 7 | "@types/node": "12.7.11", 8 | "@types/react": "16.9.5", 9 | "@types/react-dom": "16.9.1", 10 | "react": "^16.10.2", 11 | "react-dom": "^16.10.2", 12 | "react-scripts": "3.2.0", 13 | "typescript": "3.6.3" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": "react-app" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /examples/create-react-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gopinav/chakra-ui/06b65dd4117d8c1207d3ed80f4932d8c2b0d7dee/examples/create-react-app/public/favicon.ico -------------------------------------------------------------------------------- /examples/create-react-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gopinav/chakra-ui/06b65dd4117d8c1207d3ed80f4932d8c2b0d7dee/examples/create-react-app/public/logo192.png -------------------------------------------------------------------------------- /examples/create-react-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gopinav/chakra-ui/06b65dd4117d8c1207d3ed80f4932d8c2b0d7dee/examples/create-react-app/public/logo512.png -------------------------------------------------------------------------------- /examples/create-react-app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /examples/create-react-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /examples/create-react-app/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | } 8 | 9 | .App-header { 10 | background-color: #282c34; 11 | min-height: 100vh; 12 | display: flex; 13 | flex-direction: column; 14 | align-items: center; 15 | justify-content: center; 16 | font-size: calc(10px + 2vmin); 17 | color: white; 18 | } 19 | 20 | .App-link { 21 | color: #09d3ac; 22 | } 23 | -------------------------------------------------------------------------------- /examples/create-react-app/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./App"; 4 | 5 | it("renders without crashing", () => { 6 | const div = document.createElement("div"); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/create-react-app/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import logo from "./logo.svg"; 3 | import "./App.css"; 4 | import { ThemeProvider, Box, Checkbox } from "@chakra-ui/core"; 5 | import styled from "@emotion/styled"; 6 | 7 | interface Props { 8 | as?: string; 9 | } 10 | 11 | const App: React.FC = () => { 12 | return ( 13 | 14 |
15 | {/* */} 16 |
17 | logo 18 |

19 | Edit src/App.tsx and save to reload. 20 |

21 | 22 | 28 | Learn React 29 | 30 |
31 |
32 | 33 | ); 34 | }; 35 | 36 | export default App; 37 | -------------------------------------------------------------------------------- /examples/create-react-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /examples/create-react-app/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import * as serviceWorker from "./serviceWorker"; 6 | 7 | ReactDOM.render(, document.getElementById("root")); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /examples/create-react-app/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/create-react-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react" 17 | }, 18 | "include": ["src"] 19 | } 20 | -------------------------------------------------------------------------------- /examples/gatsby-starter-chakra-ui/.eslintrc: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /examples/gatsby-starter-chakra-ui/.gitignore: -------------------------------------------------------------------------------- 1 | .cache 2 | public -------------------------------------------------------------------------------- /examples/gatsby-starter-chakra-ui/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to this project will be documented in this file. See 4 | [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | ## [0.0.5](/compare/gatsby-starter-chakra-ui@0.0.4...gatsby-starter-chakra-ui@0.0.5) (2019-12-25) 7 | 8 | **Note:** Version bump only for package gatsby-starter-chakra-ui 9 | 10 | # Change Log 11 | 12 | All notable changes to this project will be documented in this file. See 13 | [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 14 | 15 | ## [0.0.4](/compare/gatsby-starter-chakra-ui@0.0.3...gatsby-starter-chakra-ui@0.0.4) (2019-12-13) 16 | 17 | **Note:** Version bump only for package gatsby-starter-chakra-ui 18 | 19 | # Change Log 20 | 21 | All notable changes to this project will be documented in this file. See 22 | [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 23 | 24 | ## [0.0.3](/compare/gatsby-starter-chakra-ui@0.0.2...gatsby-starter-chakra-ui@0.0.3) (2019-12-03) 25 | 26 | **Note:** Version bump only for package gatsby-starter-chakra-ui 27 | -------------------------------------------------------------------------------- /examples/gatsby-starter-chakra-ui/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | { 4 | resolve: "gatsby-plugin-chakra-ui", 5 | options: { 6 | isResettingCSS: true, // optional, default to true 7 | isUsingColorMode: true, // optional, default to true 8 | }, 9 | }, 10 | ], 11 | }; 12 | -------------------------------------------------------------------------------- /examples/gatsby-starter-chakra-ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-starter-chakra-ui", 3 | "private": true, 4 | "version": "0.0.5", 5 | "scripts": { 6 | "start": "gatsby develop", 7 | "build": "gatsby build" 8 | }, 9 | "dependencies": { 10 | "@chakra-ui/core": "^0.5.2", 11 | "@emotion/core": "^10.0.21", 12 | "@emotion/styled": "^10.0.17", 13 | "emotion-theming": "^10.0.19", 14 | "gatsby": "2.15.0", 15 | "gatsby-plugin-chakra-ui": "^0.1.2", 16 | "react": "link:../../node_modules/react", 17 | "react-dom": "link:../../node_modules/react-dom" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/gatsby-starter-chakra-ui/src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Box, Button, Heading, Text, useColorMode } from "@chakra-ui/core"; 3 | 4 | const IndexPage = () => { 5 | const { colorMode, toggleColorMode } = useColorMode(); 6 | 7 | return ( 8 | 9 | 10 | Hello World 11 | 12 | Color mode: {colorMode} 13 | 16 | 17 | ); 18 | }; 19 | 20 | export default IndexPage; 21 | -------------------------------------------------------------------------------- /examples/nextjs/README.md: -------------------------------------------------------------------------------- 1 | # Example app with [chakra-ui](https://github.com/chakra-ui/chakra-ui) 2 | 3 | ## Deploy your own 4 | 5 | Deploy the example using [ZEIT Now](https://zeit.co/now): 6 | 7 | [![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-chakra-ui) 8 | 9 | ## How to use 10 | 11 | ### Using `create-next-app` 12 | 13 | Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example: 14 | 15 | ```bash 16 | npx create-next-app --example with-chakra-ui with-chakra-ui-app 17 | # or 18 | yarn create next-app --example with-chakra-ui with-chakra-ui-app 19 | ``` 20 | 21 | ### Download manually 22 | 23 | Download the example: 24 | 25 | ```bash 26 | curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-chakra-ui 27 | cd with-chakra-ui 28 | ``` 29 | 30 | Install it and run: 31 | 32 | ```bash 33 | npm install 34 | npm run dev 35 | # or 36 | yarn 37 | yarn dev 38 | ``` 39 | 40 | Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): 41 | 42 | ```bash 43 | now 44 | ``` 45 | 46 | ## The idea behind the example 47 | 48 | This example features how to use [chakra-ui](https://github.com/chakra-ui/chakra-ui) as the component library within a Next.js app. 49 | 50 | We are connecting the Next.js `_app.js` with `chakra-ui`'s Theme and ColorMode containers so the pages can have app-wide dark/light mode. We are also creating some components which shows the usage of `chakra-ui`'s style props. 51 | -------------------------------------------------------------------------------- /examples/nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "with-chakra-ui", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start" 9 | }, 10 | "dependencies": { 11 | "@chakra-ui/core": "^0.5.2", 12 | "@emotion/core": "^10.0.27", 13 | "@emotion/styled": "^10.0.27", 14 | "emotion-theming": "^10.0.27", 15 | "next": "^9.1.7", 16 | "react": "^16.12.0", 17 | "react-dom": "^16.12.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/nextjs/src/components/CTA.js: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import { Link as ChakraLink, Button } from "@chakra-ui/core"; 3 | 4 | import { Container } from "./Container"; 5 | 6 | export const CTA = () => ( 7 | 15 | 16 | 17 | 20 | 21 | 22 | 26 | 32 | 35 | 36 | 37 | 38 | ); 39 | -------------------------------------------------------------------------------- /examples/nextjs/src/components/Container.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Flex, useColorMode } from "@chakra-ui/core"; 3 | 4 | export const Container = props => { 5 | const { colorMode } = useColorMode(); 6 | 7 | const bgColor = { light: "gray.50", dark: "gray.900" }; 8 | 9 | const color = { light: "black", dark: "white" }; 10 | return ( 11 | 19 | ); 20 | }; 21 | -------------------------------------------------------------------------------- /examples/nextjs/src/components/DarkModeSwitch.js: -------------------------------------------------------------------------------- 1 | import { useColorMode, Switch } from "@chakra-ui/core"; 2 | 3 | export const DarkModeSwitch = () => { 4 | const { colorMode, toggleColorMode } = useColorMode(); 5 | const isDark = colorMode === "dark"; 6 | return ( 7 | 15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /examples/nextjs/src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import { Flex } from "@chakra-ui/core"; 2 | 3 | export const Footer = props => ; 4 | -------------------------------------------------------------------------------- /examples/nextjs/src/components/Hero.js: -------------------------------------------------------------------------------- 1 | import { Flex, Heading } from "@chakra-ui/core"; 2 | 3 | export const Hero = ({ title }) => ( 4 | 5 | {title} 6 | 7 | ); 8 | 9 | Hero.defaultProps = { 10 | title: "with-chakra-ui" 11 | }; 12 | -------------------------------------------------------------------------------- /examples/nextjs/src/components/Main.js: -------------------------------------------------------------------------------- 1 | import { Stack } from "@chakra-ui/core"; 2 | 3 | export const Main = props => ( 4 | 13 | ); 14 | -------------------------------------------------------------------------------- /examples/nextjs/src/pages/_app.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import NextApp from "next/app"; 3 | import { ThemeProvider, CSSReset, ColorModeProvider } from "@chakra-ui/core"; 4 | 5 | import theme from "../theme"; 6 | 7 | class App extends NextApp { 8 | render() { 9 | const { Component } = this.props; 10 | return ( 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | } 19 | } 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /examples/nextjs/src/theme.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { theme as chakraTheme } from "@chakra-ui/core"; 3 | 4 | const fonts = { ...chakraTheme.fonts, mono: `'Menlo', monospace` }; 5 | 6 | const breakpoints = ["40em", "52em", "64em"]; 7 | 8 | const theme = { 9 | ...chakraTheme, 10 | colors: { 11 | ...chakraTheme.colors, 12 | black: "#16161D" 13 | }, 14 | fonts, 15 | breakpoints, 16 | icons: { 17 | ...chakraTheme.icons, 18 | logo: { 19 | path: ( 20 | 27 | 28 | 32 | 33 | ), 34 | viewBox: "0 0 3000 3163" 35 | } 36 | } 37 | }; 38 | 39 | export default theme; 40 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": ["packages/*", "examples/*"], 3 | "version": "independent", 4 | "npmClient": "yarn", 5 | "useWorkspaces": true, 6 | "registry": "https://registry.npmjs.org/", 7 | "command": { 8 | "publish": { 9 | "conventionalCommits": true, 10 | "message": "chore(release): publish" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /logo/logo-black@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gopinav/chakra-ui/06b65dd4117d8c1207d3ed80f4932d8c2b0d7dee/logo/logo-black@2x.png -------------------------------------------------------------------------------- /logo/logo-colored@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gopinav/chakra-ui/06b65dd4117d8c1207d3ed80f4932d8c2b0d7dee/logo/logo-colored@2x.png -------------------------------------------------------------------------------- /logo/logomark-black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /logo/logomark-black@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gopinav/chakra-ui/06b65dd4117d8c1207d3ed80f4932d8c2b0d7dee/logo/logomark-black@2x.png -------------------------------------------------------------------------------- /logo/logomark-colored.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /logo/logomark-colored@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gopinav/chakra-ui/06b65dd4117d8c1207d3ed80f4932d8c2b0d7dee/logo/logomark-colored@2x.png -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /now.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2, 3 | "builds": [ 4 | { 5 | "src": "packages/chakra-ui-docs/package.json", 6 | "use": "@now/next@canary" 7 | } 8 | ], 9 | "name": "chakra-ui", 10 | "alias": "chakra-ui.com", 11 | "routes": [ 12 | { 13 | "src": "^(.*)$", 14 | "dest": "packages/chakra-ui-docs$1" 15 | }, 16 | { 17 | "src": "www.chakra-ui.com/*", 18 | "status": 301, 19 | "headers": { "Location": "https://chakra-ui.com/$1" } 20 | } 21 | ], 22 | "scope": "chakra-ui" 23 | } 24 | -------------------------------------------------------------------------------- /packages/chakra-ui-docs/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | .env* 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | -------------------------------------------------------------------------------- /packages/chakra-ui-docs/components/ColorPalette.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from "@emotion/core"; 3 | import { Box, Flex, Grid, useTheme } from "@chakra-ui/core"; 4 | 5 | export const ColorPalette = ({ color, name, ...props }) => { 6 | const theme = useTheme(); 7 | let colorCode = color; 8 | const [shade, hue] = color.split("."); 9 | 10 | if (shade && hue) { 11 | colorCode = theme.colors[shade][hue]; 12 | } 13 | 14 | if (color in theme.colors && typeof theme.colors[color] === "string") { 15 | colorCode = theme.colors[color]; 16 | } 17 | 18 | return ( 19 | 20 | 21 | 22 | 23 | {name} 24 | 25 | {colorCode} 26 | 27 | 28 | ); 29 | }; 30 | 31 | export const ColorPalettes = ({ color }) => { 32 | const theme = useTheme(); 33 | const keys = Object.keys(theme.colors[color]); 34 | return keys.map(item => ( 35 | 36 | )); 37 | }; 38 | 39 | export const ColorWrapper = props => ( 40 | 46 | ); 47 | -------------------------------------------------------------------------------- /packages/chakra-ui-docs/components/MobileNav.js: -------------------------------------------------------------------------------- 1 | import { 2 | Drawer, 3 | DrawerBody, 4 | IconButton, 5 | useDisclosure, 6 | DrawerOverlay, 7 | DrawerContent, 8 | } from "@chakra-ui/core"; 9 | import React, { useEffect } from "react"; 10 | import { MdDehaze } from "react-icons/md"; 11 | import { SideNavContent } from "./SideNav"; 12 | import { useRouter } from "next/router"; 13 | 14 | const useRouteChanged = callback => { 15 | const router = useRouter(); 16 | useEffect(() => { 17 | const handleRouteChange = url => { 18 | callback(); 19 | console.log("App is changing to: ", url); 20 | }; 21 | 22 | router.events.on("routeChangeComplete", handleRouteChange); 23 | 24 | return () => { 25 | router.events.off("routeChangeComplete", handleRouteChange); 26 | }; 27 | }, [router.events, callback]); 28 | }; 29 | 30 | const MobileNav = () => { 31 | const { isOpen, onToggle, onClose } = useDisclosure(); 32 | useRouteChanged(onClose); 33 | 34 | return ( 35 | <> 36 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | ); 54 | }; 55 | 56 | export default MobileNav; 57 | -------------------------------------------------------------------------------- /packages/chakra-ui-docs/components/NoFlashSript.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const NoFlashSript = () => ( 4 |