Skip to main contentSkip to left navigationSkip to headerSkip to footer

Passport UI

Compact UI Components

Getting Started
  • Installation
  • Color System
  • Font & Typography
Layout Containers
  • Page Layout
  • Sidebar Container
  • Content Container
  • Header Container
  • Footer Container
Providers
  • ThemeProvider
Components
  • Accordion
  • Alert
  • Alert Dialog
  • Analytics
  • Aspect Ratio
  • Avatar
  • Badge
  • Blockquote
  • Breadcrumb
  • Bullet List
  • Button
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Code Block
  • Collapsible
  • Combobox
  • Command
  • Context Menu
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Form
  • Hover Card
  • Input
  • Input OTP
  • Label
  • LiveRegion
  • Markdown
  • Menubar
  • Navigation Menu
  • Pagination
  • Popover
  • Prefetch Link
  • Progress
  • Radio Group
  • Resizable
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Structured Data
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toggle
  • Toggle Select
  • Tooltip
  • VisuallyHidden
Hooks
  • useIsMobile
  • useScroll
Composables
  • Empty State
  • Mobile Sidebar Trigger
  • Theme Button
  • Theme Toggle
Motion Primitives
  • Animated Background
  • Blur In
  • Sequential Reveal
  • Typewriter Text
v1.0.45

Layout Containers

  1. Home
  2. Layout Containers

Layout Containers

Browse all layout containers available in the Passport UI library. Click on any component to view examples, documentation, and code snippets.

Page Layout

A comprehensive layout structure for a standard page.

Sidebar Container

A container for the sidebar, managing its state and interactions.

Content Container

A layout container for centering and constraining content width.

Header Container

A layout container for the header section of a page.

Footer Container

A layout container for the footer section of a page.

Storybook ↗GitHub ↗npm ↗