Home

Awesome

version

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

All Contributors

<!-- ALL-CONTRIBUTORS-BADGE:END -->

gzip size downloads Discord

<p align="center"> <br/> <br/> <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 508.000000 491.000000" preserveAspectRatio="xMidYMid meet" fill="currentColor" width="250" height="250"> <g transform="translate(0.000000,491.000000) scale(0.100000,-0.100000)"> <path d="M3603 4628 c-38 -42 -122 -196 -661 -1203 -619 -1160 -734 -1384 -752 -1471 -9 -43 -20 -65 -46 -89 -19 -18 -34 -40 -34 -48 0 -9 -11 -33 -25 -53 -17 -26 -25 -49 -24 -73 2 -26 -32 -124 -118 -341 -66 -168 -125 -318 -130 -335 -8 -25 -19 -33 -68 -49 -107 -34 -170 -116 -270 -350 -93 -218 -161 -286 -306 -306 -34 -5 -63 -11 -65 -13 -10 -10 151 -40 237 -45 86 -4 199 7 246 25 16 6 17 5 3 -12 -14 -17 -13 -18 25 -11 22 4 71 11 108 16 38 5 80 16 95 24 15 8 55 27 90 42 50 22 77 42 128 99 77 87 122 120 208 151 145 52 337 54 481 4 179 -62 387 -109 595 -135 77 -10 59 1 -32 20 -87 18 -164 43 -133 44 11 0 74 -6 140 -14 163 -20 192 -17 65 5 -150 27 -258 61 -469 147 -191 77 -245 102 -224 103 21 0 235 -58 378 -103 185 -59 361 -98 460 -102 44 -2 64 -1 45 1 -134 17 -286 56 -495 125 -319 106 -380 120 -547 126 -167 7 -251 -10 -377 -74 -46 -24 -86 -42 -87 -40 -2 2 -8 28 -14 58 -5 30 -17 70 -26 91 -16 36 -16 37 14 75 36 44 138 229 255 460 52 102 89 165 103 171 24 12 64 122 64 178 0 27 9 46 36 77 48 56 118 205 329 697 381 891 864 2040 875 2080 14 53 6 90 -19 90 -10 0 -36 -19 -58 -42z m51 -25 c-4 -16 -79 -199 -168 -408 -154 -360 -164 -380 -190 -383 -28 -4 -51 9 -66 38 -10 19 8 56 208 430 155 291 190 350 208 350 11 0 13 -7 8 -27z m-641 -1185 c-82 -161 -252 -489 -378 -728 -126 -239 -259 -500 -296 -580 -36 -80 -71 -156 -77 -170 l-12 -25 6 25 c36 147 285 650 707 1425 208 383 187 345 193 345 3 0 -62 -132 -143 -292z m-813 -1563 c0 -2 -11 -15 -25 -29 -14 -14 -25 -35 -25 -46 0 -12 -4 -18 -10 -15 -28 17 5 95 41 95 10 0 19 -2 19 -5z m35 -35 c3 -6 -3 -22 -14 -36 -12 -15 -21 -38 -21 -51 0 -34 -24 -24 -28 11 -7 57 40 113 63 76z m90 -44 c33 -13 68 -27 78 -30 22 -7 22 -44 1 -75 -15 -20 -22 -23 -59 -18 -68 10 -125 36 -125 58 0 25 27 89 37 89 4 0 35 -11 68 -24z m-200 -36 c3 -5 -3 -26 -13 -46 l-19 -37 -7 27 c-10 40 21 86 39 56z m44 -44 c10 -11 10 -20 1 -36 -6 -12 -9 -28 -6 -36 6 -16 4 -17 -18 -8 -16 6 -21 48 -10 78 8 20 18 20 33 2z m91 -46 c30 -11 72 -19 93 -20 41 0 46 -12 21 -48 -17 -25 -77 -30 -135 -11 -50 17 -60 30 -53 67 8 37 4 37 74 12z m-290 -350 c-71 -172 -132 -315 -135 -318 -17 -17 8 52 111 312 64 160 120 302 125 315 6 16 13 21 19 15 7 -7 -36 -122 -120 -324z m222 265 c29 -14 64 -25 78 -25 48 -1 52 -12 21 -70 -15 -30 -66 -129 -113 -220 -127 -245 -184 -339 -213 -346 -24 -6 -91 11 -99 25 -5 8 261 661 269 661 2 0 27 -11 57 -25z m-402 -632 c-38 -25 -81 -66 -92 -88 -6 -12 6 -5 28 16 36 34 74 59 89 59 3 0 -10 -23 -30 -51 -42 -61 -47 -89 -6 -33 15 21 38 48 50 58 l21 19 0 -47 c0 -26 -7 -63 -15 -84 -14 -34 -13 -35 1 -17 8 11 20 39 27 63 6 23 15 42 20 42 11 0 4 -102 -9 -135 -4 -11 -4 -17 1 -13 4 4 16 36 26 70 l18 63 0 -80 c1 -65 -4 -90 -24 -132 -31 -69 -23 -69 12 0 20 40 27 71 31 136 5 83 5 84 19 50 8 -19 18 -61 23 -94 l9 -60 -2 72 c-2 54 0 68 8 55 5 -9 10 -60 10 -112 0 -85 -3 -101 -29 -155 -40 -81 -119 -156 -209 -199 -39 -19 -85 -38 -102 -41 l-30 -7 35 32 c38 34 36 34 -55 -4 -100 -41 -251 -54 -364 -30 -20 4 -17 8 28 30 95 48 145 121 251 367 58 133 113 207 181 241 29 14 64 26 78 26 l25 0 -24 -17z"/> <path d="M3733 553 c9 -2 23 -2 30 0 6 3 -1 5 -18 5 -16 0 -22 -2 -12 -5z"/> <path d="M3608 543 c12 -2 32 -2 45 0 12 2 2 4 -23 4 -25 0 -35 -2 -22 -4z"/> </g> </svg> <br/> <b>Filbert</b> <br/> <b>A light weight (~1KB) css-in-js solution (framework) 🎨</b> <br/> <br/> <br/> <a href="https://filbert-js.vercel.app/docs/install">Getting started</a> </p>

