Tailwind CSS Application Shells

An application shell is a design pattern used in web development to improve performance and user experience. It consists of the minimal HTML, CSS, and JavaScript needed to power the UI.

Documentation Get figma file Switch to Old UI

Dashboard Layout with collapsable sidebar

Use this Dashboard layout in Tailwind CSS with collapsable sidebar and collapsable main content area.

Creative Dashboard Layout Tailwind

Use following example to create an advanced dashboard layout with collapsible sidebar, main content can be show inside grid layout.

Advanced layout with Double Sidebar layout

Use this Tailwind Application Shell Layout with double sidebar on the left side of the page and content shows on the right.

Advanced layout with collapsable sidebar

Use this shell layout to show a collapsible sidebar. The sidebar can be expanded or collapsed by clicking on the hamburger icon at the left.

Shell layout with expandable sidebar

Use this Dashboard Shell example to show a expandable sidebar with collapsable content together, main content area are on the right side of the page.

Stacked layout with multiple navbars

Use this advanced stacked application shell layout with a responsive navigation bar that includes search, user options, menu items and add content in a grid layout.

Alternate style of Application Shell

Following example is a alternate style of application shell, which has a background color in navigation bar and content below it.

Appplication Shell with Background

Use this style of App dashboard shell to show a list of navigation items and show content below navigation with background in main content.

Dashboard Layout with navbar

Use following code to create a dashboard layout with simple design in top navigation bar.

Application Shell with navbar

Use this Tailwind Application Shell Layout to show navigation bar with menu items and links on the top side of the page