Skip to content

cozy/cozy-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

a6e2250 · May 15, 2019
Apr 18, 2018
May 10, 2019
Mar 20, 2018
May 13, 2019
Feb 12, 2019
Apr 9, 2018
May 14, 2019
May 7, 2019
May 14, 2019
Oct 8, 2018
Dec 14, 2016
Dec 18, 2018
Nov 20, 2018
Dec 18, 2018
Mar 15, 2019
Nov 28, 2018
Jun 5, 2018
Jun 18, 2018
Apr 2, 2019
Feb 2, 2017
May 13, 2019
Nov 6, 2018
May 15, 2019
Jun 16, 2018
Feb 12, 2019
Feb 11, 2019
Jun 16, 2018
Apr 23, 2019
May 15, 2019

Repository files navigation

Styleguidist Styleguide Travis build status shield NPM release version shield Github Release version shield NPM Licence shield

Cozy UI

CSS classes and React components designed to build Cozy apps.

If you plan to build a webapp to run on Cozy, you'll probably want to use a simple and elegant solution to build your interfaces without the mess of dealing with complex markup and CSS. Then Cozy UI is here for you!

CSS Styleguide

Check the styleguide to see all the variables, mixins, classes, utilities and how to use them with only CSS classes.

React components

Check out UI components to see how to use ready made (p)React components.

Usage

As a Components library

Add Cozy UI to a dependency to your project.

npm install cozy-ui

If you use the transpiled components (from cozy-ui/transpiled/react), you need to import the stylesheet (once):

import Button from 'cozy-ui/transpiled/react/Button'
import 'cozy-ui/transpiled/react/stylesheet.css'

<Button />

You're now ready to use Cozy UI's (p)React components

As a vanilla CSS library

The entire library is also available as a good ol’ CSS library. You can simply add it to your app by linking the distributed minified file.

<link media="all" rel="stylesheet" href=“cozy-ui/dist/cozy-ui.min.css" />

Develop on Cozy UI

If you want to customize or improve a Cozy UI Component, you need to clone a local version of the library, and declare it as a local symlink with yarn link.

git clone [email protected]:cozy/cozy-ui.git
cd cozy-ui
yarn link

Then in your application folder, you can link to your local Cozy UI

yarn link cozy-ui
yarn watch

All your modification in your local Cozy UI will now be visible in your application!

When sending a PR, if your changes have graphic impacts, it is useful for the reviewers if you have deployed a version of the styleguidist containing your changes to your repository.

yarn build:doc:react
yarn deploy:doc --repo [email protected]:USERNAME/cozy-ui.git

License

Cozy UI is developed by Cozy Cloud and distributed under the AGPL-3.0 license.

What is Cozy?

Cozy Logo

Cozy is a platform that brings all your web services in the same private space. With it, your web apps and your devices can share data easily, providing you with a new experience. You can install Cozy on your own hardware where no one profiles you.

Community

You can reach the Cozy Community by: