Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

How to integrate only the SCSS of Keen themes with Next.js?


Hello. I'm building a next js app with my team and as we lack designers, we bought keen bootstrap 5 to try and use your styles on our next js components. However, it comes with a lot of html and js that we don't want to use, as we only want the styling (scss) files. I tried copying and pasting the folder with those files (keen_html_v3.0.8_demo9/demo9/src/sass) inside my project and importing them, but it doesn't seem to work, as these paths on the _init.scss file does not exist:

@import "../../../tools/node_modules/bootstrap/scss/functions";
@import "../../../tools/node_modules/bootstrap/scss/variables";
@import "../../../tools/node_modules/bootstrap/scss/variables-dark";
@import "../../../tools/node_modules/bootstrap/scss/maps";
@import "../../../tools/node_modules/bootstrap/scss/mixins";
@import "../../../tools/node_modules/bootstrap/scss/utilities";

I'm sure the this ui kit wasn't meant to be used this way, but what can I do to be able to make it work?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi,

Keen is an HTML template and using it with Next.js is quite complex task.

Instead we offer you Metronic as it will come with complete Next.js version with generic react components:
https://x.com/keenthemes/status/1907754165217960363

You can purchase Metronic http://keenthemes.com/metronic now and get 10 demos for nextjs by emailing us via support@keenthemes.com

Regards,
Sean


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(