Custom Themes

For pixel-perfect control over theming and styling, all Quill components accept custom components as props. See our dashboard docs for an example.

App.tsx

import { QuillProvider } from "@quillsql/react";

// You can a custom theme to be applied to the default Quill
// components, or you can pass your own components with
// pixel-perfect styling.
const MY_CUSTOM_THEME = {
	fontFamily: "Inter; Helvetica",
	backgroundColor: "#FFFFFF",
	primaryTextColor: "#364153",
	secondaryTextColor: "#6C727F",
	chartLabelFontFamily: "Inter; Helvetica",
	chartLabelColor: "#666666",
	chartTickColor: "#CCCCCC",
	chartColors: ["#4E80EE", "#E14F62", "#55B5A6", "#E9A23B"],
	borderColor: "#E5E7EB",
	primaryButtonColor: "#364153",
	secondaryButtonColor: "#384151",
	borderWidth: 1,
	labelFontWeight: 500,
	fontSize: 14,
	loadingStateBackgroundColor: "#F9F9FA",
	hoverBackgroundColor: "#F4F4F5",
};

function App() {
	return (
		<QuillProvider
			publicKey={process.env.QUILL_PUBLIC_KEY}
			tenants={[
				{ tenantField: "customer_id", tenantIds: [user.organizationId] },
			]}
			theme={MY_CUSTOM_THEME}>
			{children}
		</QuillProvider>
	);
}

QuillTheme

string

required

The font family you want Quill to use. This is usually the same font your app uses. ex: “Inter”

number

required

The default font size you want Quill to use. This is usually the same as the fontSize of your app (eg. 16 for “16px”).

string

required

The background color you want Quill to use. This is usually the same background color your app uses. ex: “#FFFFFF”

string

required

The background color you want Quill to use while hovering.

string

required

The color you want Quill to use for primary text. This is usually the same primary text color color your app uses. ex: “#000000”

string

required

The text color you want Quill to use for secondary text. This is usually the same secondary font color your app uses. ex: “#888888”

string

required

The font family you want Quill to use for chart labels. This is usually the same as your base font family. ex: “Inter”

string

required

The text color you want Quill to use for chart labels. This is usually the same as or similar to the secondary color your app uses. ex: “#666666”

string

required

The color you want Quill to use for chart ticks. This is usually the same as or similar to the secondary color your app uses. ex: “#CCCCCC”

string[]

required

The chart colors you want Quill to use. This is usually the same as the primary and secondary colors your app uses. You can pass in as many colors as you want, and you can also override these by passing in an array for the colors prop in the Chart component. ex: [‘#6269E9’, ‘#E14F62’]

string

required

The border color you want Quill to use. This is usually the same as or similar to the border color your app uses. ex: “#CCCCCC”

number

required

The border width you want Quill to use. This is usually the same as or similar to the border width your app uses. ex: 1 (ie. “1px”)

string

The color of the primary buttons you want Quill to use. Typically, you can just pass in a custom button with the styling you want instead of using this.

string

The color of the secondary buttons you want Quill to use. Typically, you can just pass in a custom button with the styling you want instead of using this.

number

The font weight you want Quill to use for buttons. Typically, you can just pass in a custom button with the styling you want instead of using this. (eg. 600)

number

The font weight you want Quill to use for labels. Typically, you can just pass in a custom label component with the styling you want instead of using this. (eg. 400)

string

The background color you want Quill to use while in a loading state. This is usually the same as the background color you app uses (eg. ‘#FFFFFF’).

Getting Started

Use cases

Components

Hooks

Functions

Reference

Custom Themes

QuillTheme

​QuillTheme

QuillTheme