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

ThemeEditorRootPanel

ThemeEditorRootPanel is used to create inline panels inside the: ThemeEditorDrawer component.

It's a "dummy" component that provides: icon and title props needed by ThemeEditorDrawer.

  • View source

  • Import

    Community Version

    import { ThemeEditorRootPanel } from '@hypertheme-editor/chakra-ui'

    Pro Version PRO

    import { ThemeEditorRootPanel } from '@hypertheme-editor-pro/chakra-ui'

    Usage

    This component works only inside the ThemeEditorDrawer component.

    Simple Panel

    Here's an example of a simple panel added to a custom theme editor:

    Multiple Panels

    Here's an example with two inline panels added to a custom theme editor:

    Props

    NameTypeDefaultShort Description
    titlestringundefinedtitle to render on the accordion header
    iconIconTypeundefinedreact-icon to render on the accordion header

    title

    A string to render inside the ThemeEditorDrawer accordion header.

    This prop accepts a string value.

    This prop is mandatory.

    icon

    A react-icon icon to render inside the ThemeEditorDrawer accordion header.

    This props accepts a IconType value from react-icons package, you can search for icons here.

    This prop is mandatory.


    Hyper kit

    Made with ❤️ in 🇮🇹 | byHyperting

    Table of content

    • Import
    • Community Version
    • Pro Version
    • Usage
    • Simple Panel
    • Multiple Panels
    • Props
    • title
    • icon