Passport UI

Built on top of shadcn/ui's excellent foundation, but designed as a complete library solution. Explore the collection of 75+ premium components, composed with Tailwind CSS, Radix UI, and Motion.

View documentation at passportui.com. If you're someone who loves Storybook, you can view the components at storybook.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"; /* for code highlighting */
@import "passport-ui/tailwind-colors.css"; /* for runtime usage */

• 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

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
• ThemeButton
• ThemeToggle

Motion Primitives

• AnimatedBackground
• BlurIn
• SequentialReveal
• TypewriterText