Effortlessly create beautiful, consistent interfaces

In just a few lines of code, and you're ready to roll

// Spinner component StoryBook page
export const SingleSpinner = Template.bind({});
SingleSpinner.args = {
	colorClass: 'bg-green',
	thickness: 1,
	size: 6,
};

export const MultipleSpinners = () => (
	<div className='flex p-5 gap-3'>
		// Pass Taiwind classes directly
		<CircleSpinner colorClass='bg-red' thickness={0.5} size='4rem' />
		<CircleSpinner colorClass='bg-green' thickness={0.5} size='4rem' />
		// Dark mode colors available
		<CircleSpinner colorClass='bg-yellow-dark dark:bg-yellow' thickness={0.5} size='4rem' />
		<CircleSpinner colorClass='bg-gray-900 dark:bg-white' thickness={0.5} size='4rem' />
	</div>
)

MultipleSpinners.parameters = {
	controls: {
		disable: true
	}
};

Ready to transform your UI workflow?