Discussion: Component Naming Conventions in ZardUI

[srizzon]

Hey everyone 👋

We’re reviewing how components are named in ZardUI and would love your feedback before moving forward with any changes.

Currently, our components are named like this:

ZardButtonComponent
ZardInputComponent
ZardCardComponent

We’re considering simplifying this naming style to make components cleaner and more intuitive to use.

---

💡 Why this matters

This is about finding the right balance between clarity, readability, and developer experience.

Some developers prefer keeping explicit prefixes (like Zard) for discoverability, while others favor shorter names that look cleaner in templates and imports.

---

🧱 Naming options being considered

Option	Example	Notes
A. Keep prefix and suffix	ZardButtonComponent	Very explicit and unique, but verbose.
B. Keep only prefix	ZardButton	Still clearly part of ZardUI, simpler to use.
C. Keep only suffix	ButtonComponent	Matches Angular standards, shorter, but loses namespace clarity.
D. No prefix or suffix	Button	Cleanest and minimal, but might conflict with user-defined components.

---

⚙️ Points to consider

• Discoverability: Prefixed names make ZardUI components easier to identify in large projects.
• Readability: Shorter names improve code readability and make templates cleaner.
• Consistency: Angular itself uses suffixes like Component and Directive — should we follow that?
• Scalability: Would dropping prefixes make future maintenance harder?

---

Please vote in the poll and share your reasoning in the comments below.
Your feedback will help us define a consistent and developer-friendly naming convention for ZardUI going forward 💬

[srizzon]

Adding some context 👇

Angular is going through some important updates that might influence how we name things.
Recently, the framework changed the suffix conventions for file names, and it’s also moving toward a future where you may not need to explicitly import components before using them in templates — similar to how React works today.

Because of that, we’re thinking ahead about how ZardUI can stay aligned with Angular’s evolution while keeping the library consistent, easy to use, and predictable for developers.

That’s the main reason we opened this discussion — to get community feedback before we lock in a naming convention that might stay for a long time. 🚀

[asyncLucas]

I vote B 🚀

[marmota-alpina]

Option B (ZardButton) is the sweet spot. It's what the ecosystem has converged on, future-proofs for cleaner templates, and maintains the namespace clarity that makes component libraries manageable in large applications.

[jeffteixeira]

For me, the option B is the perfect balance.

[mihajm]

Seems like right now I'm in the majority, but yeah B..especially considering selectorless & future jsx-like syntax :)

[ribeiromatheuss]

Will we retain the suffix in service and directive names?

[srizzon]

Yes, we need to keep them.

[antoineheseque]

Option B seems to be the perfect solution! Following New angular best practices

[Jlassiezzeddine]

I'd vote for D.
Like @Luizgomess said:

[...] aiming for a better development experience, clearer vision and actually making that installed component a user component and not a >"Zard" component.

Actually once we add a Zard component to our codebase, it's not Zard anymore, we can tweak it and own it and that's the beauty of Zard (and Shadcn).

If a user adds a Button let's just call it Button, if they need to name it something else (potentially to avoid conflicting with existing Button component) they can always export it as something else or even rename it

[replete]

I have been using this, and I would actually vote for D, because this is modelled on shadcn where you import and own your components.

It was however handy to have the prefix while evaluating the components alongside other libraries, but in a live project I would be using the components primarily and so would just remove the prefix anyway.

I love this project exists btw, I want Angular as a framework but I want shadcn components.

[rwalus]

IMHO optition B it will be a good option for the naming conventions

[nejat-njonjo]

I’d go with D. Button, with B. ZardButton as a fallback.

With Angular moving toward selectorless components, naming becomes even more important since components may be used directly after import. Short, intention-based names like Button feel more natural and reduce boilerplate, especially when a project typically relies on a single UI library.

This approach keeps templates clean, improves ergonomics, and aligns well with Angular's future direction. If collisions become an issue in mixed setups, ZardButton still works as a safe alternative but Button feels like the most future-proof default.

[robmanganelly]

My 2 cents

For Components:
imo, you want something identifiable and easy to type. Best balance would be a small prefix and no "component" in the name:
ZButton ZInput ZLabel
Z instead of Zard , makes components easy to spot in the imports and makes it easier for migrations (you could have 2 buttons living in the same import at a given time)

For services:
Angular docs recommend using the suffix service "SomethingService" , except for the case where its function is evident "Authentication" "Logger" .
I would go with that convention

For Directives
Same thing here, angular docs recommend "SomethingDirective" and this is a wonderful convention because when you have 20 imports in a component you may want to know which are what. it can also help to "associate" a directive with a component:

"ZCopyToClipboard" (Component)
"CopyToClipBoardDirective" (Directive --obvious--)
"ClipboardService" / "Clipboard" (Valid alternatives for a service)