• Stars
    star
    829
  • Rank 55,018 (Top 2 %)
  • Language
    HTML
  • License
    MIT License
  • Created over 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Neumorphism inspired UI Kit: web components, sections and pages in neumorphic style built with Bootstrap CSS Framework

Neumorphism UI Tweet

version license

Neumorphism UI Preview

Start developing neumorphic web applications and pages using Neumorphism UI which makes use of the neumorphic design trend. It features over 200 individual components and 5 example pages.

Neumorphic components

All components are perfectly in compliance with the neumorphism design trend making use of the specific shadow and coloring attributes. Neumorphism UI also comes with the shadow inset style add-on.

Check out all components here.

Example pages

Neumorphism UI comes with 13 example pages including an about, pricing, contact, log in and register pages. You can use these example pages to quickly set up a working website in no time.

Full documentation

Each component, plugin and the general workflow is well documented. Check out the online documentation for Neumorphism UI.

Workflow

This product is built using the following widely used technologies:

  • Most popular CSS Framework Bootstrap
  • Productive workflow tool Gulp
  • Awesome CSS preprocessor Sass

Table of Contents

Demo

Components About Contact
Components About page Contact page
Login Register Documentation
Login page Register page Documentation

Quick start

  1. Download from Themesberg
  2. Download the project's zip
  3. Make sure you have Node locally installed.
  4. Download Gulp Command Line Interface to be able to use gulp in your Terminal.
npm install gulp-cli -g
  1. After installing Gulp, run npm install in the main neumorphism/ folder to download all the project dependencies. You'll find them in the node_modules/ folder.
npm install
  1. Run gulp in the neumorphism/ folder to serve the project files using BrowserSync. Running gulp will compile the theme and open /index.html in your main browser.
gulp

While the gulp command is running, files in the assets/scss/, assets/js/ and components/ folders will be monitored for changes. Files from the assets/scss/ folder will generate injected CSS.

Hit CTRL+C to terminate the gulp command. This will stop the local server from running.

Theme without Sass, Gulp or Npm

If you'd like to get a version of our theme without Sass, Gulp or Npm, we've got you covered. Run the following command:

gulp build:dev

This will generate a folder html&css which will have unminified CSS, Html and Javascript.

Minified version

If you'd like to compile the code and get a minified version of the HTML and CSS just run the following Gulp command:

gulp build:dist

This will generate a folder dist which will have minified CSS, Html and Javascript.

Documentation

The documentation for Neumorphism UI is hosted on our website.

File Structure

Within the download you'll find the following directories and files:

Neumorphism UI
.
├── README.md
├── gulpfile.js
├── neumorphism-ui.zip
├── package-lock.json
├── package.json
└── src
    ├── assets
    │   ├── img
    │   │   ├── blog
    │   │   ├── brand
    │   │   ├── carousel
    │   │   ├── checker_logo.png
    │   │   ├── clients
    │   │   ├── favicon
    │   │   ├── illustrations
    │   │   ├── macbook-mockup.png
    │   │   ├── megamenu-image.jpg
    │   │   ├── presentation
    │   │   ├── presentation-mockup.png
    │   │   ├── presentation-sections
    │   │   ├── sections
    │   │   ├── shop
    │   │   ├── signature.svg
    │   │   ├── team
    │   │   ├── themesberg.svg
    │   │   └── wavelogo.svg
    │   └── js
    │       └── neumorphism.js
    ├── html
    │   ├── components
    │   │   ├── accordions.html
    │   │   ├── alerts.html
    │   │   ├── all.html
    │   │   ├── badges.html
    │   │   ├── bootstrap-carousels.html
    │   │   ├── breadcrumbs.html
    │   │   ├── buttons.html
    │   │   ├── cards.html
    │   │   ├── forms.html
    │   │   ├── modals.html
    │   │   ├── navs.html
    │   │   ├── pagination.html
    │   │   ├── popovers.html
    │   │   ├── progress-bars.html
    │   │   ├── steps.html
    │   │   ├── tables.html
    │   │   ├── tabs.html
    │   │   ├── toasts.html
    │   │   ├── tooltips.html
    │   │   ├── typography.html
    │   │   └── widgets.html
    │   ├── pages
    │   │   ├── about.html
    │   │   ├── contact.html
    │   │   ├── pricing.html
    │   │   ├── sign-in.html
    │   │   └── sign-up.html
    ├── index.html
    ├── partials
    │   ├── _analytics.html
    │   ├── _footer.html
    │   ├── _head.html
    │   ├── _navigation.html
    │   ├── _pages-preview.html
    │   ├── _pricing.html
    │   ├── _scripts.html
    │   └── components
    │       ├── _accordions.html
    │       ├── _alerts.html
    │       ├── _badges.html
    │       ├── _bootstrap-carousels.html
    │       ├── _breadcrumbs.html
    │       ├── _buttons.html
    │       ├── _cards.html
    │       ├── _forms.html
    │       ├── _modals.html
    │       ├── _navs.html
    │       ├── _pagination.html
    │       ├── _popovers.html
    │       ├── _progress-bars.html
    │       ├── _steps.html
    │       ├── _tables.html
    │       ├── _tabs.html
    │       ├── _toasts.html
    │       ├── _tooltips.html
    │       ├── _typography.html
    └── scss
        ├── bootstrap
        │   ├── _alert.scss
        │   ├── _badge.scss
        │   ├── _breadcrumb.scss
        │   ├── _button-group.scss
        │   ├── _buttons.scss
        │   ├── _card.scss
        │   ├── _carousel.scss
        │   ├── _close.scss
        │   ├── _code.scss
        │   ├── _custom-forms.scss
        │   ├── _dropdown.scss
        │   ├── _forms.scss
        │   ├── _functions.scss
        │   ├── _grid.scss
        │   ├── _images.scss
        │   ├── _input-group.scss
        │   ├── _jumbotron.scss
        │   ├── _list-group.scss
        │   ├── _media.scss
        │   ├── _mixins.scss
        │   ├── _modal.scss
        │   ├── _nav.scss
        │   ├── _navbar.scss
        │   ├── _pagination.scss
        │   ├── _popover.scss
        │   ├── _print.scss
        │   ├── _progress.scss
        │   ├── _reboot.scss
        │   ├── _root.scss
        │   ├── _spinners.scss
        │   ├── _tables.scss
        │   ├── _toasts.scss
        │   ├── _tooltip.scss
        │   ├── _transitions.scss
        │   ├── _type.scss
        │   ├── _utilities.scss
        │   ├── _variables.scss
        │   ├── bootstrap-grid.scss
        │   ├── bootstrap-reboot.scss
        │   ├── bootstrap.scss
        │   ├── mixins
        │   ├── utilities
        │   └── vendor
        ├── neumorphism
        │   ├── _components.scss
        │   ├── _functions.scss
        │   ├── _layout.scss
        │   ├── _mixins.scss
        │   ├── _reboot.scss
        │   ├── _utilities.scss
        │   ├── _variables.scss
        │   ├── _vendor.scss
        │   ├── components
        │   ├── layout
        │   ├── mixins
        │   ├── utilities
        │   └── vendor
        └── neumorphism.scss

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

