Components
Brand Kit Side Panel
Lean how to install and customize the Brand Kit side panel
The Brand Kit side panel is a tool that allows you to manage your brand kit. It includes a color palette, typography, and assets. We recommend to read the Overview page to understand how to use the Brand Kit side panel.
Installation
npx shadcn@latest add http://registry.polotno.com:/r/brand-kit.json --path ./src/components/side-panel/brand-kit/After installatin you will see a new files in /src/components/side-panel/brand-kit/
You can change setup location as you want.
Usage
// make sure to change the path to the correct location
import { BrandKitSection } from './components/side-panel/brand-kit/brand-kit-panel';
import { SidePanel, DEFAULT_SECTIONS } from 'polotno/side-panel';
const sections = [...DEFAULT_SECTIONS, BrandKitSection];
// in sidepanel render:
<SidePanel sections={sections} />Demo
/App.js
import React from 'react';
import { PolotnoContainer, SidePanelWrap, WorkspaceWrap } from 'polotno';
import { Workspace } from 'polotno/canvas/workspace';
import { SidePanel, DEFAULT_SECTIONS } from 'polotno/side-panel';
import { Toolbar } from 'polotno/toolbar/toolbar';
import { ZoomButtons } from 'polotno/toolbar/zoom-buttons';
import { createStore } from 'polotno/model/store';
import { BrandKitSection } from './components/side-panel/brand-kit/brand-kit-panel';
import '@blueprintjs/core/lib/css/blueprint.css';
const store = createStore({
key: 'nFA5H9elEytDyPyvKL7T',
});
// Add a default template
store.addPage();
const sections = [...DEFAULT_SECTIONS, BrandKitSection];
export default function App() {
return (
<PolotnoContainer style={{ width: '100vw', height: '100vh' }}>
<SidePanelWrap>
<SidePanel store={store} sections={sections} defaultSection="brand-kit" />
</SidePanelWrap>
<WorkspaceWrap>
<Toolbar store={store} downloadButtonEnabled />
<Workspace store={store} />
<ZoomButtons store={store} />
</WorkspaceWrap>
</PolotnoContainer>
);
}