Passport UI

A React UI component library with motion primitives and theme support built with TypeScript, Tailwind CSS v4, and shadcn/ui components.

View components and documentation at storybook.passportui.com. Installation guide available at passportui.com.

Installation

npm install passport-ui

Using PostCSS

Add the PostCSS plugin to your postcss.config.mjs:

export default {
  plugins: ["@tailwindcss/postcss"],
};

Import Styles

Import the library styles in your main CSS file:

@source "../../node_modules/passport-ui/src"
@import "passport-ui/styles.css";

/* Optional styles based on requirement */
@import "passport-ui/hljs-themes.css"; /* Optional: for code highlighting */
@import "passport-ui/tailwind-colors.css"; /* Optional: dynamic usage of tailwind colors */

• For themed syntax highlighting in CodeBlock and Markdown components, import the theme styles.
• For dynamic usage of tailwind colors, import the tailwind colors styles.

Import Pattern

Passport UI uses individual component exports for optimal tree-shaking and React Server Components compatibility. Import components individually:

import { Button } from "passport-ui/button";
import { Card, CardContent } from "passport-ui/card";

function App() {
  return (
    <Card>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  );
}

With Theme Support

import { ThemeButton } from "passport-ui/theme-button";
import { ThemeProvider } from "passport-ui/theme-provider";

function App() {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      <div className="min-h-screen bg-background text-foreground">
        <ThemeButton />
        {/* Your app content */}
      </div>
    </ThemeProvider>
  );
}

Available Themes

• Light - Light theme
• Dark - Dark theme
• System - System theme

Use ThemeProvider to wrap your app and ThemeButton to toggle between themes.

Available Components

Layout Containers

• ContentContainer
• FooterContainer
• HeaderContainer
• PageLayout
• SidebarContainer

Providers

• ThemeProvider

Components

• Accordion
• Alert
• AlertDialog
• Analytics
• AspectRatio
• Avatar
• Badge
• Blockquote
• Breadcrumb
• BulletList
• Button
• Calendar
• Card
• Carousel
• Checkbox
• CodeBlock
• Collapsible
• Combobox
• Command
• ContextMenu
• DatePicker
• Dialog
• Drawer
• DropdownMenu
• Form
• HoverCard
• Input
• InputOTP
• Label
• LiveRegion
• Markdown
• Menubar
• Pagination
• Popover
• PrefetchLink
• Progress
• RadioGroup
• Resizable
• ScrollArea
• Select
• Separator
• Sheet
• Sidebar
• Skeleton
• Slider
• Sonner
• StructuredData
• Switch
• Table
• Tabs
• Textarea
• Toggle
• ToggleSelect
• Tooltip
• VisuallyHidden

Hooks

• useIsMobile
• useScroll

Composables

• EmptyState
• MobileSidebarTrigger
• ThemeButton
• ThemeToggle

Motion Primitives

• AnimatedBackground
• BlurIn
• SequentialReveal
• TypewriterText