Panel

Discontinued
Show details
Discontinued
Published: December 02, 2024
Updated: April 02, 2025

Introduction

In version 2 of our design system, Panel was a straightforward component whose primary purpose was to apply specific CSS properties through attributes. It inherited the same styling logic as Base, allowing developers to add layout or display-related properties without manually writing repeated class names.

Why It’s Discontinued

Like Base, Panel became unnecessary with our shift to Tailwind CSS in version 3. Tailwind’s utility-first approach lets developers apply equivalent (or more precise) styling directly in their markup. This eliminates the need for an extra component wrapper and simplifies the development process.

For a deeper explanation of how to migrate from attribute-based styling to Tailwind utilities, refer to the Base page. You’ll find more details on the underlying reasons for the change, along with best practices for transitioning your existing components to a utility-first approach.

Alternative

Nova 2 example


                                                        
                                                        
                                                            <NvPanel P="8" M="8" Level="1"></NvPanel>
                                                        
                                                            

Blazor example in Nova 2

Nova 3 example


                                                        
                                                        
                                                            <div class="p-8 m-8 shadow-xs"></div>
                                                        
                                                            

html example in Nova 3

As shown above, you can use any HTML tag along with Tailwind classes.