Skip to main contentSkip to left navigationSkip 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
1export default {
2  plugins: ["@tailwindcss/postcss"],
3};

Step 3

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

Step 4

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

Step 5

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