Reporting Issues

We use GitHub Issues as the official bug tracker for Neumorphism UI. Here are some advices for our users that want to report an issue:

  1. Make sure that you are using the latest version of Neumorphism UI. Check the CHANGELOG on our website.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

Useful Links

Social Media

Twitter: https://twitter.com/themesberg

Facebook: https://www.facebook.com/themesberg/

Dribbble: https://dribbble.com/themesberg

Instagram: https://www.instagram.com/themesberg/

More Repositories

1

flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS
HTML
6,463
star
2

volt-bootstrap-5-dashboard

Free and open source Bootstrap 5 Admin Dashboard Template with vanilla Javascript
HTML
2,567
star
3

flowbite-react

Official React components built for Flowbite and Tailwind CSS
TypeScript
1,872
star
4

flowbite-svelte

Official Svelte components built for Flowbite and Tailwind CSS
Svelte
1,722
star
5

flowbite-admin-dashboard

Free and open-source admin dashboard template built with Tailwind CSS and Flowbite
HTML
1,348
star
6

volt-react-dashboard

Free and open source React.js admin dashboard template and UI library based on Bootstrap 5
JavaScript
858
star
7

tailwind-dashboard-windster

Free and open-source admin dashboard interface built on top of Tailwind CSS and Flowbite
HTML
837
star
8

flowbite-vue

Official Vue 3 components built for Flowbite and Tailwind CSS
Vue
768
star
9

landwind

Responsive and clean landing page built with Tailwind CSS and Flowbite
HTML
602
star
10

flowbite-astro-admin-dashboard

Open-source admin dashboard template built with Astro, Flowbite, and Tailwind CSS
Astro
544
star
11

pixel-bootstrap-ui-kit

Pixel UI Kit - Free and open source Bootstrap 5 UI Kit without jQuery
HTML
530
star
12

windows-95-ui-kit

💾 Windows 95 UI Kit made with Bootstrap 4 components
CSS
464
star
13

glass-ui

CSS UI library based on the glassmorphism design specifications
309
star
14

volt-laravel-dashboard

Free and open-source Laravel admin dashboard interface built with Livewire & Alpine.js based on Bootstrap 5
Blade
283
star
15

flowbite-angular

Official Angular components built for Flowbite and Tailwind CSS
TypeScript
182
star
16

simple-bootstrap-5-dashboard

Simple Bootstrap 5 Admin Dashboard Template
HTML
164
star
17

swipe-one-page-bootstrap-5

👆 Swipe - One Page Bootstrap 5 Template for Mobile Applications
SCSS
162
star
18

flowbite-icons

