Getting Started


Download using npm or yarn:

npm install @djthoms/pretty-checkbox # or
yarn add @djthoms/pretty-checkbox

Modern Bundler Usage

Pretty checkbox works well with modern bundlers such as parcel or webpack (via css-loader):

import '@djthoms/pretty-checkbox';
// rest of your app

If you want to import the scss source you can do that, too:

import '@djthoms/pretty-checkbox/src/pretty-checkbox.scss';

Sass Usage

At the heart of Pretty Checkbox is Sass. If you're using .sass or .scss in your project you can import pretty checkbox there:


~ might not resolve to the node_modules directory. If this is the case then you need to reference the relative path to the pretty-checkbox installation.

@import '~@djthoms/pretty-checkbox/src/pretty-checkbox';

Regular ol' HTML

And of course you can use a CDN and embed in your html file using the link tag ๐Ÿ˜‰

<link rel="stylesheet" href="" />


Once pretty checkbox styles have been added, just add a little bit of markup and we're in business ๐Ÿ‘ฉโ€๐Ÿ’ป

Live Editor