TypeScript styled-components

Open-source TypeScript projects categorized as styled-components
Edit details
Topics: #React #TypeScript #ReactJS #CSS #css-in-js
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.
www.sonarsource.com
Sponsored

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-06

    As 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.

    Project mention: CSS Style Guide for Web Dev? | reddit.com/r/learnprogramming | 2023-01-30

    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!

  • React95

    🌈🕹 Windows 95 style UI component library for React

    Project mention: 98.css – design system for building faithful recreations of Windows 98 UIs | news.ycombinator.com | 2022-10-23

  • reactour

    Tourist Guide into your React Components

  • React95

    A React components library with Win95 UI (by React95)

  • briOS

    My personal website.

    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.

  • orbit-components

    React components of open-source Orbit design system by Kiwi.com (by kiwicom)

  • hls-downloader

    Web Extension for sniffing and downloading HTTP Live streams (HLS)

    Project mention: Zakaj Voyo briše vsebine? | reddit.com/r/Slovenia | 2022-08-01

    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.

  • neopop-web

    NeoPOP components library based on CRED's design system

    Project mention: Have you seen this sexy button? | dev.to | 2022-07-09

    View on GitHub

  • design-system

    Priceline.com Design System

    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-26

    If 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

  • community-platform

    A platform to build useful communities that aim to tackle global problems

    Project mention: Pro-bono dev work | reddit.com/r/ExperiencedDevs | 2022-10-12

    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.

    Project mention: How to load a GLTF model inside NextJS in 2022 | reddit.com/r/threejs | 2022-02-18

    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

  • moon-design

    Moon Design System

    Project mention: Moon Design System | reddit.com/r/reactjs | 2022-08-26

    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

  • jsx-dom

    Use JSX to create DOM elements.

    Project mention: State of JSX in JavaScript Frameworks | dev.to | 2022-09-10

    Sure, you can use JSX without a framework! Be it MobX JSX, dom-chef or jsx-dom, it should feel right at home.

  • ui

    React Styled Components with bootstrap grid system (by paljs)

  • react-functional-select

    Micro-sized & micro-optimized select component for React.js

  • 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.

    Project mention: Drag and drop file? | reddit.com/r/react | 2023-02-05

  • 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.

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2023-02-06.

TypeScript styled-components related posts

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

Sponsored
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.
www.influxdata.com