Skip to main content

​
Installation

Get started with Popui by installing the package and configuring your Svelte project.

​
Prerequisites

Before installing Popui, ensure your project meets these requirements:

Svelte 5

Popui requires Svelte 5.0.0 or higher

Node.js

Node.js 16.x or higher recommended
Popui is built specifically for Svelte 5 and uses its latest features including runes and snippets. It is not compatible with earlier Svelte versions.

​
Install the Package

Install Popui using your preferred package manager: 
npm install @invopop/popui

​
Package Details

  • Package name: @invopop/popui
  • Current version: 0.1.54
  • License: MIT
  • Peer dependencies: Svelte ^5.0.0

​
Configure Tailwind CSS

Popui is styled with Tailwind CSS and requires it to be configured in your project.
1

Install Tailwind CSS (if not already installed)

If you don’t have Tailwind CSS in your project, install it:
npm install -D tailwindcss @tailwindcss/vite
2

Import Popui's Tailwind theme

Add the Popui theme to your main CSS file (e.g., app.css or global.css):
app.css
@import "@invopop/popui/tailwind.theme.css";

@tailwind base;
@tailwind components;
@tailwind utilities;
The theme import should come before the Tailwind directives to ensure proper style loading.
3

Configure Tailwind content paths

Update your tailwind.config.js to include Popui components:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/**/*.{html,js,svelte,ts}',
    './node_modules/@invopop/popui/**/*.{js,svelte,ts}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

​
Optional: Add Tailwind Plugins

For enhanced functionality with form components, consider installing these Tailwind plugins: 
npm install -D @tailwindcss/forms @tailwindcss/typography
Then add them to your tailwind.config.js:
tailwind.config.js
export default {
  // ... other config
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography')
  ]
}

​
Verify Installation

Test your installation by importing and using a simple component:
+page.svelte
<script>
  import { BaseButton } from '@invopop/popui'
</script>

<BaseButton variant="primary">
  Hello Popui!
</BaseButton>
If the button renders with proper styling, your installation is successful!

​
SvelteKit Configuration

If you’re using SvelteKit, ensure your svelte.config.js is configured correctly:
svelte.config.js
import adapter from '@sveltejs/adapter-auto'
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter()
  }
}

export default config

​
TypeScript Support

Popui includes full TypeScript definitions. No additional setup is required for TypeScript support. You can import types from the package: 
import type { BaseButtonProps } from '@invopop/popui/types'

​
Troubleshooting

This usually means Tailwind isn’t configured correctly. Ensure:
  1. You’ve imported the Popui theme CSS
  2. Your Tailwind content paths include the Popui package
  3. Your build tool is processing the CSS files
Make sure you’re using Svelte 5.0.0 or higher. Check your package.json:
{
  "dependencies": {
    "svelte": "^5.0.0"
  }
}
Verify that the package is installed correctly:
npm list @invopop/popui
If not found, try reinstalling:
npm install @invopop/popui
If you encounter build errors, ensure you’re using compatible versions:
  • Vite 5.x or higher
  • @sveltejs/vite-plugin-svelte 4.x or higher
For more help, check the GitHub Issues or view the Storybook examples.

​
Next Steps

Quick Start Guide

Ready to build? Follow our quick start guide to create your first component.

Build docs developers (and LLMs) love

Get started for freeTalk to us