Neutralize Pesky Miscreants
    Wondering what’s next for npm?Check out our public roadmap! »


    6.1.2 • Public • Published

    Welcome to Groundhog - CSS components for Dynatrace

    Codeship status npm version

    What is Groundhog

    This is Groundhog, a CSS library for all Dynatrace web entities. Think Bootstrap, but pretty, modern and fast.

    We created Groundhog to unify all Dynatrace web entities, regardless of the underlying technology. Use it to fuel your Blogs, custom dashboards, Wikis, etc. If you want to see what's possible with Groundhog, check out our showcase. We used some, if not all Groundhog components to make them look like being one and the same.

    Groundhog is designed after the contents from our asset library, and features up to date implementations of the components there. Additionally, we created extra modules that come in handy when working with websites and web applications: Layouts, lightboxes, etc.

    If you work in one of our GWT web applications like Ruxit or AppMon, please use the Dynatrace widget library instead. This project is just there to be a guideline or a precursor to widgets that find their way into GWT.

    How to get Groundhog

    You have multiple options to get Groundhog:

    Use via CDN

    We uploaded everything to our Dynatrace CDN, use it like that:

    CSS goes in the <head>

    <link rel="stylesheet" href="//" />

    JS goes at the end of the <body> tag of your page:

    ... all your content
    <script type="text/javascript" src="//"></script>

    VERSIONNUMBER is the version that you want to install. Check the website for more information.

    Install via npm

    Groundhog is available on npm:

    npm install --save @dynatrace/groundhog

    Custom build

    If you want to have a more advanced build, check us out on GitHub and do a plain build:

    npm install
    npm run build

    You will then find compiled stylesheets for all the components that we got.


    You can also chime in and develop with us!

    npm install
    npm run dev

    Font and Assets

    The font we're using is called Bernina. You can find downloads for this font and usage terms in our asset library. If you can't use Bernina for some reason, the open source alternative "Open Sans" works as well. Make sure you get the 300 and 400 font styles.

    Same goes for the iconography used with Groundhog. You can find them in the asset package available in the asset library.

    One more thing!

    Groundhog is also built with Groundhog. Who would have thought?


    This project is maintained by:

    With contributions by:




    npm i @dynatrace/groundhog

    DownloadsWeekly Downloads






    Unpacked Size

    480 kB

    Total Files


    Last publish


    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar