Customize and custom components

[theyash14]

Hi @Raiden-MeixElysia,

How can I customize existing components like title bar/ activity bar with no borders?
How can I create custom components that are not in ely gpui?
Thanks in advance.

Attached a reference image

[Raiden-MeixElysia]

Hi Yashwanth!

Thanks for your interest in Ely GPUI Components!

1. Customizing existing components

Currently, "TitleBar" and "ActivityBar" have their borders defined directly in their render implementations.

You can find them here:

• "crates/ely-core/src/shell/chrome.rs" — TitleBar uses ".border_b_1()".
• "crates/ely-core/src/shell/activity.rs" — ActivityBar uses ".border_r_1()".

You can remove these border definitions if you're working with a local copy of the library.

At the moment, there isn't a public API to disable these borders directly. I'll consider adding styling options to make this easier without modifying the source code.

2. Creating custom components

Absolutely! Ely GPUI Components is built on top of GPUI, so you can create your own components using GPUI's existing APIs.

Your custom components can also use Ely's theme system to maintain consistent colors, spacing, and appearance alongside the existing components.

You don't need to modify Ely's source code to create additional components.

If you have specific customization requirements, feel free to share them here. I'd be happy to take a look!

Thanks for the feedback!