unicial-ui
Advanced tools
This is basically semantic-ui-react themed with Unicial's look & feel + some of our own components
See: ui.unicial.org
Install it:
npm install --save unicial-ui
Import Unicial UI's styles in your App's entry point
import 'unicial-ui/lib/styles.css'
Now you can use Unicial UI's components
import React from 'react'
import { Button } from 'unicial-ui'
export class MyApp extends React.Component {
render() {
return <Button>Sabe</Button>
}
}
You can also use unicial-ui as a CSS framework just by adding this tag in your <head>:
<link href="https://ui.unicial.org/styles.css" rel="stylesheet" />
And then using Semantic UI classes like this:
<button class="ui button">Sabe</button>
🏌
You can import just the essential component and reduce the size of your bundles, like this:
// import css
import 'semantic-ui-css/semantic.min.css'
import 'balloon-css/balloon.min.css'
import 'unicial-ui/dist/themes/base-theme.css'
import 'unicial-ui/dist/themes/alternative/light-theme.css'
// or import 'unicial-ui/dist/themes/alternative/dark-theme.css'
// Then import just the components you will use
import Grid from 'semantic-ui-react/dist/commonjs/collections/Grid/Grid'
import { Button } from 'unicial-ui/dist/components/Button/Button'
import { Card } from 'unicial-ui/dist/components/Card/Card'
You can use one of our alternative themes by importing in after Unicial UI's styles, like this:
import 'unicial-ui/lib/styles.css'
import 'unicial-ui/lib/dark-theme.css'
Or you can create your own theme like this:
/* my-theme.css */
:root {
/* global */
--background: #ffffff;
--danger: #ffa900;
--error: #ff0000;
/* buttons */
--primary: #ff2d55;
--secondary: #f3f2f5;
--primary-hover: #ff3d61;
--secondary-hover: #ecebed;
/* on modals */
--secondary-on-modal: #f3f2f5;
--secondary-on-modal-hover: #ecebed;
--card-on-modal: #ffffff;
/* text */
--text: #16141a;
--secondary-text: #676370;
--text-on-primary: #ffffff;
--text-on-secondary: #16141a;
/* ui */
--divider: #67637033;
--dropdown: #ffffff;
--dropdown-hover: #f3f2f5;
--popup: #16141a;
--popup-text: #ffffff;
--navbar-popup: #ffffff;
--navbar-popup-hover: #f3f2f5;
--card: #ffffff;
--outline: 1px solid #00000005;
--toast: #16141a;
--toast-text: #ffffff;
--modal: #ffffff;
--dimmer: #ffffffdd;
/* shadows */
--shadow-1: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
--shadow-2: 0px 10px 20px 0px rgba(0, 0, 0, 0.12);
--shadow-3: 0px 16px 32px 0px rgba(0, 0, 0, 0.16);
--shadow-color-1: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
--shadow-color-2: 0px 10px 20px 0px rgba(0, 0, 0, 0.2);
--shadow-color-3: 0px 16px 32px 0px rgba(0, 0, 0, 0.24);
/* svgs */
--brightness: brightness(0.1); /* black svgs */
}
Install dependencies and start Storybook
$ npm install
$ npm start
We deploy automatically to ui.unicial.org and release a new version via semantic-release
FAQs
Unicial's UI components and styles
The npm package unicial-ui receives a total of 1 weekly downloads. As such, unicial-ui popularity was classified as not popular.
We found that unicial-ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.