starred/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-01-11 21:10:29 +01:00
Code Issues 273 Packages Projects Releases 10 Wiki Activity

Convert the NetBox UI to use Tabler #7835

New Issue
Closed
opened 2025-12-29 20:28:47 +01:00 by adam · 6 comments
adam commented 2025-12-29 20:28:47 +01:00
Owner
Copy Link

Originally created by @jeremystretch on GitHub (Mar 31, 2023).

Originally assigned to: @jeremystretch on GitHub.

NetBox version

v3.4.7

Feature type

New functionality

Proposed functionality

Rewrite the NetBox UI to use the Tabler UI kit. Like the current UI, Tabler is built using the Bootstrap CSS framework, but offers many additional features and components natively.

This will be a huge task, and further exploration is needed to better estimate the amount of work required. This FR will be updated with additional details concerning the proposed implementation as research progresses.

Use case

Tabler will allow us to achieve more consistent UI styling application-wide, while obviating the need for much of our custom code. Some of its benefits are listed below:

  • Application-focused design
  • Native dark mode
  • Robust layouts & navigation components
  • Broader selection of UI components

Database changes

None

External dependencies

This will introduce the Tabler library as a new dependency.

Originally created by @jeremystretch on GitHub (Mar 31, 2023). Originally assigned to: @jeremystretch on GitHub. ### NetBox version v3.4.7 ### Feature type New functionality ### Proposed functionality Rewrite the NetBox UI to use the [Tabler](https://tabler.io/) UI kit. Like the current UI, Tabler is built using the [Bootstrap](https://getbootstrap.com/) CSS framework, but offers many additional features and components natively. This will be a huge task, and further exploration is needed to better estimate the amount of work required. This FR will be updated with additional details concerning the proposed implementation as research progresses. ### Use case Tabler will allow us to achieve more consistent UI styling application-wide, while obviating the need for much of our custom code. Some of its benefits are listed below: - Application-focused design - Native dark mode - Robust layouts & navigation components - Broader selection of UI components ### Database changes None ### External dependencies This will introduce the Tabler library as a new dependency.
adam added the status: acceptedtype: featuretopic: UI/UX labels 2025-12-29 20:28:47 +01:00
adam closed this issue 2025-12-29 20:28:47 +01:00
adam commented 2025-12-29 20:28:47 +01:00
Author
Owner
Copy Link

@bluikko commented on GitHub (Apr 5, 2023):

I hope that this would not:

  • increase amount of padding/whitespace horizontally or vertically;
  • limit the amount of data that fits tables horizontally.

Already there are some suboptimal behaviors in this sense, as witnessed by some issues that were opened around 3.0 (but never addressed).

@bluikko commented on GitHub (Apr 5, 2023): I hope that this would not: - increase amount of padding/whitespace horizontally or vertically; - limit the amount of data that fits tables horizontally. Already there are some suboptimal behaviors in this sense, as witnessed by some issues that were opened around 3.0 (but never addressed).
adam commented 2025-12-29 20:28:47 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Jan 17, 2024):

Some quick looks at the refreshed UI with Tabler in place. We'll continue to track incremental improvements & bug fixes separately, but the bulk of the UI migration work has been completed.

netbox_tabler1
netbox_tabler2
netbox_tabler3

@jeremystretch commented on GitHub (Jan 17, 2024): Some quick looks at the refreshed UI with Tabler in place. We'll continue to track incremental improvements & bug fixes separately, but the bulk of the UI migration work has been completed. ![netbox_tabler1](https://github.com/netbox-community/netbox/assets/13487278/af48674f-8372-4698-b578-1a10e3f0dfa8) ![netbox_tabler2](https://github.com/netbox-community/netbox/assets/13487278/20f5f42a-db7b-44dd-bed2-df05b6c5b4b4) ![netbox_tabler3](https://github.com/netbox-community/netbox/assets/13487278/1f47f7e0-1a48-4c97-a439-acbc0b60aa4f)
adam commented 2025-12-29 20:28:48 +01:00
Author
Owner
Copy Link

@tbotnz commented on GitHub (Jan 25, 2024):

Ui looking awesome @jeremystretch. Dont suppose youd consider having forms as htmx partials, (food for tought) this would allow forms to be nested in modals etc

@tbotnz commented on GitHub (Jan 25, 2024): Ui looking awesome @jeremystretch. Dont suppose youd consider having forms as htmx partials, (food for tought) this would allow forms to be nested in modals etc
adam commented 2025-12-29 20:28:48 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Jan 25, 2024):

We already do this in some places. There's a separate FR (#14736) open to explore implementing HTMX in other areas of the UI more generally.

@jeremystretch commented on GitHub (Jan 25, 2024): We already do this in some places. There's a separate FR (#14736) open to explore implementing HTMX in other areas of the UI more generally.
adam commented 2025-12-29 20:28:48 +01:00
Author
Owner
Copy Link

@skutter-de commented on GitHub (Apr 6, 2024):

I think the sub-headings in the sidebar should be highlighted more, I can barely make them out in the screenshots above.,

@skutter-de commented on GitHub (Apr 6, 2024): I think the sub-headings in the sidebar should be highlighted more, I can barely make them out in the screenshots above.,
adam commented 2025-12-29 20:28:49 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Apr 8, 2024):

@Gaming4LifeDE this issue has been closed. Please submit a new issue with any feedback on the new UI.

@jeremystretch commented on GitHub (Apr 8, 2024): @Gaming4LifeDE this issue has been closed. Please submit a new issue with any feedback on the new UI.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
beta
breaking change
complexity: high
complexity: low
complexity: medium
needs milestone
netbox
pending closure
plugin candidate
pull-request
Mirrored from GitHub Pull Request
 severity: high
severity: low
severity: medium
status: accepted
status: backlog
status: blocked
status: duplicate
status: needs owner
status: needs triage
status: revisions needed
status: under review
topic: GraphQL
topic: Internationalization
topic: OpenAPI
topic: UI/UX
topic: cabling
topic: event rules
topic: htmx navigation
topic: industrialization
topic: migrations
topic: plugins
topic: scripts
topic: templating
topic: testing
type: bug
type: deprecation
type: documentation
type: feature
type: housekeeping
type: translation
No Label status: accepted topic: UI/UX type: feature
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#7835
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?