Supernova

Supernova is an open source design system developed by SuperAnnotate.\
This library contains a rich set of native Angular UI components developed using Supernova Design System.

Get Started

Supernova's components can be used in any project in Angular environment.

$3

Install package from npm: npm install @superannotate/supernova --save.

$3

Import Supernova Design System's styles in your project's styles.scss:
``scss
@import '~@superannotate/supernova/assets/styles';
`
Import the component modules you want to use in your app.module.ts file:
`typescript
import { AvatarModule, SidebarModule, ButtonModule } from '@superannotate/supernova';

@NgModule({
imports: [
AvatarModule,
SidebarModule,
ButtonModule
]
})
export class AppModule {}
`
Add import style in your project's angular.json under build -> options -> assets:
`json
{
"glob": "*/",
"input": "./node_modules/@superannotate/supernova/assets",
"output": "/assets/"
}
`
Use the components:
`angular2html

`

Development

Supernova is written as an Angular library.
It uses Storybook to showcase its UI components.

`
git clone https://github.com/superannotateai/supernova.git
npm install
npm run storybook
``
Browser will open components in Storybook automatically.

_NOTE:_ Notice we are using just the icon name(id) to reference it in all our components.
This works because we generate a sprite on every build consisting of svg files listed in source icons.
If you want to change/remove an icon or add your own icons, just do it in source icons, and run storybook again:
this will generate a new sprite.svg file and the icon's id would be the name you gave to your new file.

License

Supernova is developed under MIT license.

Demo

Coming soon!