Cozy UI Reference

Cozy UI

Use this skill to build Cozy application interfaces with cozy-ui. Prefer this skill over generic React or Material-UI guidance when the task concerns Cozy apps, Cozy UI components, Cozy CSS utilities, or the Cozy theme.

Quick Start

import { Button, Alert } from 'cozy-ui/transpiled/react'
import { CozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'
import 'cozy-ui/transpiled/react/stylesheet.css'

<CozyTheme variant="light">
  <Alert severity="info">Ready</Alert>
  <Button label="Continue" />
</CozyTheme>

What This Skill Provides

• 89+ React components with examples and extracted props.
• CSS utility classes for spacing, typography, colors, layout, and component-specific classes.
• Cozy theming conventions built on Material-UI v4.
• Import patterns for cozy-ui/transpiled/react and cozy-ui/dist.

Quick Reference

Components

Read references/components.md when choosing a component, checking props, or looking for usage examples.

Common starting points:

• Buttons and actions: Button, Buttons, IconButton, ActionsMenu, ActionsBar.
• Forms: TextField, SelectBox, Checkbox, Radios, Switch, SearchBar, FileInput.
• Layout: Stack, Grid, Paper, Card, Container, Divider.
• Feedback: Alert, Banner, Snackbar, Spinner, Skeletons, ProgressionBanner.
• Dialogs and menus: CozyDialogs, Dialog, Menu, ActionsMenu.

CSS Utilities

Read references/css-classes.md when using utility classes or legacy CSS patterns.

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

@import 'cozy-ui/stylus/settings'
@import 'cozy-ui/stylus/mixins'

Theme

Wrap app UI with CozyTheme when the target app does not already provide it.

import { CozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'

<CozyTheme variant="light">
  <App />
</CozyTheme>

Workflow

1. Identify whether the task is component selection, CSS utility usage, theming, or implementation review.
2. Load only the needed reference file:
   • references/components.md for React components, imports, examples, and props.
   • references/css-classes.md for utility classes and Stylus/CSS usage.
3. Prefer cozy-ui exports over raw Material-UI components when a Cozy wrapper exists.
4. Preserve existing app conventions and imports; do not migrate import style unless required.
5. If adding or changing components inside cozy-ui itself, follow the repository README guidance for component development and tests.

Specific Tasks

• Choosing and composing Cozy UI components — references/components.md
• Checking component props and examples — references/components.md
• Applying spacing, typography, color, and utility classes — references/css-classes.md
• Using Cozy theme providers and variants — start with this file, then inspect component references when needed
• Reviewing Cozy UI usage in app code — check imports and component APIs against references/components.md

Installed Skill Layout

skills/cozy-ui-reference/
  SKILL.md
  references/
    components.md
    css-classes.md

Additional Resources

• GitHub Repository
• Styleguide
• Material-UI v4 Docs

Source: cozy/cozy-ui — distributed by TomeVault.