Chills
VS Code snippets providing functional React components, styled with TailwindCSS.
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) |
