Tile UI Vue
Source code

Components

Sidebar

Sidebar layout.

Use Sidebar to add a collapsible application sidebar.

Menu
import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarTrigger } from '@tile-ui/vue';
 
export default function SidebarDemo() {
	return (
		<SidebarProvider style={{ minHeight: '220px' }}>
			<div style={{ display: 'flex', gap: '12px', alignItems: 'flex-start' }}>

Registry install

pnpm dlx shadcn@latest add @tile-ui/sidebar

Package usage

import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarTrigger } from '@tile-ui/vue';
 
<SidebarProvider>
	<Sidebar>
		<SidebarContent>
			<SidebarGroup>
				<SidebarGroupLabel>Menu</SidebarGroupLabel>
			</SidebarGroup>
		</SidebarContent>
	</Sidebar>
	<SidebarTrigger />
</SidebarProvider>

Highlights

  • Provider and trigger
  • Variants and sides
  • Collapsible modes

Registry dependencies

Item Purpose
sidebar Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

Prop Type Default
side 'left' | 'right' —
variant 'sidebar' | 'floating' | 'inset' —
collapsible 'offcanvas' | 'icon' | 'none' —

SidebarProvider

Prop Type Default
defaultOpen boolean —
open boolean —
onOpenChange (open: boolean) => void —
PreviousSheetNextSkeleton