Sidebars

  • 1

    As mentioned in the Setup tab, some of our components follow Shadcn UI, with differences done on top of these components, namely a wider range of variants and functionality, all the while keeping the deep customization options open. You can get started by installing the component from

  • 2

    To have access to our features copy the code in the block below and replace the existing code in the generated component file in your project, which by default is components/ui/sidebar.tsx

  • 3

    Make sure to adjust any necessary imports and styles to fit your setup, preference and needs.

Combos

  • Basic

    Content area
    Your main content goes here.
  • Collapsed (icon-only)

    Content area
    Collapsed icon-only sidebar by default.
  • Grouped sections

    Content area
    Sidebar with grouped sections and separator.
  • Scrollable long list

    Content area
    Long list with overflow scrolling.
  • With avatars

    Content area
    Sidebar with avatars/initials.
  • Skeleton (loading)