Workspace brandingPro

The workspace's name, logo, cover and colour, previewed live in the sidebar, the sign-in page, emails and invoices.

When to use

A workspace's brand in one place: its name, a square logo and a wide cover (each cropped as it's picked) and its colour, previewed in the sidebar, the sign-in page, emails and invoices as you edit.
White-label and multi-tenant products, where each customer's team sees its own brand.

When not to use

A person's profile: Profile settings.
The whole theme (fonts, radius, every colour): the theme customizer is made for that.

Usage

Workspace branding with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1"use client"
2
3import { WorkspaceBranding } from "@/components/dashral/blocks/workspace-branding"
4
5export default function Branding() {
6  return (
7    <WorkspaceBranding
8      defaultValue={{ name: "Northbeam", logo: null, cover: null, color: "#0d9488" }}
9      surfaces={["sidebar", "sign-in", "email"]}
10      onSave={async (brand) => {
11        // brand.logo and brand.cover are Files when they're new, null when removed, the URLs when unchanged.
12        console.log("save", brand)
13      }}
14    />
15  )
16}

API reference

WorkspaceBranding

A workspace's brand in one place: the name, a square logo and a wide cover (each cropped as it's picked) and the brand colour, beside the four places they show (the sidebar, the sign-in page, emails and invoices), all changing as you edit. A colour too light to read on white says so. Save sends the brand to onSave: a logo or cover is a File when it's new, null when it was removed, and the URL you gave when it's unchanged. A handler that throws keeps the changes and says why.

Prop	Type	Default
`defaultValue`	`WorkspaceBrand` The brand as it's saved now.	`sample`
`onSave`	`(brand: WorkspaceBrand) => Promise<void> \| void` Saves the brand; throw an Error to keep the changes and show its message.	—
`swatches`	`string[]` Colours to pick in one click.	`sample`
`surfaces`	`BrandSurface[]` The previews, in order.	`sample`
`maxSize`	`number` Largest picture someone can pick for the logo or cover, in bytes, before it's cropped.	`10 * 1024 * 1024`
`title`	`string`	`"Branding"`
`description`	`string`	`sample`

BrandPreview

One place the brand shows, drawn small: the app's sidebar, the sign-in page, an email or an invoice. It takes the brand as it is (Files included), so it follows every change as it happens.

Prop	Type	Default
`brand`	`WorkspaceBrand` Required.	—
`surface`	`BrandSurface` Required.	—
`className`	`string`	—

type WorkspaceBrand

A workspace's brand: its name, a square logo and a 3:1 cover (each a URL you have, a File just cropped, or null), and its colour.

Prop	Type	Default
`name`	`string`	—
`logo`	`File \| string \| null`	—
`cover`	`File \| string \| null`	—
`color`	`string` "#rrggbb".	—

type BrandSurface

Where the brand shows in the preview.

= "sidebar" | "sign-in" | "email" | "invoice"