Free and open-source collection of SVG icons built for Flowbite and Tailwind CSS
151
star
19

flowbite-svelte-admin-dashboard

Free and open-source admin dashboard template built with Flowbite, Svelte, and Tailwind CSS
Svelte
95
star
20

tailwind-landing-page

A responsive landing page built with Tailwind CSS and Flowbite Blocks
HTML
90
star
21

flow-ui

Accessibility oriented design system for developing fast and powerful web interfaces.
89
star
22

flowbite-react-admin-dashboard

A free and open-source admin dashboard interface built with Flowbite, React, and Tailwind CSS
TypeScript
66
star
23

tailwind-figma-ui-kit

FlowBite is a free and open-source set of UI components and pages in Figma built for Tailwind CSS
63
star
24

flowbite-svelte-blocks

Flowbite-Svelte-Blocks components
Svelte
63
star
25

tailwind-flask-starter

Tailwind CSS and Flask starter project with Flowbite included
HTML
52
star
26

tailwind-vue-starter

A free and open-source starter project to help you get started with the core Flowbite Library components and Vue 3
Vue
47
star
27

flowbite-svelte-icons

Official library for the free and open-source collection of over 430+ SVG icons for Flowbite and Svelte
Svelte
41
star
28

tailwind-nuxt-starter

A free and open-source starter project to help you get started with the core Flowbite Library components and Nuxt.js
Vue
39
star
29

gpt-3-tailwindcss

GPT-3 Tailwind CSS Code Generator
37
star
30

flowbite-blazor

Official open-source UI component library for Blazor (.NET), Flowbite and Tailwind CSS
HTML
32
star
31

tailwind-phoenix-starter

Free and open-source starter kit for Phoenix (Elixir), Tailwind CSS and Flowbite
HTML
29
star
32

tailwind-astro-starter

Free and open-source starter project to help you get started with Astro, Tailwind CSS and Flowbite
Astro
23
star
33

flowbite-laravel

PHP
19
star
34

tailwind-css-tutorial

Tailwind CSS Tutorial Project Files
CSS
19
star
35

tailwind-typescript-starter

A free and open-source starter kit that helps you get started with Tailwind CSS, TypeScript and Flowbite
TypeScript
18
star
36

figma-admin-dashboard-template

Free and open-source Figma Admin Dashboard template
16
star
37

tailwind-blazor-starter

Open-source project to get you started with Tailwind CSS, Blazor, and the Flowbite UI components
HTML
14
star
38

simple-gulp-bootstrap-sass-browsersync-boilerplate

Files for the Gulp 4, Bootstrap, Sass and BrowserSync setup tutorial on Themesberg
CSS
14
star
39

bootstrap-5-tutorial

Bootstrap 5 tutorial with Gulp, Sass, BrowserSync, and Vanilla JS
HTML
13
star
40

tailwind-symfony-starter

Free and open-source starter kit for Symfony (PHP), Tailwind CSS and Flowbite
Twig
13
star
41

flowbite-react-icons

Flowbite React Icon library is the official collection of SVG icons, provided freely and as open-source
TypeScript
8
star
42

tailwind-angular-starter

Free and open-source starter project to help you get started with Angular, Tailwind CSS and the Flowbite UI components
HTML
8
star
43

flowbite-snippets

Code snippets from the Flowbite UI component library that you can use inside VS Code
JavaScript
7
star
44

tailwind-solidjs-starter

Free and open-source starter project for SolidJS, Tailwind CSS and Flowbite
JavaScript
6
star
45

th-volt-pro-laravel-admin-dashboard

Fullstack tool featuring Laravel CRUDs, hundreds of UI components and dozens of example pages.
6
star
46

pixel-pro-bootstrap-ui-kit

Official public repository for Pixel Pro Bootstrap UI Kit
6
star
47

flowbite-blade-icons

Official collection of Flowbite SVG icons in Blade
PHP
6
star
48

tailwind-qwik-starter

Open-source starter project for Qwik, Tailwind CSS, and Flowbite
TypeScript
3
star
49

tailwind-gatsby-starter

Free and open-source starter project for Gatsby, Tailwind CSS and Flowbite
JavaScript
3
star
50

flowbite-nuxt-module

Open-source module for Nuxt with auto import for the Flowbite Vue library
TypeScript
3
star
51

th-neumorphism-ui-pro

Neumorphism inspired premium Bootstrap UI Kit
2
star
52

tailwind-remix-starter

Free and open-source starter kit that helps you get started with Tailwind CSS, Remix and Flowbite React
CSS
2
star
53

flowbite-express

Flowbite-Express
EJS
2
star
54

flowbite-phoenix

Official Flowbite UI components built for the Phoenix framework based on Tailwind CSS
Elixir
1
star
55

.github

Ecosystem of open-source projects, libraries and tools built by the team behind Flowbite
1
star
56

flowbite-vue-icons

Official library for the free and open-source collection of over 430+ SVG icons for Flowbite and Vue
1
star