The panel component automatically follows the theme and provides consistent styling for grouped content.
It's perfect for creating sections in your application with proper spacing and borders.
Grid layouts work great with panels for creating dashboards and feature sections.
Each panel maintains consistent spacing and styling across your application.
The default variant has a white background, subtle border, and minimal shadow. It's the standard choice for most content.
Use variant="default" or omit the variant property.
The outline variant removes the background color and shadow, keeping only the border.
Use variant="outline" for a lighter visual weight.
The ghost variant has no border or background by default, only showing a subtle background on hover.
Use variant="ghost" for the most minimal appearance.
Compact padding for dense layouts.
Use size="sm"
Default size with balanced spacing.
Use size="md" or omit.
Generous padding for prominent sections.
Use size="lg"
You can nest panels to create more complex layouts:
This is a nested panel with outline variant and small size.
This is another nested panel with ghost variant.
Panels work great even without a title for simple content grouping.
They provide visual separation and consistent padding throughout your interface.
You can add your own headings and structure within untitled panels.
Ghost panels without titles create very subtle content sections.