Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

NOW-UI for Hugo

Creative Tim adapted the popular Invision UI Kit to HTML. cboettig brings it to Hugo. MIT Licensed.

Live preview.


  • Built on Boostrap v4, making it easy to adapt and extend using the latest version of the wildly popular Bootstrap CSS and JS tools.

  • Responsive menu collapses into a side-drawer style navigation on smaller devices. Transparent navigation bar becomes solid on scroll.

  • Adjust theme colors simply by modifying the static/sass/now-ui-kit/_variables.scss and recompiling CSS with sass. Hugo will then re-compile the CSS from SASS files automatically (see #22).

  • Adjust theme tint by setting the tint parameter. The theme recogonizes the following tints: orange, red, yellow, blue, green, with orange as the default.

  • Example includes three free MIT licensed templates and icons.

For more details, see the preview pages.


Full Width Image

{{%/* image-fullwidth src="images/file.jpg" class="" */%}}

Image float left

{{%/* image-floatleft src="file.jpg" class="animate left" */%}}

Image float right

{{%/* image-floatright src="file.jpg" class="animate right" */%}}

Side by side images

{{%/* image-sidebyside src="images/file.jpg" class="animate left" */%}}

{{%/* image-sidebyside src="images/file.jpg" class="animate left" */%}}


Include the following in your frontmatter:

- src: images/IMG_5504slide.jpg
  name: "slide-1"
- src: images/IMG_5503.jpg
  name: "slide-2"
- src: images/IMG_5500.jpg
  name: "slide-3"

Then just add the shortcode where you want the carousel to appear.

{{%/* carousel title="optional" */%}}


Wide display menu

Menu collapsed on smaller display

Side-drawer menu open


via Git

If you already use your Hugo project as a git repository, it is a better practice to use a theme as a submodule instead of using a git repository inside another git repository.

at the root of your hugo project : git submodule add 'the source' 'the destination'
such as an example : git submodule add themes/hugo-now-ui

If your Hugo project is not a git repository then you simply execute git clone themes/hugo-now-ui

Cut and past way

As you may notice Github offer you to download a zip file
Simply download it and extract the content inside ./themes/
You may wish to rename the directory from hugo-now-ui-master to hugo-now-ui


It is a best practice to override a file rather than modify it. This helps you easily update Hugo and the theme without loosing your customizations. To learn more see the Hugo documentation on customizing Hugo themes

You can’t perform that action at this time.