Skip to content
Volvo

Migrating from VCC UI

Edit on GitHub

@volvo-cars/css is the direct replacement for VCC UI and is designed to work alongside it, so you can adopt it incrementally.

Decision framework

Section titled “Decision framework”

Use the following guidelines to decide how to handle VCC UI usage in your codebase:

🟢 All new development should use @volvo-cars/css

As of v1.0, teams should not implement any new components or features using VCC UI.

🟠 Existing features may keep using VCC UI — but major changes should use @volvo-cars/css

@volvo-cars/css is designed to work alongside VCC UI. Whenever you make a change to an existing VCC UI component, that change should be made with @volvo-cars/css going forward. If the component is expected to live long term, consider migrating it entirely. Components using Fela, including those that use VCC UI components, don’t interact well with React Server Components and may prevent you from using the latest Next.js features.

🔴 Near end-of-life apps and pages can stay on VCC UI

Some older applications and pages are no longer actively worked on or promoted. It often wouldn’t make commercial sense to migrate those.

Migration approach

Section titled “Migration approach”
  1. Install @volvo-cars/css alongside VCC UI. See the installation guide.
  2. Migrate component by component. Start with the simplest, most isolated components and work outward.
  3. Use the flight rules for guidance on handling visual differences and edge cases.
  4. Enable linting. Add @volvo-cars/eslint-plugin-css with the deprecated-class rule to catch issues early.
  5. Remove VCC UI from a page or application once all its components have been migrated.
Section titled “Related guides”