Docs: Add frontend styling and theming best practices #2241
+6
−0
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-project-automation
bot
moved this to 📬 Triage
in Plugins Platform / Grafana Community
|
Hello! 👋 This repository uses Auto for releasing packages using PR labels. ✨ This PR can be merged. It will not be considered when calculating future versions of the npm packages and will not appear in the changelogs. |
There was a problem hiding this comment.
Pull Request Overview
This PR adds best practices documentation for frontend development in Grafana plugins, specifically covering styling and theming guidelines.
Key changes:
- Adds a new "Frontend" section to the best practices documentation
- Documents three core frontend development practices: using Grafana UI components, Emotion for styling, and theme variables
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
sunker
added
the
no-changelog
|
|
||
| ## Frontend | ||
|
|
||
| - **Use Grafana UI components** - Always use components from `@grafana/ui` when building your plugin's user interface. This ensures a consistent UI experience across Grafana and helps prevent UI breakages as Grafana evolves. These components are designed to work seamlessly with Grafana's theming system and follow the [Saga Design System](https://grafana.com/developers/saga/about/overview). For available components, refer to the [Grafana UI documentation](https://developers.grafana.com/ui/latest/index.html?path=/docs/docs-overview-intro--page). |
There was a problem hiding this comment.
Not sure if we should be mentioning Saga. @tolzhabayev @sympatheticmoose any thoughts?
There was a problem hiding this comment.
No we should not, thanks for raising this @urbiz-grafana. See #2244
urbiz-grafana
approved these changes
Oct 24, 2025
grafana-plugins-platform-bot
bot
moved this from 📬 Triage
to 🔬 In review
in Plugins Platform / Grafana Community
academo
approved these changes
Oct 24, 2025
github-project-automation
bot
moved this from 🔬 In review
to 🚀 Shipped
in Plugins Platform / Grafana Community
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What this PR does / why we need it:
Expands the Frontend section of the best practices documentation with guidance on UI styling and theming.
Which issue(s) this PR fixes:
Fixes #2240
Special notes for your reviewer: