Styling using the Camp Design System

Loading...

styled-components

This guide explains how to set up and use a styled-components ThemeProvider with the Camp Design System. This is the direction we are moving towards for styling in the platform. We are currently in the process of migrating all components to use this approach, but for now see below for when and how to use it.

When do you need this?

You need to set up a ThemeProvider if you’re using:

• Any @camp/ai-* components (ActiveIntelligence components)
• Themed @camp/* components (check individual component docs)

Overview

styled-components

Styled-components  is a popular library for React that enables developers to write “CSS-in-JS.” This is our chosen solution for theming and light/dark mode support in our system.

Component Coverage

Note: If a @camp/* component requires a ThemeProvider, it will be noted in the component’s documentation.

Setup

1. Wrap Your App with ThemeProvider

Wrap your application (or the section where you’ll use themed components) with the ThemeProvider:

// Using the shared provider from AC Frontend
import { ThemeProvider } from '@ac/shared/data-access/provider';
import { Tabs } from '@camp/tabs';
 
function App() {
  return (
    <ThemeProvider>
      {/* Your app content */}
      <Tabs>{/* Tabs content */}</Tabs>
    </ThemeProvider>
  );
}

Real-world example: See this setup in action in AC Frontend’s agent app .

Using themed components outside of AC Frontend? Reach out to us in Slack at #help-design-systems  to get started!

2. Verify Setup

After setup, your themed components should work correctly. If you see styling issues, ensure:

• The ThemeProvider wraps your component
• You’re using a component that supports theming
• The themed prop is set correctly (see Usage section below)

Usage

Understanding the themed prop

The themed prop controls whether a component responds to theme changes:

• themed={true}: Component responds to theme changes (light/dark mode)
• themed={false}: Component uses light mode styling only

Component-Specific Behavior

@camp/ai-* Components (AI Components)

AI components default to themed={true} for automatic light/dark mode support:

import { AiButton } from '@camp/ai-button';
 
// ✅ Default behavior - supports light/dark mode
<AiButton>Click me</AiButton>
 
// ✅ Explicitly enable theming (same as default)
<AiButton themed>Click me</AiButton>
 
// ❌ Disable theming - light mode only
<AiButton themed={false}>Click me</AiButton>

@camp/* Components (Standard Components)

Standard components default to themed={false} for light mode only:

import { Tabs } from '@camp/tabs';
 
// ✅ Default behavior - light mode only
<Tabs>
  <Tabs.List>
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
  </Tabs.List>
</Tabs>
 
// ✅ Enable theming - supports light/dark mode
<Tabs themed>
  <Tabs.List>
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
  </Tabs.List>
</Tabs>
 
// ❌ Explicitly disable theming (same as default)
<Tabs themed={false}>
  <Tabs.List>
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
  </Tabs.List>
</Tabs>

Complete Example

Here’s a complete example showing both component types working together:

import { ThemeProvider } from '@ac/shared/data-access/provider';
import { Tabs } from '@camp/tabs';
import { AiButton } from '@camp/ai-button';
 
function MyApp() {
  return (
    <ThemeProvider>
      <div>
        {/* Standard component - enable theming */}
        <Tabs themed>
          <Tabs.List>
            <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
            <Tabs.Trigger value="profile">Profile</Tabs.Trigger>
          </Tabs.List>
        </Tabs>
 
        {/* AI component - theming enabled by default */}
        <AiButton>AI Action</AiButton>
      </div>
    </ThemeProvider>
  );
}

Troubleshooting

Common Issues

Components not responding to theme changes

Problem: Your themed components aren’t switching between light and dark modes.

Solutions:

1. Ensure ThemeProvider wraps your component
2. Check that you are using the latest version of the component
3. Check that the component supports the themed prop
4. Verify themed={true} is set for @camp/* components
5. Confirm your app’s theme context is properly configured

Styling appears broken

Problem: Components look unstyled or have incorrect colors.

Solutions:

1. Verify ThemeProvider is imported from the correct package
2. Check that you are using the latest version of the component
3. Ensure you’re using a component that requires ThemeProvider
4. Try setting themed={false} to use light mode only

Getting Help

• Check individual component documentation for specific theming requirements
• See Tokens for available theme tokens
• Reach out to us in Slack at #help-design-systems  with any questions – we are always happy to help!

Deprecated Approaches

Next Gen styling originally started simple using vanilla CSS and CSS Modules. If you run into code like this and need help, contact our team. Otherwise, we will be transitioning all these components to use styled-components over the next few months.

styled()

styled() was a custom-built CSS-in-JS utility used to create single-purpose React component styles. It is deprecated. But if you are working with it somewhere in the platform, see here for how to use it.