TypeScript UI

Open-source TypeScript projects categorized as UI

Top 23 TypeScript UI Projects

  • storybook

    Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

    Project mention: Advice on starting a design system / component library | reddit.com/r/FigmaDesign | 2023-01-31

    Have you explored using storybook ? I've seen it be really helpful for these types of challenges if incrementally adopted.

  • Svelte

    Cybernetically enhanced web apps

    Project mention: Invoking Svelte components from your Ember apps | dev.to | 2023-02-01

    Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

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

  • vuetify

    🐉 Vue Component Framework

    Project mention: Vue 2 end of life December 2023 | reddit.com/r/vuejs | 2023-01-13

    Hurry what up? 3.0? they're already on 3.1.1 if you didn't know

  • react-native-elements

    Cross-Platform React Native UI Toolkit

    Project mention: 7 Popular React Native UI Component Libraries You Should Know | dev.to | 2023-01-17

    React Native Elements provides an all-in-one UI kit for creating a cross-platform application in React Native. It has over 23k stars on Github.

  • docz

    ✍ It has never been so easy to document your things!

    Project mention: Why aren't Node.js package managers interoperable? | dev.to | 2022-10-07

    This is a real concern. I've worked on some Yarn projects where I sometimes forget and accidentally run npm. Although these package managers (I'll call them PMs for short) are interoperable to some degree, there are important differences between these tools, so you should know what you're getting into. Even in seemingly simple projects, results can vary. Here are two reports of things working with one PM, but not another. Moreso, running install once is very different from continuous concurrent use, where you're adding and removing packages and more.

  • SweetAlert

    A beautiful replacement for JavaScript's "alert"

    Project mention: SweetAlert2 manual confirm button text while echo'ing JS | reddit.com/r/programminghelp | 2022-09-27

    Are you sure you're using SweetAlert2 and not SweetAlert1 because your syntax looks like 1.

  • Editor.js

    A block-style editor with clean JSON output

    Project mention: is there a library for this? those multifeature textareas where you can format the text and add attachments? | reddit.com/r/webdev | 2023-01-02
  • 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.

  • @blueprintjs/core

    A React-based UI toolkit for the web

    Project mention: Tabler: Free and open source dashboard HTML/CSS framework | news.ycombinator.com | 2022-07-29

    Maybe https://blueprintjs.com/ for you, although last time I checked it did not have explicit mobile or tablet support. (They don’t aim to break mobile or tablet but they don’t endeavour to support it.)

  • React Intl

    The monorepo home to all of the FormatJS related libraries, most notably react-intl.

    Project mention: Formatting data like a pro in JavaScript | dev.to | 2022-11-30

    Format.JS

  • react-jsonschema-form

    A React component for building Web forms from JSON Schema.

    Project mention: Server Sent UI Schema Driven UIs | reddit.com/r/reactjs | 2022-12-20

    React Json Schema Form: https://github.com/rjsf-team/react-jsonschema-form

  • shoelace-css

    A collection of professionally designed, every day UI components built on Web standards. Works with all framework as well as regular HTML/CSS/JS. 🥾

    Project mention: Is there a better option than plain HTML, CSS and JS for creating my own design system? | reddit.com/r/webdev | 2023-01-16

    Check out https://shoelace.style/ Its based on web components, so you can use it with any framework or even vanilla js.

  • nebular

    :boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode

    Project mention: Top 6 Angular Component Libraries | dev.to | 2022-12-07

    Nebular

  • primitives

    Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.

    Project mention: Creating an accessible toggle group with a roving tabindex | reddit.com/r/webdev | 2023-01-21

    That is a good point! Just using radio buttons under the hood is probably a smaller solution if all you need is this component. Radix has a nice abstraction around their roving tabindex and it is reused in a bunch of components(combobox, tabs, etc). Since it is reused I think it's actually good to use it in this component as well for consistency.

  • cosmos-js

    Sandbox for developing and testing UI components in isolation

    Project mention: Do you use Storybook in your React Native projects? | reddit.com/r/reactnative | 2022-03-31

    I switched to cosmos (https://github.com/react-cosmos/react-cosmos ) awhile back and like it a lot more. Storybook might have caught up this now I havnt tried again since.

  • kittenTricks

    React Native starter kit with over 40 screens and modern Light and Dark theme for creating stunning cross-platform mobile applications.

  • ui

    Beautifully designed components built with Radix UI and Tailwind CSS. (by shadcn)

    Project mention: Server Components | reddit.com/r/reactjs | 2023-01-29

    I also just found this https://github.com/shadcn/ui

  • auto-animate

    A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.

    Project mention: Introducing ArrowJS • Reactivity without the framework | reddit.com/r/javascript | 2022-11-17

    📣 Howdy, I’m Justin Schroeder (author of FormKit and AutoAnimate) — I just released a new experimental JavaScript library for rendering interfaces declaratively. A few of the talking points:

  • graphql-editor

    📺 Visual Editor & GraphQL IDE. Draw GraphQL schemas using visual 🔷 nodes and explore GraphQL API with beautiful UI. Even 🐒 can do that!

    Project mention: Is there anything like a GraphQL playground for testing various features of GraphQL? | reddit.com/r/graphql | 2023-01-11

    aside from the ones mentioned graphql editor has a bunch of features that are helpful for testing like a click-out creator and a built-in mock backend for testing queries

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

    Futuristic Sci-Fi UI Web Framework.

    Project mention: User Interface Project Help | reddit.com/r/AskProgramming | 2023-01-04

    This one also looks reasonable.

  • react-native-ui-lib

    UI Components Library for React Native

    Project mention: Any good UI libraries? | reddit.com/r/reactnative | 2022-11-21

    Wix’s react-native-ui-lib is also nice: https://github.com/wix/react-native-ui-lib

  • theme-ui

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

    Project mention: Past Informs the Present: Begin’s Approach to CSS | dev.to | 2023-01-10

    Note how each class in the atomic version maps to just a single CSS property and value. In fact, if I hadn’t included the second block, I bet you’d have had no problem determining each class’ effect from the markup alone! This is a hallmark of atomic CSS — the effect of a class is typically self evident from its name alone, whereas the specifics of a class name like media are more ambiguous.

    For anyone familiar with atomic CSS today, the example above will likely appear unremarkable. The transition towards this approach was anything but, however — and on some corners of the web today, debate still rages about whether atomic CSS has been the best or worst thing to happen to styling on the web since CSS.

    There was, however, clearly an appetite for this approach amongst a non-trivial swath of web developers: the year 2014 saw the release of both Adam Morse’s Tachyons and Brent Jackson’s Basscss, the first two frameworks to go all-in on atomic CSS. These frameworks were instrumental in writing the blueprints for the atomic CSS methodology and turning the status quo on its head — and indeed, the shift was so monumental that, within a number of years, ‘utility-first’ CSS frameworks started becoming multimillion dollar businesses.

    The atomization of CSS had officially begun.

    Atomic CSS: successes and perceived failures

    In order to understand the success of atomic CSS (even if that success remains a point of debate in some circles), we should first examine its principles, and the goals those principles seek to achieve. Many of these principles are derived from functional programming, hence the alternative name ‘functional CSS’. Additional inspiration came from the Unix philosophy.

    The most fundamental principles of atomic CSS are:

    Classes should have a single purpose.
    Classes should do one thing, and they should do it well. This makes each class more reusable. A class that applies a margin, and only a margin, is more reusable than a class that applies and margin and a text colour.
    A class’ effect should be self evident.
    There should be no mystery about the effect of using a class — clarity should always trump cleverness. The effect of a class named flex which sets the display property to flex is self evident. The effect of a class named media which may set any number of property values is ambiguous.
    Classes should be composable.
    Complex styles should be achieved by composing multiple single purpose classes together, rather than by writing new, complex, and less reusable classes.
    Classes should be immutable and free of side effects.
    For example, the underline class should only ever apply an underline style. It should never not apply the underline, or apply another style, or change any other property of any other element. Under no circumstances should it change the effect of another class.

    It’s important to note that these principles were not devised for their own sake — each plays an important role in authoring performant, maintainable, robust styles:

    • Single purpose classes are more reusable and composable than multipurpose classes. Thus, single purpose classes provide greater flexibility as well as reduced CSS file sizes, both at the outset of new projects and throughout their lifecycle (as fewer styles need to be added to deliver iterations and additions to UI).

    • Classes with singular, self evident effects reduce cognitive overhead for developers; the resultant styling systems are thus easier to learn, and this in turn helps frontend teams scale their efforts across people and time.

    • Classes which are immutable and free of side effects result in fewer bugs — and where bugs occur, easier debugging and resolution follows.

    In these ways and in others, I have always felt that the nature of atomic CSS flows very much with the grain of CSS itself. Remember that CSS was designed to be independent of markup, and atomic CSS is by design untethered to any particular markup structure or content based semantics. Atomic CSS also honors CSS’ specificity algorithm rather than attempting to game it — it does not concern itself with optimized selector ranking or scope, since every class is of single purpose and equal specificity. This also means CSS’ inheritance model becomes an advantage as it was originally intended: compositions can be built up with inheritance in mind, over several layers of markup.

    There are, however, many common objections raised against the atomic CSS methodology. In general, these tend to be:

    ’It’s not semantic.’
    We’ve touched on this already, but it’s worth repeating: semantics, accessibility, and clarity do matter, but with all due respect to Zeldman, there is nothing inherently unsemantic, inaccessible, or unclear about ‘visual class names’, nor is there a reason for CSS to map to the same semantics as HTML.
    ‘This is inline styles all over again.’
    Nope. Inline styles are defined in HTML; atomic classes are defined in a style sheet. Inline styles do not permit media queries, pseudo elements, or pseudo classes; atomic classes do. Inline styles have a specificity ranking of 1-0-0-0, which can only be outranked by !important; atomic classes have a specificity of 0-0-1-0, the same as any single class. An inline style’s source of truth is its own singular invocation on a given element; an atomic class’ source of truth is a style sheet. There is a lexical resemblance between class='red' and style='color: red'; this is where the similarities end.
    ‘Putting so many classes on my elements looks ugly/is hard to read.’
    Admittedly, doesn’t read like poetry (and yes, that snippet is taken from this very page as of this writing). However, something that is a delight is being able to rapidly iterate on this composition — from the logical origin of that composition (the markup), whether in the browser or my editor — to explore different combinatorial spaces within the bounds of a design system. Iterating in this fashion simply cannot be matched when using other methodologies.
    ‘This is so not DRY.’
    It’s true, atomic CSS can lead to repeating declarations of various styling rules — but I vastly prefer repeating declarations to repeating definitions (which, in my experience, are much harder to maintain). Also, remember that every time you repeat a class name, that’s one more addition you didn’t have to make to your style sheet! Ultimately, this is a matter of choosing what kind of repetition you want, not one of avoiding repetition altogether.
    ‘Atomic CSS is at odds with modern component modeling.’
    ‘Thinking in React’ is one of those articles that changed the way I thought about web development when it was published, and there’s no denying that building frontends on the web has become a component centric process. However, it’s important to differentiate the process of thinking in components and the process of styling components. A conceptual abstraction does not require an equivalent material abstraction, and the fact of a component’s existence does not necessitate a dedicated CSS class.
    ‘This still doesn’t solve the problem of global scope or one off styles.’
    It doesn’t, and in fact atomic CSS is not designed for this. For scoped or one off styles, a different approach is absolutely required.

    Atomic CSS can provide a fantastic foundation that covers the vast majority of styling needs for a given website and its constituent components, and it can deliver those styles in a fraction of the file size and complexity of other methodologies. To be clear, these claims are not theoretical: this has been my experience both as a contributor and leader of frontend teams over the past 8 years, and the same has been true for many others both within and outside of my professional circle. But as we’ve noted, atomic CSS doesn’t cover every use case: scoped and one off styles are not part of its wheelhouse. So what’s to be done when a need for these sorts of styles emerges?

    Going bespoke

    Photograph of a blacksmith working metal at a grinder.
    Photo by Chris Ralston on Unsplash

    Where one off styles are needed, or where we want to ensure certain styles are scoped to a given component, additional measures beyond an atomic CSS methodology will be required. There are several techniques that can be used to address these concerns, with a few notable examples having become more popular in recent years:

    CSS in JS
    The obvious contender in this list. I used CSS in JS for many years myself, and have to say the developer ergonomics are pretty impressive, as is the ability to leverage both repeatable and bespoke, scoped styles (especially when using libraries like Styled System or Theme UI). Unfortunately, great developer ergonomics and scoping are not enough. CSS in JS can add significant weight to client side bundles, along with increased setup complexity (especially when server side rendering is involved). Some solutions can also lock you in to certain frontend frameworks, limiting the portability of your styles. There are some solutions emerging to address these concerns (e.g. Vanilla Extract), but at the end of the day, I admit I’m growing tired of learning abstractions of CSS — there are so many more valuable things I could be doing with my time. This isn’t necessarily a popular opinion, but I think CSS is actually pretty amazing on its own, and the closer to the metal I can stay, the happier I am.
    CSS Modules
    The name may suggest that CSS Modules are part of the CSS spec, but this is not the case. CSS Modules allow authors to extract styles from a vanilla .css file and into a JavaScript file containing markup; at build time, these extracted styles are then regenerated as locally scoped styles wherever they are used. This seems to offer some of the benefits of CSS in JS, but without the ergonomics of colocating styles, content, and behavior within a given component.
    Shadow DOM
    Shadow DOM is a web standards specification which is designed to provide encapsulation of content, styles, and behavior — but it has a number of hard to swallow caveats. For one, Shadow DOM roots need to be initialized in JavaScript (though Declarative Shadow DOM should address this in the future.) Further, styling encapsulation doesn’t work quite like you think it does, and this can cause some headaches. I believe the Shadow DOM holds promise, but for many use cases, it can end up being more trouble than it’s worth.

    Fortunately, a compelling solution for dealing with scoped and one off styles exists in the form of HTML custom elements, which are part of the web components spec along with Shadow DOM and HTML templates. I may be biased, but I think the best way to work with custom elements right now is with Enhance (though to be fair, I got a sneak peak at Enhance before joining Begin in 2022, and was just as enthusiastic at that time).

    Using Enhance to author custom elements in the form of Single File Components (SFCs) has a number of huge benefits:

    1. Custom elements are expanded on the server, providing great performance and an excellent baseline for progressive enhancement on the client.

    2. Locally scoped, one off styles can be authored simply by including a block in your SFC. When your component is expanded on the server, these style blocks will be hoisted into the document head, with all of that style block’s selectors scoped to your custom element. This allows for one off styles to be encapsulated and scoped to the component they’re authored in, without needing to touch the Shadow DOM. Scoped styles written within an SFC are also a great place to leverage strategies like intrinsic design, which can happily coexist alongside a global, atomic class system.

    3. If you don’t need to write client side behavior, you never have to interface with JavaScript classes or the Custom Elements Registry. This is particularly handy for engineers (or designers) who might excel at HTML and CSS but lack experience in JavaScript. Although SFCs are authored as JavaScript functions, the bulk of the authored code is written in HTML and CSS, as seen below:

    // my-button.mjs
    export default function MyButton({ html }) {
      return html`
        
          /* One off styles applied only to button elements rendered by MyButton. */
          /* Any button outside this component will not be affected. */
          button {
            appearance: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
          }
        
        
        
          
        
      `
    }
    
    // index.html
    <my-button>Click Me!</my-button>

  • tamagui

    Universal UI kit and style system for React Native + Web - with an optimizing compiler 🚄

    Project mention: CSS Framework for React Native? | reddit.com/r/reactnative | 2023-01-16

    I recently discovered this library - tamagui

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

TypeScript UI related posts

Index

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

Project Stars
1 storybook 76,268
2 Svelte 65,141
3 vuetify 36,363
4 react-native-elements 23,243
5 docz 23,097
6 SweetAlert 22,204
7 Editor.js 21,356
8 @blueprintjs/core 19,588
9 React Intl 13,539
10 react-jsonschema-form 12,192
11 shoelace-css 8,113
12 nebular 7,725
13 primitives 7,712
14 cosmos-js 7,699
15 kittenTricks 6,959
16 ui 6,936
17 auto-animate 6,697
18 graphql-editor 5,748
19 React95 5,609
20 arwes 5,259
21 react-native-ui-lib 5,111
22 theme-ui 4,834
23 tamagui 4,616
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