Installation

Get Solora running in your project in under 30 seconds. Just import the CSS and call initAll().

Via npm

Install Solora from npm:

npm install @kerkhoff-ict/solora

Then add to your HTML:

<!-- Add to your <head> -->
<link rel="stylesheet" href="@kerkhoff-ict/solora/dist/index.css">

<!-- Add before closing </body> -->
<script type="module">
  import('@kerkhoff-ict/solora/dist/index.js')
    .then(sol => sol.initAll());
</script>

Via CDN

For quick prototyping or static sites:

<!-- Add to your <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kerkhoff-ict/solora/dist/index.css">

<!-- Add before closing </body> -->
<script type="module">
  import('https://cdn.jsdelivr.net/npm/@kerkhoff-ict/solora/dist/index.js')
    .then(sol => sol.initAll());
</script>

That's it!

initAll() automatically initializes all Solora components on the page:

  • 🎨 Buttons with hover and focus states
  • 📋 Codeblocks with syntax highlighting and copy functionality
  • ⬇️ Dropdowns with keyboard navigation
  • 📝 Inputs with validation and error states
  • 💡 Popovers with positioning and animations
  • ☀️ Theme toggle with localStorage persistence
  • ✅ Checkboxes and radio buttons with selection limits
🚀 One function call No need to initialize components individually. initAll() handles everything automatically.

Framework Integration

Solora works with any framework or vanilla JavaScript:

React/Vue/Angular

// In your main.js or app.js
import '@kerkhoff-ict/solora/dist/index.css';

// Initialize after DOM is ready
import('@kerkhoff-ict/solora/dist/index.js')
  .then(sol => sol.initAll());

Next.js

// pages/_app.js
import '@kerkhoff-ict/solora/dist/index.css';

export default function App({ Component, pageProps }) {
  React.useEffect(() => {
    import('@kerkhoff-ict/solora/dist/index.js')
      .then(sol => sol.initAll());
  }, []);

  return <Component {...pageProps} />;
}

Vanilla JavaScript

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="@kerkhoff-ict/solora/dist/index.css">
</head>
<body>
  <button class="btn btn-primary">Click me</button>

  <script type="module">
    import('@kerkhoff-ict/solora/dist/index.js')
      .then(sol => sol.initAll());
  </script>
</body>
</html>

CSS Variables

Customize Solora by overriding CSS variables in your own stylesheet:

:root {
  --color-primary: #6366f1;      /* your brand color */
  --color-text-light: #ffffff;
  --color-text-dark: #1d1d1f;
}
💡 Tip All Solora components inherit from these variables, so changing --color-primary instantly re-themes every component.

Next Steps

Now that you're set up, explore the components: