Installation

Install the package

npm install @stellisoft/stellify-ui

Import in your entry point

Add the following imports to your main JavaScript file (e.g., app.js or main.ts):

// Import the Web Components
import '@stellisoft/stellify-ui'

// Optional: Import component-specific styles
import '@stellisoft/stellify-ui/components/st-sidebar.css'
import '@stellisoft/stellify-ui/components/st-dialog.css'

Alternative: Script tag

If you're not using a bundler, load the files directly in your HTML:

<script type="module" src="node_modules/@stellisoft/stellify-ui/dist/stellify-ui.js"></script>

Vite Configuration

For optimal bundle splitting, you can configure Vite to separate stellify-ui into its own chunk:

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vendor-stellify-ui': ['@stellisoft/stellify-ui'],
        },
      },
    },
  },
})

Laravel Setup

For Laravel projects, ensure you have Vite configured and add the imports to your resources/js/app.js:

// resources/js/app.js
import '@stellisoft/stellify-ui'
import '@stellisoft/stellify-ui/components/st-sidebar.css'

// Your other app code...

Then include the Vite directive in your Blade layout:

@vite('resources/js/app.js')