Simple, Themeable, Customizable React UI library
Switch branches/tags
Clone or download
Latest commit 3c37765 Dec 14, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Update Node.js to v10.14 (#368) Nov 29, 2018
.github Update issue templates Jun 13, 2018
.storybook Fix styled-components types error (#382) Dec 14, 2018
.vscode v0.8 rename to @vital-ui/react-* (#190) Jun 20, 2018
@types v0.9.0 release (#287) Oct 12, 2018
assets Table and Playground packages (#154) Jun 12, 2018
examples v0.9.0 release (#287) Oct 12, 2018
packages v0.9.4 Dec 14, 2018
.babelrc Fix styled-components types error (#382) Dec 14, 2018
.editorconfig Separate storyshots (#155) Jun 7, 2018
.gitignore v0.9.0 release (#287) Oct 12, 2018
.npmignore Table and Playground packages (#154) Jun 12, 2018
.prettierignore ListItem and theme update (#250) Jul 30, 2018
.prettierrc Table and Playground packages (#154) Jun 12, 2018
.yarnrc Setup CI (#146) Jun 5, 2018
CHANGELOG.md Update Changelog Dec 14, 2018
CODE_OF_CONDUCT.md Update CODE_OF_CONDUCT.md 🚗 Apr 23, 2018
CONTRIBUTING.md Form Select integrate with downshift (#219) Jul 5, 2018
Dockerfile Flow -> Typescript(#268) Aug 26, 2018
LICENSE Create LICENSE Mar 29, 2018
README.md Update README.md Oct 19, 2018
jest.config.js Fix styled-components types error (#382) Dec 14, 2018
jest.setup.js Field input update (#325) Oct 23, 2018
lerna.json v0.9.4 Dec 14, 2018
now.json v0.9.0 release (#287) Oct 12, 2018
package.json Fix styled-components types error (#382) Dec 14, 2018
renovate.json Update renovate.json Jun 15, 2018
rollup.config.js v0.8 rename to @vital-ui/react-* (#190) Jun 20, 2018
tsconfig.json Fix styled-components types error (#382) Dec 14, 2018
tsconfig.storybook.json v0.9.0 release (#287) Oct 12, 2018
tslint.json v0.9.0 release (#287) Oct 12, 2018
yarn.lock Fix styled-components types error (#382) Dec 14, 2018

README.md

Vital UI Kit React

Simple, Themeable, Customizable React UI library
View Storybook »
Look for css version? »

CircleCI code style: prettier FOSSA Status PRs Welcome

Intro

Vital UI Kit provide many UI components which are built for Vital Cloud Services Family. Vital UI Kit React encapsulated css style and components in order to achieve these goals:

  • Themeable, build with styled-components. 💅
  • Compound style components allows hight flexibility.
  • Consistent development environment, by encapsulating internal UI style.
  • Easy to use, provide detailed API.

Demo

Speed

An example of Offical Document contains all Vital UI Kit components

View Demo

Bit

Play them on BitSrc

Getting Started

Installation

# Install peer denpendcy, we use styled-components

# yarn
yarn add @vital-ui/react styled-components

# npm
npm i --save @vital-ui/react styled-components

## or install individual packages
yarn add @vital-ui/react-avatar
// VitalProvider contains default theme and icon, you can override it.
import { ThemeProvier, Button } from '@vital-ui/react' // You can use `ThemeProvider` by styled-components, or @vital-ui/react-theme

// recommend importing the global reset style.
import { gloablStyle } from '@vital-ui/react';
import { createGlobalStyle } from 'styled-components'


const GlobalStyle = createGlobalStyle`
  ${gloablStyle.linkStyle};
  ${gloablStyle.reset};
  ${gloablStyle.vitalTypographyStyle};
  ${gloablStyle.robotoFontFamily};
`;

/* ... */
render() {
  return (
    <ThemeProvider theme={YOUR_CUSTOM_THEME}>
      <GlobalStyle />
      <Button>Vital 💜 React!</Button>
    </ThemeProvider>
  )
}

Contributing

Make sure read our contributing guide to learn about our development process.

Roadmap

  • docs
  • Table(expand content)
  • Calendar