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

ThemeIcon


ThemeIcon is a dynamic icon that shows four colors of the current theme in four different circles.

It's the component used by ThemeEditorButton.

  • View source

  • Import

    Community Version

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

    Pro Version PRO

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

    Usage

    Basic Usage

    With Styled Props

    Props

    NameTypeDefaultShort Description
    size'sm' | 'md' | 'lg''md'Change size of the button

    This component accepts also SimpleGridProps from the Chakra UI SimpleGrid component, read more here.

    size

    Change the size of the button.

    Currently it accepts 'sm' | 'md' | 'lg' value.

    Here's an example showing the different sizes:


    Hyper kit

    Made with ❤️ in 🇮🇹 | byHyperting

    Table of content

    • Import
    • Community Version
    • Pro Version
    • Usage
    • Basic Usage
    • With Styled Props
    • Props
    • size