Skip to main contentSkip to sidebarSkip to headerSkip to footer

Installation

To get started, install the library and its dependencies by following the steps below.

Step 1

Install the passport-ui package
zsh/bash
npm install passport-ui

Step 2

Configure PostCSS to use tailwindcss
postcss.config.mjs
1
2
3
export default {
  plugins: ["@tailwindcss/postcss"],
};

Step 3

Import passport-ui styles in your main stylesheet
styles.css
1
2
3
4
5
@source '../../node_modules/passport-ui/src';
@import 'passport-ui/styles.css';
 
/* Optional: for code highlighting */
@import 'passport-ui/hljs-themes.css';

Step 4

Wrap your app with the theme provider
app.tsx
1
2
3
4
5
6
7
8
9
import { ThemeProvider } from "passport-ui";
 
function App() {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      {/* Your app content */}
    </ThemeProvider>
  );
}

Step 5

Use the components (example: Button, Card, etc.)
app.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import {
  Button,
  Card,
  CardContent
} from "passport-ui";
 
function App() {
  return (
    <Card>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  );
}