HyperTheme

Editor v0.1

DocsChangelog

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>
    )
    }

    Hyper kit

    Made with ❤️ in 🇮🇹 | byHyperting

    Table of content

    • Usage
    • Community Version
    • PRO Version