HyperTheme

Editor v0.1.5

PricingDocsChangelog

Try it

Getting Started

InstallationPro InstallationPROUpgrade to v0.1

Guides

Create a Custom Editor Panel

Components

ThemeEditorProviderHyperThemeEditorThemeEditorThemeEditorDrawerThemeEditorDrawerHeaderThemeEditorDrawerFooterThemeEditorRootPanelThemeEditorButtonColorModeToggleThemeIcon

Hooks

useThemeEditor

Editors

ColorsFont SizesTypography PROFonts PROLine Heights PROLetter Spacing PROShadows PRORadii PROSpace PRO

ThemeEditorProvider

The ThemeEditorProvider component creates the root object state of HyperTheme and provides functionalities through the useThemeEditor hook (under the hood it uses recoil, check it out here).

It needs to be placed inside the ChakraProvider component and you can have only one ThemeEditorProvider inside your application.

  • View source

    • Usage

    Community Version

    Inside the root component of your application do this:

    import * as React from 'react'
    import { ChakraProvider } from '@chakra-ui/react'
    import theme from './my-theme'
    // 1. import `ThemeEditorProvider` component
    import { ThemeEditorProvider } from '@hypertheme-editor/chakra-ui'
    

    function App() {
      // 2. Add the `ThemeEditorProvider` component just below the `ChakraProvider` components
      return (
        <ChakraProvider theme={theme}>
          <ThemeEditorProvider>
            <Component />
          </ThemeEditorProvider>
        </ChakraProvider>
      )
    }

    PRO Version PRO

    If you have a PRO license, import ThemeEditorProvider from @hypertheme-editor-pro/chakra-ui:

    import * as React from 'react'
    import { ChakraProvider } from '@chakra-ui/react'
    import theme from './my-theme'
    // 1. import `ThemeEditorProvider` component
    import { ThemeEditorProvider } from '@hypertheme-editor-pro/chakra-ui'
    

    function App() {
      // 2. Add the `ThemeEditorProvider` component just below the `ChakraProvider` components
      return (
        <ChakraProvider theme={theme}>
          <ThemeEditorProvider>
            <Component />
          </ThemeEditorProvider>
        </ChakraProvider>
      )
    }

    Prev

    Create a Custom Editor Panel

    Next

    HyperThemeEditor Component

    Hyper kit

    Made with ❤️ in 🇮🇹 | byHyperting