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_API_KEY}
			organizationId={user.organizationId}
			theme={MY_CUSTOM_THEME}>
			{children}
		</QuillProvider>
	);
}

​
QuillTheme

​
fontFamily
string
required

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

​
fontSize
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”).

​
backgroundColor
string
required

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

​
hoverBackgroundColor
string
required

The background color you want Quill to use while hovering.

​
primaryTextColor
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”

​
secondaryTextColor
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”

​
chartLabelFontFamily
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”

​
chartLabelColor
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”

​
chartTickColor
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”

​
chartColors
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’]

​
borderColor
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”

​
borderWidth
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”)

​
primaryButtonColor
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.

​
secondaryButtonColor
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.

​
buttonFontWeight
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)

​
labelFontWeight
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)

​
loadingStateBackgroundColor
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’).

QuickstartQuillProvider