https://github.com/Hyperting/hypertheme-editor
Most advanced visual theme editor for Chakra-UI
https://github.com/Hyperting/hypertheme-editor
Last synced: 2 months ago
JSON representation
Most advanced visual theme editor for Chakra-UI
- Host: GitHub
- URL: https://github.com/Hyperting/hypertheme-editor
- Owner: Hyperting
- License: mit
- Created: 2021-09-09T15:28:06.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-03T16:02:15.000Z (9 months ago)
- Last Synced: 2024-10-28T22:36:19.960Z (7 months ago)
- Language: TypeScript
- Homepage: https://hyperthe.me
- Size: 9.85 MB
- Stars: 154
- Watchers: 3
- Forks: 17
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome - Hyperting/hypertheme-editor - Most advanced visual theme editor for Chakra-UI (TypeScript)
README
# HyperTheme Editor
Powerful visual theme editor for your next Chakra UI project.
## Features
- Chakra-UI Theme Foundation Color Editor
- Chakra-UI Theme Foundation Font Sizes Editor
- Undo/Redo
- Customizable Editor Drawer
- Custom Panel Editors
- Unlimited exports
## PRO Version
HyperTheme Editor has also a PRO version with more features:
- Font Family Editor from Google Fonts
- Line Heights Editor
- Letter Spacing Editor
- Shadows Editor
- Radii Editor
- Spacing Editor
Visit [`hyperthe.me`](https://hyperthe.me) for more info.
## Documentation
Documentation and guides can be found [here](https://hyperthe.me/documentation).
## Getting Started
### 1. Installation
Install with NPM:
```bash
npm i @hypertheme-editor/chakra-ui
```
or with Yarn:
```bash
yarn add @hypertheme-editor/chakra-ui
```
### 2. Setup
Installation is super easy and fast:
- Add the component `` just below the `` component.
- Add the component ``.
Here's an example:
```jsx
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
import { ThemeEditorProvider, HyperThemeEditor } from '@hypertheme-editor/chakra-ui'
import theme from './my-theme'
function App() {
return (
)
}
```
### 3. Next Steps
Congratulations! You have a working **theme editor** on your application.
HyperTheme Editor comes also with all the building blocks necessary to create custom theme editor that works with Chakra UI.
To learn more read the [documentation](https://hyperthe.me/documentation).
## Contributing
If you want to contribute to HyperTheme Editor, make sure to read the [contribution guide](CONTRIBUTING.md) first.
## License
HyperTheme Editor is licensed under the [MIT License](https://github.com/Hyperting/hypertheme-editor/blob/main/LICENSE) by [Hyperting S.r.l.](https://hyperting.com).