InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises. Learn more →
Top 23 TypeScript styled-component Projects
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
Project mention: Day 24: Making autocomplete search accessible for React apps with Downshift | dev.to | 2023-02-06As described in Section 2.1 above, the type="search" attribute makes the iOS/Android mobile keyboard appropriate for a search box. The inputMode prop (see Oliff 2019 for detail) is a fallback when the mobile keyboard does not change as expected (which happened to me with Styled Components for some reason). And the placeholder attribute is handy to suggest what to enter.
-
twin.macro
🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Personally I like twin.macro the most. It’s similar to the above but based on Tailwind.
-
Appwrite
Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
-
Project mention: 98.css – design system for building faithful recreations of Windows 98 UIs | news.ycombinator.com | 2022-10-23
-
-
-
Project mention: Long live personal websites, Let's make the web personal again | news.ycombinator.com | 2022-11-14
-
react-boilerplate-cra-template
:fire: Setup Create React App with React Boilerplate. Highly scalable & Best DX & Performance Focused & Best practices.
-
Sonar
Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
-
-
Uporabi HLS Downloader plugin: https://github.com/puemos/hls-downloader
-
landy-react-template
Landy is an open-source React landing page template designed for developers and startups, who want to create a quick and professional landing page for their business or project.
-
View on GitHub
-
Project mention: How do you guys add Styles to your React project | reddit.com/r/reactjs | 2022-07-13
This one just has a couple variants I've done, but you can add as many as you want. My dev mentor is a Senior who works on the design system at Priceline and showed me how. You can find the docs for it here: https://priceline.github.io/design-system/
-
Tailwind-Styled-Component
Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering
Project mention: Is using styled components in this way just inline style with extra steps?? | reddit.com/r/webdev | 2022-07-26If you’re going for shorthand css with styled components, you might want to try Tailwind Styled Components
-
react-redux-saga-boilerplate
Starter kit with react-router, react-helmet, redux, redux-saga and styled-components
Project mention: Why are examples of scaled projects so hard to find? | reddit.com/r/reactjs | 2022-05-21 -
I’ll throw a plug out for https://github.com/ONEARMY/community-platform. There is also a YouTube channel associated: https://youtube.com/c/ProjectKamp
-
twin.examples
Packed with examples for different frameworks, this repo helps you get started with twin a whole lot faster.
Hey, I'm trying (and failing) to put together a codesandbox. I think it's easier to replicate the steps from here: https://github.com/ben-rogerson/twin.examples/tree/master/next-styled-components
-
typescript-plugin-styled-components
TypeScript transformer for improving the debugging experience of styled-components
-
I’m thrilled to announce a huge thing. We have been developing Moon Design System for quite a while. And we are on an Open Source stage.
-
stacks-wallet-web
Hiro Wallet is a web extension for managing your digital assets, and connecting to apps built on Stacks
-
Sure, you can use JSX without a framework! Be it MobX JSX, dom-chef or jsx-dom, it should feel right at home.
-
-
-
react-drag-drop-files
Light and simple Reactjs drag and drop files library to use with very flexible options to change, so you put whatever the design you want for your drop-area. Users can drag and drop or even select the file anywhere in the window.
-
InfluxDB
Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.
TypeScript styled-components related posts
- Day 24: Making autocomplete search accessible for React apps with Downshift
- How can I wait for a data array to be filled before trying to render the data ?
- How To Use Styled-Components In React
- Best stack to use for a site that only fetch data from an api
- Is CSS in JS best practise?
- Heimdall Esports, an app entirely made by myself with React Native, is now available!
- Cactus UI — Accessibility focused react component library
-
A note from our sponsor - InfluxDB
www.influxdata.com | 8 Feb 2023
Index
What are some of the best open-source styled-component projects in TypeScript? This list will help you:
Project | Stars | |
---|---|---|
1 | styled-components | 38,170 |
2 | twin.macro | 6,903 |
3 | React95 | 5,626 |
4 | reactour | 3,314 |
5 | React95 | 2,290 |
6 | briOS | 1,785 |
7 | react-boilerplate-cra-template | 1,711 |
8 | orbit-components | 1,280 |
9 | hls-downloader | 1,195 |
10 | landy-react-template | 887 |
11 | neopop-web | 882 |
12 | design-system | 688 |
13 | Tailwind-Styled-Component | 634 |
14 | react-redux-saga-boilerplate | 592 |
15 | community-platform | 521 |
16 | twin.examples | 409 |
17 | typescript-plugin-styled-components | 405 |
18 | moon-design | 203 |
19 | stacks-wallet-web | 196 |
20 | jsx-dom | 196 |
21 | ui | 187 |
22 | react-functional-select | 176 |
23 | react-drag-drop-files | 149 |