Blueprint – A React UI toolkit for the web

I see a few comments bringing up mobile. There&#x27;s already many mobile-friendly UI frameworks; not everything has to be mobile-first. Yes, in many cases it makes sense to go for a mobile-first approach, especially with consumer-facing applications. Mobile is huge and apparently it&#x27;s still continuing to grow.<p>At the same time, there&#x27;s many legitimate cases in which you want to optimize for desktop. For example: consider an IDE, where you have lots of panels and toolbars. In some cases it&#x27;s unclear how you&#x27;d be able to support both desktop and mobile without significantly degrading the experience. Even Google struggles with this. How usable is Data Studio [0] on mobile? It&#x27;s pretty terrible and unusable. But that&#x27;s perfectly fine, because the desktop experience is great! I can&#x27;t speak for others, but I can&#x27;t imagine myself wanting to use a mobile device to get any work done.<p>Kudos to Palantir for open sourcing their UI toolkit.<p>[0] <a href="https:&#x2F;&#x2F;datastudio.google.com" rel="nofollow">https:&#x2F;&#x2F;datastudio.google.com</a>

This looks really nice.<p>However, what I really want for React is a style-agnostic component library that basically extends the regular set of HTML elements, but comes with no &quot;visual&quot; styling (other than really basic styling like the browser&#x27;s default styling for &lt;input&gt;, &lt;select&gt; and the like). Only styling that is necessary for the component to function should be included.<p>Of course, optional themes would be fine. Also, non-visual styling should be completely inlined. Themes could inject &quot;visual&quot; styling via context. User-defined styling would be passed via class or style props.

Thanks very much @Plantir for open sourcing React UI toolkit. This already seems to be production ready. Big thanks for the detailed documentation. The amount of time you have spent in creating examples and providing excellent starting point is really great.<p>I really enjoyed and excited to see your take on Color Theme. Like bootstrap, I don&#x27;t think sites created using Blueprint will look same. With minimal changes in variables,layout and using your wide ranging color theme wonderful results can be achieved in no time.<p>Big Thumbs up!!<p>I have created a small overview videos about various UI component available. (No installation or tutorials, only shown their various artifacts).<p><a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=ky7ec5Sh2kM" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=ky7ec5Sh2kM</a>

Hi all, I work at Palantir and worked on Blueprint (although I&#x27;m currently working on a different project). Happy to answer any questions you have about it.<p>Just a note - we didn&#x27;t intend to heavily publicize the project quite yet. For example, the docs site is still a WIP, so apologies if it causes issues for you on mobile devices.

Ah, memories. <a href="http:&#x2F;&#x2F;blueprintcss.org&#x2F;" rel="nofollow">http:&#x2F;&#x2F;blueprintcss.org&#x2F;</a>

Your homepage pushed my CPU to 75% and resulted in an early click on the red cross of the tab. (latest chrome stable&#x2F;osx 10.11) You should do better.

This is very slick. It&#x27;s similar to my own project <a href="http:&#x2F;&#x2F;cx.codaxy.com&#x2F;docs&#x2F;widgets&#x2F;date-fields" rel="nofollow">http:&#x2F;&#x2F;cx.codaxy.com&#x2F;docs&#x2F;widgets&#x2F;date-fields</a>, however, it seems that they went one step further.

This is impressive, I can cover lot&#x27;s of UI scenarios with it. I also like the first class CSS&#x2F;HTML API that they have, so I could use them without React. And they seem to have Accessibility covered (need to dive in a bit more), but this is super important. And at last, I dig the visual style, which has good affordances. A nice contrast to Material Design.

<p><pre><code> Blueprint is an open source project developed at Palantir.</code></pre>

I wish web based UI-toolkit creators would focus on WebComponents. They can easily be used as leaf-elements in almost any framework.

If someone wants to be an exemplary citizen, rendering all of the components on to a single page for us on mobile would be amazing.

This looks great. Nice to see a complete UI toolkit with context menus, sortable tables, hotkeys and editable text along with all the normal tooltips, navs, and UI widgets. Bonus points for both sass and less support. Looking forward to trying this out.

Is this page written in Blueprint? It makes my Firefox consume 100% CPU.

Despite the sluggishness, there&#x27;s a lot of really likeable stuff in here and it is beautiful (or, a lot more beautiful than I, or most developers, could ever come up with without a team and some pro designers on staff).<p>I particularly enjoyed the piano example: <a href="http:&#x2F;&#x2F;blueprintjs.com&#x2F;docs&#x2F;#components.hotkeys" rel="nofollow">http:&#x2F;&#x2F;blueprintjs.com&#x2F;docs&#x2F;#components.hotkeys</a>

Documentation is unusable on mobile... I hope that was due to someone making some CSS mistakes with their page code and not the framework&#x27;s code.

Maybe just me but I&#x27;m having a hard time seeing how this is substantially different from or better than bootstrap or foundation with some react-based wrappers like reactstrap. Seems like performance is an issue and you&#x27;re just as tightly coupled to the framework as with bootstrap&#x2F;foundation. Am I missing something?

I tried to look at the site on my S7, but it ground it to a halt. Tried on my i7 laptop, same result :&#x2F;

Unfortunately, mobile support is not on the roadmap: <a href="https:&#x2F;&#x2F;github.com&#x2F;palantir&#x2F;blueprint&#x2F;issues&#x2F;105#issuecomment-260151357" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;palantir&#x2F;blueprint&#x2F;issues&#x2F;105#issuecommen...</a>

I am the developer of HiveMind (crudzilla.com), I am currently stuck on what I think would be the final feature of the platform that would fulfill my vision of what a modern web application platform should be about.<p>That feature is a drag-n-drop UI construction mechanism that would basically allow the user to glue together UI components (I call them UI parts) and write code only as a fill-in-the-blank task to complete the application.<p>I think React, Angular and similar paradigms might eventually make this possible. In the future building web applications, especially typical business crud applications with simple workflows wrap around a UI should not require more than familiarity with a development product and basic programming.

Not to sound like a bummer here, but I&#x27;m not sure what kind of computer is needed to open this webpage. Simply scrolling up and down that website causes my computer to almost freeze. Firefox 49.0 user here. I would profile it, but I&#x27;m afraid of having to restart the computer as a result.<p>Edit: It looks amazing. (Still the performance issue is reproducible easily)

The documentation page does render legibly on mobile. It looks nice but that doesn&#x27;t bode well for the library...

Question for Palantir devs: is this currently being used in production?

ReactJS enlightened web developers with <i>Component</i> based functional&#x2F;thinking&#x2F;development model, which brought some order in front-end UI development. And it has been one of the best things with community behind it.<p>Having worked with both Desktop UI (Swing&#x2F;GTK) and Server based UI toolkits (JSF), the value of ReactJS is a standard Component Life cycle.<p>I would propose having a ReactUI component specification with a standard version. The current specification [0] is not decoupled from implementation. The separate spec and implementation numbering will enable multiple implementations - ReactJS from Facebook being one.<p>I am thinking similar to Reactive-Streams [0] specification and Reactive Extensions [2] which have multiple implementations.<p>[0] <a href="https:&#x2F;&#x2F;facebook.github.io&#x2F;react&#x2F;docs&#x2F;react-component.html" rel="nofollow">https:&#x2F;&#x2F;facebook.github.io&#x2F;react&#x2F;docs&#x2F;react-component.html</a><p>[1] <a href="http:&#x2F;&#x2F;www.reactive-streams.org" rel="nofollow">http:&#x2F;&#x2F;www.reactive-streams.org</a><p>[2] <a href="https:&#x2F;&#x2F;github.com&#x2F;ReactiveX" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;ReactiveX</a>

This looks really nice and well set up. I love the fact that you chose typescript and bundle a good definitions file. I totally understand homepage performance was not on the agenda yet, and its really no big deal to me, but I have to agree with others on the mobile support: this sadly crosses blueprint of my list for 99% of my work, if not all. Will be coming back to see where to project is going though!

Coincidentally I was watching &quot;ReactNL 2016 Max Stoiber - Styling React.JS applications&quot; <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=19gqsBc_Cx0" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=19gqsBc_Cx0</a><p>Styling in React needs some sort of consistent way forward.

Maybe I need to take a few layers of tinfoil off the old hat, and I suspect it&#x27;s just good old fashioned open source generosity, but..<p>Given that it&#x27;s from Palantir, is there any way this could become a security attack vector at scale?

A little bit slow on my mobile

It seems you may have to include the css for the whole library on every page[0]. I would have much preferred it if the css for each component is included on your page as you require the component.<p>Though I admit it is confusing since the &quot;Let&#x27;s Get Started&quot; section of the homepage[1] does not mention including the global css.<p>[0] <a href="http:&#x2F;&#x2F;blueprintjs.com&#x2F;docs&#x2F;" rel="nofollow">http:&#x2F;&#x2F;blueprintjs.com&#x2F;docs&#x2F;</a> [1] <a href="http:&#x2F;&#x2F;blueprintjs.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;blueprintjs.com&#x2F;</a>

Impressive.<p>One question: I couldn&#x27;t find advanced form components, and specifically dropdown&#x2F;multiselects. (a bit like this: <a href="https:&#x2F;&#x2F;selectize.github.io&#x2F;selectize.js&#x2F;" rel="nofollow">https:&#x2F;&#x2F;selectize.github.io&#x2F;selectize.js&#x2F;</a>, or this: <a href="http:&#x2F;&#x2F;wenzhixin.net.cn&#x2F;p&#x2F;multiple-select&#x2F;docs&#x2F;#the-basics1" rel="nofollow">http:&#x2F;&#x2F;wenzhixin.net.cn&#x2F;p&#x2F;multiple-select&#x2F;docs&#x2F;#the-basics1</a>)<p>Do you plan to implement this kind of components?

This look exceptional ! It&#x27;s full featured (datepicker, tree) and professional looking. It&#x27;s also seems to by typescripted. But the slider needs work on touchscreen.

What I like the most is that the UI is just really nice and clean

There is also <a href="http:&#x2F;&#x2F;react.semantic-ui.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;react.semantic-ui.com&#x2F;</a> which I have found to be very useful.

Those themes are gorgeous, where I can find those theme?

The design looks amazing. I love how easy it is for &quot;programmer ui design&quot; to look quite good these days.

Great work, it looks very nice! One thing I always find missing from most of these React toolkits is a TreeTable component. This is a component that I often require in business applications, and I suspect other will too. Is this something that you would consider adding in the future?

I wonder why all the UI toolkits always come without some form of layout support.<p>What is Qt without a GridLayout?

This is very well done. If they provided a React Native one as well, that would be even cooler.

Docs are utterly broken on mobile.

Everything looked good until the grid&#x2F;table. Those are vastly underpowered&#x2F;featured versus other solutions (kendoui, devexpress, etc) we are currently using&#x2F;have evaluated.

Cool&#x2F;interactive logo on the web page -- how is that done ?

My RT-AC68U router flagged this website as having malware. Seems more related to email than the website though.<p>Description: Sites whose addresses have been found in spam messages.

For some reason this page is really slow on Firefox.

Site is super slow and jaggy on a macbook pro..<p>No demo&#x27;s

Since you guys are taking a lot of insults here I want to try and offer you something constructive.<p>Having bugs is ok. Failing at mobile and performance is not. It melts away your credibility because doing these things right is table stakes.<p>This is all compounded by the fact that it&#x27;s a toolkit that serves as base for other developers, rather than just a slow app.<p>Finally, your flippant response to criticism gives the impression that you don&#x27;t understand or care about craftsmanship.<p>However, thanks for making the contribution. Look forward to trying your next major release.

why did you publish this on Saturday??? now i have no excuse to try to replace react-material...

This is really slick and fresh looking. Almost inspires me to build something with it

very neat, i am definitely going to be trying this out on a new side project

Not loading on safari ios 9

The text is garbled (on top of eachother) on safari ios.

Trying to load that site is slowing down my browser.

Is it possible to use this without React&#x2F;NPM?

Smooth as butter in safari on my iPhone se.

Very impressive! Keep up the good work.

Thanks for this I see a great value on this, you got my github star.

This is amazing!

This looks amazingly good and well thought through.

Renders and scrolls slow

I saw no favicon and closed this thing immediately.<p>Seriously guys, it&#x27;s 2016 and you still don&#x27;t have a favicon. Not having a favicon on your docs page is plain bad for a few reasons:<p>1. I have zero context about your page. If I don&#x27;t have that 20x20 square on my tab anchoring me to reality, my 2 second attention span will have made me forget where I am even before I load your page on my internet-connected toaster oven&#x27;s 7 segment display. Not. Cool.<p>2. No support for 7 segment or e-ink displays. WTF?? How am I supposed to use this for IoT applications, like my toaster oven[1] or my dishwasher.<p>3. This is how it shows up on my kindle: <a href="http:&#x2F;&#x2F;67.media.tumblr.com&#x2F;tumblr_lhw2rvgsnu1qzhofn.jpg" rel="nofollow">http:&#x2F;&#x2F;67.media.tumblr.com&#x2F;tumblr_lhw2rvgsnu1qzhofn.jpg</a> ARE YOU INCOMPETENT??<p>[1] See bullet point 1<p>[2] <a href="https:&#x2F;&#x2F;static.googleusercontent.com&#x2F;media&#x2F;research.google.com&#x2F;en&#x2F;&#x2F;archive&#x2F;mapreduce-osdi04.pdf" rel="nofollow">https:&#x2F;&#x2F;static.googleusercontent.com&#x2F;media&#x2F;research.google.c...</a><p>[3] <a href="http:&#x2F;&#x2F;jepsen.io&#x2F;" rel="nofollow">http:&#x2F;&#x2F;jepsen.io&#x2F;</a><p>[4] <a href="https:&#x2F;&#x2F;palantir.com&#x2F;spying-on-my-shit" rel="nofollow">https:&#x2F;&#x2F;palantir.com&#x2F;spying-on-my-shit</a>

Safe to say it sux.

Cool stuff

TBH, I expected more from what&#x27;s supposed to be a Palantir project. I mean come on, why is the site not mobile-first?