Skip to content
/ nebular Public

💥 Customizable Angular UI Library based on Eva Design System 🌚✨Dark Mode

License

Notifications You must be signed in to change notification settings

akveo/nebular

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Nebular npm Build Status npm Dependency Status

Nebular is a great toolkit if you build Rich UI web-application based on Angular, and want to bootstrap your development using essential features out of the box. It provides you with a set of native Angular components, themeable components, authentication and security layers easily configurable for your API. At the same time, Nebular allows you to use it together with any other UI library you choose.

A Second of your time

Help us to make Nebular better!

Getting started

Documentation | ngx-admin demo | StackBlitz Seed Project

Installation

Angular CLI

Install Nebular with Angular CLI

ng add @nebular/theme

And that's it. Configuration will be done automatically.

If you want to have more control over setup process you may use manual setup guide.

Manual

  1. Install Nebular modules
npm install --save @nebular/theme @angular/cdk @angular/animations

Additionally you can install Auth and Security npm install --save @nebular/auth @nebular/security

  1. Register Nebular theme module into app.module:
import { RouterModule } from '@angular/router';
import { NbThemeModule } from '@nebular/theme';

@NgModule({
  imports: [
    RouterModule.forRoot([ ... ]), // Router is required by Nebular
    NbThemeModule.forRoot(),
  ]
})
export class AppModule { }
  1. Register theme styles
"styles": [
  "../node_modules/@nebular/theme/styles/prebuilt/default.css",
],
  1. Create a page with Nebular components
import { NbLayoutModule, NbButtonModule } from '@nebular/theme';

@NgModule({
  imports: [
    NbLayoutModule,
    NbButtonModule,
  ],
})
export class SomePageModule { }
@Component({
  template: `
    <nb-layout>
      <nb-layout-header fixed>Awesome Nebular</nb-layout-header>
      
      <nb-layout-column>
        <button nbButton>Hello World!</button>
      </nb-layout-column>
    </nb-layout>
  `,
})
export class SomePageComponent { }

That's it. Check Documentation for more details.

Starter Kits

  • ngx-admin - application based on Nebular modules with beautiful IOT components. Live Demo.
  • ngx-admin-starter - clean application based on Nebular modules with a limited number of additional dependencies.

Developer Utils

  • VSCode Extension - a Visual Studio Code snippets extension for Nebular components and directives.
  • Intellij Plugin - a Intellij (WebStorm, IDEA, etc) Live template plugin for Nebular components and directives.

License

MIT license.

BrowserStack

This project runs its tests on multiple desktop and mobile browsers using BrowserStack.

More from Akveo

  • Eva Icons - 480+ beautiful Open Source icons
  • ngx-admin - the best Angular admin template

How can I support the developers?

  • Star our GitHub repo ⭐
  • Create pull requests, submit bugs, suggest new features or documentation updates 🔧
  • Follow us on Twitter 🐾
  • Like our page on Facebook 👍

From Developers

Made with ❤️ by Akveo team. Follow us on Twitter to get the latest news first! We're always happy to receive your feedback!