Skip to main contentSkip to sidebarSkip to headerSkip to footer

Passport UI

Compose with elegance

  • Introduction
Getting Started
  • Installation
  • Color System
  • Font & Typography
Layout Containers
  • Page Layout
  • 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
  • Theme Button
  • Theme Toggle
Motion Primitives
  • Animated Background
  • Blur In
  • Sequential Reveal
  • Typewriter Text
v1.0.65

Layout Containers

  1. Home
  2. Layout Containers

Layout Containers

Browse all layout containers available in the Passport UI - React Component Library designed for building apps blazingly fastlibrary. Click on any component to view examples, documentation, and code snippets.

Page Layout

A comprehensive layout structure for a standard page. When using sidebars, you must wrap your app with SidebarProvider.

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 ↗