Intro

1. Introduction 2. Setup 3. Releases

Core Concepts

1. Theming & Design 2. Design Tokens 3. Media Queries 4. Animation 5. CSS in JS 6. Configuration

Guides

Forms Right to Left UI

Components

Packages

UI Components

Accordion Breadcrumbs Faqs InfoBanner Overlay

Hooks

Descendants Layout Scroll React utils

Other

Tracking Translations

Toggle theme

Configuration🔗

Apart from theming, VCC UI ships another context provider which is used for configuration. It can be used to configure custom rendering logic.

locale🔗

Some VCC UI features are language specific. By passing a locale to the ConfigProvider, Volvo Fonts will not be included for unsupported languages, and the theme direction will be automatically set.

import React from 'react';
import { ConfigProvider } from 'vcc-ui';

export const App = () => {
  const locale = getCurrentLocale();
  return (
    <ConfigProvider config={{ locale }}>
      <MyPage />
    </ConfigProvider>
  );
};

import React from 'react';
import { ConfigProvider } from 'vcc-ui';
export const App = () => {
  const locale = getCurrentLocale();
  return (
    <ConfigProvider config={{ locale }}>
      <MyPage />
    </ConfigProvider>
  );
};

linkComponent🔗

By default, every component accepting a href prop will render a respective <a> tag. However, many web frameworks, e.g. Next.js, provide a custom Link component that is used for client-side routing. Instead of wrapping every linkable component with that Link component, we can configure the linkComponent using the ConfigProvider.

import React from 'react';
import { ConfigProvider, Link } from 'vcc-ui';
import NextLink from 'next/link';

const config = {
  linkComponent: ({ children, href, ...linkProps }) => {
    // we only want to use next/link for internal links
    // external links are better served with an basic a tag
    if (typeof href === 'object' || href.indexOf('/') === 0) {
      return (
        <NextLink href={href}>
          <a {...linkProps}>{children}</a>
        </NextLink>
      );
    }

    return (
      <a href={href} {...linkProps}>
        {children}
      </a>
    );
  },
};

export const App = () => (
  <ConfigProvider config={config}>
    <Link href="/subpage">Go to sub page</Link>
  </ConfigProvider>
);

import React from 'react';
import { ConfigProvider, Link } from 'vcc-ui';
import NextLink from 'next/link';
const config = {
  linkComponent: ({ children, href, ...linkProps }) => {
    // we only want to use next/link for internal links
    // external links are better served with an basic a tag
    if (typeof href === 'object' || href.indexOf('/') === 0) {
      return (
        <NextLink href={href}>
          <a {...linkProps}>{children}</a>
        </NextLink>
      );
    }
    return (
      <a href={href} {...linkProps}>
        {children}
      </a>
    );
  },
};
export const App = () => (
  <ConfigProvider config={config}>
    <Link href="/subpage">Go to sub page</Link>
  </ConfigProvider>
);

Configuration
locale
linkComponent

Intro

Core Concepts

Guides

Components

Layout

Typography

Actions

Forms

Content

Imagery & Icons

Feedback Indicators