Overview Version History Q & A Rating & Review
Chills
When there is a cold tailwind and you react to it you get the chills.
Chills is a snippet extension that provides functional React components, styled with TailwindCSS. Each components is ready to be fully customized.
Installation
In VS-Code:
Go to extensions. Ctrl+Shift+X
Type in chills
Click Install
Project Configuration
For the snippets to work you will need to have a working React based app with TailwindCSS configured. The following guides will get you setup for:
Usage
Once in your React/Next.JS project, create a .jsx or .tsx. In the file type ch- and find the appropriate component you want. For example if you want a navbar for your Next.JS project the prefix is ch-navbarV1Next. Or a button ch-button. Or the Typescript version ch-buttonTS.
Components and Prefixes
The current implemented components and their prefixes are:
Standard
Prefix
Component
ch-accordion
Accordion
ch-alert
Alert
ch-errorAlert
Error Alert
ch-infoAlert
Info Alert
ch-successAlert
Success Alert
ch-warningAlert
Warning Alert
ch-avatar
Avatar
ch-avatarClip
Avatar with Clip
ch-avatarPlaceholder
Avatar Placeholder
ch-breadcrumb
Breadcrumbs
ch-button
Button
ch-iconButton
Icon Button
ch-buttonIcon
Button with Icon
ch-bottomNav
Bottom Nav
ch-cardV1
Card V1
ch-cardV2
Card V2
ch-cardV3
Card V3
ch-cardV4
Card V4
ch-carousel
Carousel
ch-countdownV1
Coundown V1
ch-countdownV2
Coundown V2
ch-countdownV3
Coundown V3
ch-drawer
Drawer
ch-dropdown
Dropdown
ch-dropdownIcon
Dropdown with Icon
ch-code
Code Mockup
ch-footerV1
Footer V1
ch-footerV2
Footer V2
ch-footerV3
Footer V3
ch-footerV4
Footer V4
ch-footerV5
Footer V5
ch-footerV6
Footer V6
ch-heroV1
Hero V1
ch-heroV2
Hero V2
ch-heroV3
Hero V3
ch-heroV4
Hero V4
ch-phone
Phone Mockup
ch-window
Window Mockup
ch-windowMac
Mac Window Mockup
ch-modal
Modal
ch-modalLogin
Login Modal
ch-progress
Progress
ch-speedDial
Speed Dial
ch-spinner
Spinner
ch-stepsX
Steps X (Horizontal)
ch-stepsY
Steps Y (Vertical)
ch-tabs
Tabs
ch-tabsVertical
Tabs Vertical
ch-timelineV1
Timeline V1
ch-timelineV2
Timeline V2
ch-tooltip
Tooltip
Standard TS
Prefix
Component
ch-accordionTS
Accordion
ch-alertTS
Alert
ch-errorAlertTS
Error Alert
ch-infoAlertTS
Info Alert
ch-successAlertTS
Success Alert
ch-warningAlertTS
Warning Alert
ch-avatarTS
Avatar
ch-avatarClipTS
Avatar Clip
ch-avatarPlaceholderTS
Avatar Placeholder
ch-breadcrumbTS
Breadcrumbs
ch-buttonTS
Button
ch-iconButtonTS
Icon Button
ch-buttonIconTS
Button with Icon
ch-bottomNavTS
Bottom Nav
ch-cardV1TS
Card V1
ch-cardV2TS
Card V2
ch-cardV3TS
Card V3
ch-cardV4TS
Card V4
ch-carouselTS
Carousel
ch-countdownV1TS
Coundown V1
ch-countdownV2TS
Coundown V2
ch-countdownV3TS
Coundown V3
ch-drawerTS
Drawer
ch-dropdownTS
Dropdown
ch-dropdownIconTS
Dropdown with Icon
ch-codeTS
Code Mockup
ch-modalTS
Modal
ch-modalLoginTS
Login Modal
ch-progressTS
Progress
ch-speedDialTS
Speed Dial
ch-spinnerTS
Spinner
ch-stepsXTS
Steps X (Horizontal)
ch-stepsYTS
Steps Y (Vertical)
ch-tabsTS
Tabs
ch-tabsVerticalTS
Tabs Vertical
ch-timelineV1TS
Timeline V1
ch-timelineV2TS
Timeline V2
ch-tooltip
Tooltip
React
Prefix
Component
ch-navbarV1React
Navbar V1 (React)
ch-navbarV1React
Navbar V2 (React)
ch-navbarV1React
Navbar V3 (React)
ch-sidenavV1React
Sidenav V1 (React)
Next.JS
Prefix
Component
ch-navbarV1Next
Navbar V1 (Next.Js)
ch-navbarV2Next
Navbar V2 (Next.Js)
ch-navbarV3Next
Navbar V2 (Next.Js)
ch-sidenavV1Next
Sidenav V1 (Next.Js)
