Customize the Thread

Adjust your Thread's appearance to match your design

Adjust the CSS and CSS variables

You can alter a Cord thread to closely mirror your application's design language. With the code below, you can change the Thread component to use the colors from your application's color palette. Here, we're assuming that our example application uses a bright orange color for its call-to-action buttons.

cord-thread {
  --cord-thread-send-button-background-color: #ee6611;
  --cord-thread-send-button-background-color--hover: #ff7722;
  --cord-thread-send-button-background-color--active: #dd5500;
  --cord-thread-send-button-background-color--active: #dd5500;
  --cord-thread-send-button-background-color--disabled: #70665f;

This change will give you a thread that looks something like this:

A screenshot of a page with a Cord thread with a customized send button

Take the customization even further

You can customize many more aspects of Cord's components. For the full description of what's available for the <Thread /> component, check out the full CSS variable list here.

If you'd like to dive deeply into the topic of CSS customization, read our in-depth CSS guide.

Next Step: Authenticate your user

In the next step, you'll authenticate your user and generate a client authentication token →