Skip to main content

Community components

latest

Prerequisites​

In order for the imports to work correctly please ensure you are using typescript 4.7 or later for typescript projects, or Node 12 or later for non typescript projects.

For typescript projects make sure that you have the moduleResolution set to either nodenext or bundler in your tsconfig.

{
  "compilerOptions": {
    "moduleResolution": "nodenext"
  }
}

Installation​

Arc community components support multiple themes, below are examples of how to install the correct packages.

npm:

$ npm install @arc-ui/components @arc-ui/community-components  @arc-ui/theme

pnpm:

$ pnpm install @arc-ui/components @arc-ui/community-components  @arc-ui/theme

Configuration​

CSS​

Include Arc component styles, Community component styles and the theme styles in your application. Ensure they are only included once, and available everywhere.

Here's an example for the BT Enterprise theme:

import "@arc-ui/themes/lib/bt-enterprise.css";
import "@arc-ui/components/lib/styles.css"; // Arc component styles
import "@arc-ui/community-components/styles.css"; // Arc community styles

By incorporating these theme-specific imports, you ensure that your application adopts the visual styles and fonts and icons associated with each theme.

How themes work​

There is a single css file required per theme. The theme import would look like the following e.g @arc-ui/themes/lib/bt-enterprise.css

each of the themes are wrapped in a class which is controlled by the <Theme /> component. This is needed to implement a theme and will also allow you to have multiples theme at the same time.

Global Theme​

Include Theme once for your whole application or site. This is beneficial when you want a uniform theme across your entire project.

For example, to include the BT Enterprise theme using Next.js:

// pages/_document.js

import { Theme } from "@arc-ui/components/Theme";
import Document, { Head, Html, Main, NextScript } from "next/document";

import "@arc-ui/themes/lib/bt-enterprise.css";

import "@arc-ui/components/lib/styles.css"; // Arc component styles
import "@arc-ui/community-components/styles.css"; // Arc community styles

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Theme theme="bt-enterprise">
            <Main />
          </Theme>

          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Local Theme​

Include Theme selectively throughout your application to apply different themes to specific sections or components.

import { Theme, Heading, Text } from "@arc-ui/components";

import { Footer, Header, Widget } from "../components";

export default function Home() {
  return (
    <>
      <Header />

      <Theme theme="bt-enterprise">
        <Heading level="1">Arc area</Heading>
        <Text>This is Arc text</Text>
      </Theme>

      <Widget />

      <Theme theme="ee">
        <Heading level="2">Another Arc area</Heading>
        <Text>Some more Arc text</Text>
      </Theme>
    </>
  );
}

export default MyDocument;

Imports​

Root​

Make sure that the root component of your app contains the following imports. If your using NextJs, the following can go in your root layout component, or _app.(t|j)sx file.

caution

You only need to include the theme imports that you need for your app. All three are included here just for the example. If you only need BT Business styles there's no need to include the others.

import React from "react";

// Themes
import "@arc-ui/themes/lib/bt-enterprise.css"
import "@arc-ui/themes/lib/bt-business.css"
import "@arc-ui/themes/lib/ee.css"

import "@arc-ui/components/lib/styles.css"; // Arc component styles
import "@arc-ui/community-components/styles.css"; // Arc community styles

import { Theme } from "@arc-ui/components/Theme";

export const BaseLayout = ({ children }: BaseLayoutProps) => {
  const router = useRouter();

  return (
    <Theme theme="bt-enterprise">
      {children}
    </Theme>
  );
};
interface BaseLayoutProps {
  children: React.ReactNode;
}

Importing components​

Community components can be imported like so.

import { FeaturePost, Quote, PromoListing } from "@arc-ui/community-components";

This is however is not the most performant method and it is not recommended. It would be best to import the components individually, so your final bundles only contain the components that your app is actually using.

import { FeaturePost } from "@arc-ui/community-components/FeaturePost";
import { PromoListing } from "@arc-ui/community-components/PromoListing";
import { Quote } from "@arc-ui/community-components/Quote";