TypeScript Emotion

Open-source TypeScript projects categorized as Emotion
Edit details
Topics: React styled-components TypeScript Nextjs CSS
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com
featured

Top 17 TypeScript Emotion Projects

  • twin.macro

    🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.

  • theme-ui

    Build consistent, themeable React apps based on constraint-based design principles

    • Project mention: Styling React 2023 edition | dev.to | 2023-11-03

    Over the past few years, I've worked with React apps utilising various CSS-in-JS libraries, starting with styled-components, transitioning through emotion, Theme UI, and finally Stitches. I've also integrated MUI, Mantine, and Chakra in numerous client projects.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo

  • saas-ui

    The React component library for startups, built with Chakra UI.

    • Project mention: [Hiring] (Online) Developer that has used a Saas Boilerplate | /r/forhire | 2023-10-27

  • react-awesome-reveal

    React components to add reveal animations using the Intersection Observer API and CSS Animations.

    • Project mention: Top 7 Next.js Animation Libraries in 2023 | dev.to | 2023-08-09

  • next-dark-mode

    🌑 Enable dark mode for Next.js apps

  • css-in-js-media

    :art: Deal with responsive design simply when use CSS-in-JS (styled-components,emotion.js)

  • explorer

    Explore transactions and accounts on the Stacks blockchain. Clone any contract and experiment in your browser with the Explorer sandbox. (by hirosystems)

    • Project mention: Xverse wallet stacking | /r/stacks | 2023-12-05

    Hi! I followed your tuto. Great, until the end . After confirmation on the wallet (last step) I just see an error page with "Error while loading data, try reloading the page." It refresh automaticaly. So I wait... In wallet I see "stacking revoked" and the new staking with the contract on link (explorer.hiro.so).

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo

  • styled

    Minimal CSS-in-JS styled components solution for React.

  • website

    Official dahliaOS website (by dahliaOS)

  • truss

    A TypeScript DSL for writing utility CSS in React/JSX (by homebound-team)

    • Project mention: StyleX – Meta's Styling Library | news.ycombinator.com | 2023-12-05

    Nice! We copied StyleX's "type-safe extensions" in Truss [1] so things like `` are allowed (setting margin is fine) while disallowing `` (anything "not margin") that would mess up the components internal impl details with a compile error.

    That said, we don't actually use the feature that much, vs. higher-level logical props like ``.

    I know we're supposed to use build-time CSS-in-JS these days, but afaiu they don't support the rare-but-handy "just spread together ~4-5 different object literals from ~random different conditionals + props", i.e. intermixing styles some inside the component + outside the component, which emotion handles really well.

    Basically this [2]. StyleX says it does "cross-file styles"...but can it support that? I kinda assume not, but I'm not sure.

    [1]: https://github.com/homebound-team/truss#xstyles--xss-extensi...

    [2]: https://github.com/homebound-team/beam/blob/main/src/compone...

  • regnite

    React Native boilerplate with firebase integration.

  • morsible

    :loudspeaker: Fast and reliable morse translator

  • Eisen-Matrix

    🎯 Eisen Matrix is a prioritization app that uses Eisenhower matrix technique as workflow to prioritize a list of tasks & built with React Native for learning purposes.

  • medi-q

    Type-safe media queries.

  • patches

    The OpenPatch Design System (by openpatch)

  • octoprofile

    🐙 A nicer look at GitHub profiles

  • styled-system-example

    An introduction to styled-system.

  • SaaSHub

    SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

    SaaSHub logo
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).

TypeScript Emotion related posts

Index

What are some of the best open-source Emotion projects in TypeScript? This list will help you:

Project Stars
1 twin.macro 7,809
2 theme-ui 5,215
3 saas-ui 1,177
4 react-awesome-reveal 1,064
5 next-dark-mode 217
6 css-in-js-media 139
7 explorer 135
8 styled 57
9 website 42
10 truss 31
11 regnite 19
12 morsible 17
13 Eisen-Matrix 17
14 medi-q 15
15 patches 8
16 octoprofile 4
17 styled-system-example 2

Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com