It is an alternative to styled-components(~12.51kB) or emotion(~11.3kB) with similar API surface.

Features

NameStatus
CSS✅
Nested Selectors✅
Dynamic Styling(Prop based)✅
Override Component Style✅
Global✅
Pseudo Selector✅
Media Queries ✅
Keyframe✅
Theming✅
Component Selector✅
Styles As Object Literals🔜
Server-side Rendering✅
Client-side Hydration✅
Vendor Prefixing ✅
Extract CSS File✅
React Native🔜
Integration(Create React App)✅
Integration(Preact)✅
Integration(Gatsby)✅
Integration(Next.js)✅

Benchmarks

🤝 How to Contribute

Whether you're helping us fix bugs, improve the docs, or spread the word, we'd love to have you as part of the community! 💪💜

Check out our Contributing Guide

Contributors ✨

Thanks goes to these wonderful people (emoji key):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tr> <td align="center"><a href="https://github.com/Darth-koder007"><img src="https://avatars2.githubusercontent.com/u/9719845?v=4" width="100px;" alt=""/><br /><sub><b>Vijay Singh</b></sub></a><br /><a href="#content-Darth-koder007" title="Content">🖋</a></td> <td align="center"><a href="https://in.linkedin.com/in/kuldeepkeshwar"><img src="https://avatars1.githubusercontent.com/u/10448534?v=4" width="100px;" alt=""/><br /><sub><b>anotherjsguy</b></sub></a><br /><a href="https://github.com/kuldeepkeshwar/filbert-js/commits?author=kuldeepkeshwar" title="Code">💻</a></td> <td align="center"><a href="https://github.com/vivek32ta"><img src="https://avatars1.githubusercontent.com/u/32357540?v=4" width="100px;" alt=""/><br /><sub><b>Vivek T A</b></sub></a><br /><a href="https://github.com/kuldeepkeshwar/filbert-js/commits?author=vivek32ta" title="Code">💻</a></td> <td align="center"><a href="https://github.com/danedavid"><img src="https://avatars3.githubusercontent.com/u/19928280?v=4" width="100px;" alt=""/><br /><sub><b>Dane David</b></sub></a><br /><a href="https://github.com/kuldeepkeshwar/filbert-js/commits?author=danedavid" title="Code">💻</a></td> <td align="center"><a href="http://vigneshwaran.dev"><img src="https://avatars1.githubusercontent.com/u/31436276?v=4" width="100px;" alt=""/><br /><sub><b>Vignesh Elangovan</b></sub></a><br /><a href="https://github.com/kuldeepkeshwar/filbert-js/commits?author=devevignesh" title="Code">💻</a></td> </tr> </table> <!-- markdownlint-enable --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the all-contributors specification. Contributions of any kind welcome!

Backers

Thank you to all our backers! 🙏 <a href="https://opencollective.com/filbert-js#backers" target="_blank"><img src="https://opencollective.com/filbert-js/backers.svg"/></a>

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. <a href="https://opencollective.com/filbert-js#sponsors" target="_blank"><img src="https://opencollective.com/filbert-js/sponsors.svg"/></a>

Acknowledgements

Without styled-components/emotion, filbert wouldn't exist. Thanks to all the wonderful people who have contributed towards these projects 🙏