Layout Nerdpacks

These nerdpacks serves as a boilerplate to developers building on the New Relic One platform. We want to make it as easy as possible to get started building a nerdpack so we created some boilerplate nerdpacks that come with a solid UI and layout out-of-the-box. In order to use one of these layout for your next project, following the “Getting started” instructions below and then replace the dummy content in nerdlet/index.js with your content.

Available Layouts (images are links to repos)

Each thumbnail below links to it’s respective repo.

Option%201 Option%202 Option%203 Option%204 Option%205 Option%206 Option%207 Option%208

What’s included?

  • JSX to implement this layout
  • CSS to improve the styling and provide some basic UX help
  • Utility classes for things like making an element full width or full height.


Since these nerdpacks are just a boilerplate for applications built on New Relic One, the best way to use them is to:

  1. Clone the repo you’re interested in whenever you’re ready to start a new project.
  2. Rename your Layout Nerdpack to something that makes more sense for your project. ( Nerdpack Layout - 3 column isn’t really a helpful description of your functionality :slight_smile:)
  3. The idea is that, since the code that determines the layout has already been written you can just replace the content inside of each section (toolbar, sidebar, primary-content) with the content that you have in mind for your project.


After you’ve cloned one of the Layout nerdpacks, check out this quick How to on populating a layout with your data.