Skip to content
React components and CSS styles for Cozy apps
JavaScript CSS Shell
Branch: master
Clone or download
drazik chore: Don't specify viewport for screenshots (#1164)
chore: Don't specify viewport for screenshots
Latest commit 5dd8767 Sep 19, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github feat: Configure automerge Aug 30, 2019
assets feat: Add keychain icon Sep 10, 2019
codemods chore: Add new icons codemods Jun 21, 2019
docs fix: Import utils inside styleguide Sep 18, 2019
examples feat: 🔧 Use babel.config.js + improve it Feb 12, 2019
loaders fix: fill strip loader lowercase Apr 9, 2018
react fix: Do not put the paleGrey class if important is set Sep 18, 2019
scripts chore: Add delay between navigation and screenshot Sep 19, 2019
stylus feat: Add stack utility classes Sep 18, 2019
test refactor: Mv testFromStyleguidist out of src directory Aug 2, 2019
.editorconfig [fix] ensure stylus indent Dec 14, 2016
.eslintignore Revert "Merge pull request #729 from cozy/refacto/theme" Dec 18, 2018
.gitignore feat: Take screenshots via Puppeteer and upload them to ArgosCI Sep 17, 2019
.npmignore fix: Do not ship postcss.config.js Aug 28, 2019
.stylintrc refactor: Button & Input sizes placeholder Nov 28, 2018
.travis.yml feat: Take screenshots via Puppeteer and upload them to ArgosCI Sep 17, 2019
LICENSE [chore] Enable linting on travis (#36) Feb 2, 2017
babel.config.js feat: Use package paths in transpiled Aug 2, 2019
index.js fix: Icon use Sprite in styleguidist Nov 6, 2018
package.json fix: Move puppeteer dep to dev dep Sep 18, 2019
parser-preset.js 🔧 chore(semantic-release): allow emoji prefix in commit messages Jun 16, 2018
postcss.config.js fix: Use browserslist-config-cozy instead of custom autoprefixer config Jul 26, 2019
preprocess.js feat: 🔧 Upgrade some deps + add postcss and cssnano Feb 11, 2019
release.config.js 🔧 chore(semantic-release): allow emoji prefix in commit messages Jun 16, 2018
renovate.json chore: Switch to cozy-libs renovate config Aug 30, 2019
yarn.lock feat: Take screenshots via Puppeteer and upload them to ArgosCI Sep 17, 2019

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.


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

Utility classes

React components only come with the needed style, nothing more, but you may need some more utility classes to build your apps.

To do so you have at your disposal a special CSS build cozy-ui.utils.min.css that you can add like this:

import 'cozy-ui/dist/cozy-ui.utils.min.css'

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
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


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.


You can reach the Cozy Community by:

You can’t perform that action at this time.