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!
Check the styleguide to see all the variables, mixins, classes, utilities and how to use them with only CSS classes.
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
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:
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
git clone email@example.com:cozy/cozy-ui.git cd cozy-ui yarn link yarn transpile --watch # Launch transpilation
Then in your application folder, you can link to your local Cozy UI
yarn link cozy-ui yarn watch
All your modifications 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 firstname.lastname@example.org:USERNAME/cozy-ui.git
UI regression testing¶
cozy-ui are showcased with React Styleguidist. To prevent UI regressions,
for each PR, each component is screenshotted and compared to the master version to find any
regression (thanks Argos !).
If your app uses React Styleguidist,
rsg-screenshots, a CLI tool to take
screenshots of your components (uses Puppeteer under the hood).
$ yarn add cozy-ui $ # The rsg-screenshots binary is now installed $ yarn build:doc:react # Build our styleguide, the output directory is docs/react $ rsg-screenshots --screenshot-dir screenshots/ --styleguide-dir docs/react # Each component in the styleguide will be screenshotted and saved inside the # screenshots/ directory
See our travis configuration for more information.
Cozy UI is developed by Cozy Cloud and distributed under the AGPL-3.0 license.
What is Cozy?¶
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: