ReactSymbols UI Kit

4 years ago from , Webflow/No-Code Enthusiast, Product Designer & Product Maker. Tweets as @janlosert. Pixels on http://dribbble.com/JanLosert.

Hi DN, Today I would like to show you something what we’ve been working on for a few weeks. Let me present you our brand new release: ReactSymbols UI Kit.

As you can tell from the name: This package is all about React UI components. You’ll find most of the elements from Symbols & Styleguides package coded into React. All types of buttons, labels, tabs, inputs and much more to make sure that you get the main coverage of all the frequently used UI elements across the web spectrum. Each component is build with endless possibilities to give you a freedom to change easily every aspect. For example buttons comes in 3 sizes, all validation states, with properties for icons, border radius, colour, label and many more. All properties are listed in Documentation.

Coming Soon (Next Week): One of the best features we cooked together is the same principle from Styleguides, you can change most of the components to match your brand by changing one line of code!

Wanna learn more? Full landing page overview + documentation: http://reactsymbols.com

What’s inside this package?

  • 17 Ready to use components
  • Customisable colour theme of the whole UI Kit
  • SASS & CSS files for each component separately
  • Font Awesome and Material icons support
  • Detailed documentation for each component
  • Full setup video tutorial
  • Lifetime support + Free future updates
  • Sketch file (from Symbols & Styleguides)



  • Daniel MarquesDaniel Marques, 4 years ago

    Are these linked to a sketch file like https://github.com/airbnb/react-sketchapp?

    I mean: If the code is changed will the sketch file be updated automatically?

    2 points
    • Igor StumbergerIgor Stumberger, 4 years ago

      Or the other way around maybe? So if I make changes to the Sketch file, does it update the style in the code?

      That would be so freakin' awesome!

      1 point
      • Daniel MarquesDaniel Marques, 4 years ago

        I personally prefer to have the code as the source of truth. But yeah, the other way around could also work in some cases.

        1 point
    • Vlastimil Fiser, 4 years ago

      Hi @Danel! Thanks for a suggested of a feature. Currently, Sketch is not connected to the code. We will think about it for next releases!

      1 point
  • Roland IllésRoland Illés, 4 years ago

    This is awesome! Pretty sure we're buying this, gonna use it in our company onboarding and dashboard. Love how you set up the Sketch file with all the parameters.

    1 point
  • Vlastimil Fiser, 4 years ago

    Hey guys! We just released new version (1.1) of ReactSymbols!

    Features like SASS build, Typescript support, local NPM module support and even more.

    Check the full list here: http://reactsymbols.com/ thanks would be good to see your feedback! :)

    Thanks, Vlasti (developer of ReactSymbols)

    0 points
  • R. KamushkenR. Kamushken, 4 years ago

    got sales? :-]

    0 points