skills.rest
blink-new
blink-newOFFICIAL
Explore all skills by this author →
WebsiteGitHub

saas-sidebar

Build a collapsible SaaS dashboard sidebar with shadcn/ui primitives.

1|2|Updated Jan 23, 2026
Search Tags:#react#navigation#dashboard#shadcn/ui#ui component#sidebar#collapsible
One-click install
npx skills add https://github.com/blink-new/claude --skill saas-sidebar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: saas-sidebar
Source: https://github.com/blink-new/claude/tree/main/skills/saas-sidebar
Command: npx skills add https://github.com/blink-new/claude --skill saas-sidebar

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

This Skill provides a robust and visually appealing collapsible sidebar component for SaaS applications, enhancing user navigation and interface density.

Core Features & Use Cases

  • Collapsible Design: Seamlessly switch between expanded and icon-only modes.
  • Responsive Behavior: Adapts to different screen sizes, including a mobile Sheet overlay.
  • State Persistence: Remembers user's sidebar preference across sessions.
  • Use Case: Implement a professional-looking navigation sidebar in your new dashboard application that users can collapse to maximize content space.

Quick Start

Install the necessary shadcn/ui components by running npx shadcn@latest add sidebar tooltip avatar popover collapsible separator skeleton sheet.

Frequently Asked Questions about saas-sidebar

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a collapsible sidebar for a React SaaS dashboard?▼

You can build a collapsible sidebar for a React SaaS dashboard by using shadcn/ui primitives, which provide seamless switching between expanded and icon-only modes to maximize content space.

Can I persist the collapsed state of my dashboard sidebar across sessions?▼

Yes, you can persist the collapsed state of your dashboard sidebar across sessions by utilizing localStorage and cookies, ensuring the sidebar remembers the user's layout preference.

How do I make a shadcn/ui sidebar responsive for mobile devices?▼

To make a shadcn/ui sidebar responsive for mobile devices, you can implement a mobile Sheet overlay that adapts the navigation interface to different screen sizes for better usability.

Does the shadcn/ui sidebar component support keyboard shortcuts and hover-expand?▼

Yes, the shadcn/ui sidebar component supports keyboard shortcuts and hover-expand functionality, automatically displaying tooltips in icon mode to maintain efficient dashboard navigation.

What shadcn/ui primitives do I need to install for a React sidebar component?▼

To set up a React sidebar component, you need to install the sidebar, tooltip, avatar, popover, collapsible, separator, skeleton, and sheet primitives using the shadcn CLI.

What is the best way to handle navigation density in complex web applications?▼

The best way to handle navigation density in complex web applications is implementing a collapsible sidebar with icon-mode centering and auto-tooltips, allowing users to maximize content space on demand.

Related Skills

Explore More Design & Creative Skills→
imalfectimalfect
1

base-ui-react

Configure Base UI React components with render-prop APIs and Floating UI positioning.

Community
Advanced
Impertio-StudioImpertio-Studio

shadcn-syntax-sidebar

Build shadcn ui sidebar navigation shells with correct composition and cookie persistence.

Official
Intermediate
jiaiyanjiaiyan
8

n-dropdown

Create and control contextual dropdown menus for Naive UI components in Vue 3.

Community
Advanced
siriwatknpsiriwatknp
2.4k

build-app-layout

Create React application layouts with header, footer, content, and sidebar components.

Community
Intermediate