Custom components step by step

Custom Components
Ask the Community

Learn how to replace components to make Cord your own

Welcome to replacements

Cord's Replacements API is the key to customizing your app beyond CSS tweaks. Today, we'll learn how to give our app the look of GitHub. Let's jump right in.

Adding a status indicator to Avatar

The Avatar component shows the user's profile picture. We want to show the user's status indicator on top of their picture.

We can replace the default cord Avatar with our own component that renders the default Cord Avatar and the status badge as a sibling.

Replacing a component with itself and something more is a common use case.

Show a different SendButton

If the default SendButton (shown in the composer) doesn't fit your design, you can replace it with your own.

Even as we completely replace the component used, it's important to understand that we retain access to the original props. This enables us to conveniently reuse them, making the replacement a smooth experience.

Changing the Composer's layout

The Composer is where you write your messages. Replacing theSendButton already made some changes to it, but if you want to make more complex changes, you can replace ComposerLayout and shuffle elements around or extend the functionality.

Through their props, our layout components receive the elements they need to show. You can move them around and add some styles.

Transform Message

A Message is a collection of messages with a composer. You can change how each of the messages looks like by replacing the Message component.

Customize Cord OptionsMenu

Our options menu already includes multiple features and actions. You might want to include some functionality specific to your product.

You can modify the Cord OptionsMenu to change the look of the MenuButton and also add new features or change the existing MenuItems. For this, you need to replace MenuItem and MenuButton inside a specific component (OptionsMenu) with the within option in the ReplaceConfig.

In these steps, we've learned how to use Cord's Replacements API to customize the appearance of your application's components and enhance their functionality.

For further details on which components can be replaced and what props they accept, refer to our Components page, or explore more about replacements in our API documentation. If you have any remaining questions, feel free to ask within our Cord Community.

Not finding the answer you need? Ask our Developer Community

Ask Cordy