Examples

Code Examples

Live Examples

Use the examples below to try out theme properties.

Filter Bar

Show all
<VizzlyComponent theme={{
detail: "minimal",
rowLimit: 5,
forms: {
select: {
background: '#fff',
border: '2px rgb(243, 244, 246) solid',
borderRadius: '0.375rem',
color: 'rgb(55, 65, 81)',
fontWeight: 'inherit',
indicatorColor: 'rgb(75 85 99)',
'&:focus': {
border: '2px rgb(224, 242, 255) solid',
},
'&:hover': {
border: '2px rgb(224, 242, 255) solid',
},
},
},
buttons: {
primary: {
background: 'rgb(48, 116, 217)',
borderRadius: '0.25rem',
border: '1px solid rgb(48, 116, 217)',
boxShadow: '0 2px 0 rgb(0 0 0 / 5%)',
color: '#fff',
fontSize: '12px',
fontWeight: 500,
padding: '0.35rem 0.75rem',
'&:hover': {
background: '#5795e6',
},
}
}
}}
/>

Components Used
Button - Primary
Select

Editor

Show all
<VizzlyComponent theme={{
detail: "minimal",
rowLimit: 5,
modals: {
base: {
borderRadius: '0.375rem',
border: '0px solid',
background: 'rgb(255, 255, 255)',
boxShadow:
'0 0 #0000,0 0 #0000,0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1)',
},
header: { padding: '0.75rem 0.75rem 0px 1.25rem' },
content: { padding: '0.75rem' },
footer: { padding: '0 0.75rem 0.75rem 1.25rem' },
overlay: {
background: '#000',
opacity: 0.3,
},
},
tabs: {
selected: {
borderRadius: '0.5rem',
padding: '0.5rem 0',
fontSize: '0.75rem',
fontWeight: 700,
boxShadow: '0 0 #0000,0 0 #0000,0 1px 2px 0 rgb(0 0 0 / 0.05)',
background: 'rgb(48 116 217)',
color: 'rgb(255 255 255)',
},
unselected: {
borderRadius: '0.5rem',
padding: '0.5rem 0',
fontSize: '0.75rem',
fontWeight: 700,
color: 'rgba(0, 0, 0, 0.4)',
},
},
buttons: {
primary: {
background: 'rgb(48, 116, 217)',
borderRadius: '0.25rem',
border: '1px solid rgb(48, 116, 217)',
boxShadow: '0 2px 0 rgb(0 0 0 / 5%)',
color: '#fff',
fontSize: '12px',
fontWeight: 500,
padding: '0.25rem 0.75rem',
'&:hover': {
background: '#5795e6',
},
}
},
lists: {
title: {
fontWeight: 500,
},
border: '2px solid rgb(229 231 235 / 0.6)',
borderRadius: '0.5rem',
background: 'rgb(255 255 255 / 1)',
icon: {
color: '#1f293799',
background: '#fff',
border: '1px solid transparent',
},
},
}}
/>

Components Used
Button - Primary
Tabs
Modal
List

Chart Example

Show all
<VizzlyComponent theme={{
detail: "verbose",
rowLimit: 5,
colors: ['#688AE8', '#C33D69', '#2EA597', '#8456CE', '#E07941', '#3759CE'],
panels: {
padding: '0.75rem',
borderRadius: '0.5rem',
background: '#fff',
boxShadow:
'0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1)',
},
charts: {
title: {
fontWeight: 500,
},
subject: {
color: '#8f8f91',
fontSize: '0.875rem',
},
},
}}
/>

Components Used
Chart
Panel