xtendui / xtendui

Xtend UI is a powerful frontend library of Tailwind CSS components enhanced by vanilla js. It helps you build interfaces with advanced interactions and animations.

Intro  ·  Components  ·  Themes

Custom UI made easy with simplicity and total freedom

Xtend UI is a powerful frontend library of Tailwind CSS components enhanced by vanilla js. It helps you build interfaces with advanced interactions and animations.

• Css with Tailwind CSS and Postcss
• Some animations and interactions with Gsap
• Positioning with Popperjs
• Focus trap with Focus Trap
• Docs with Nextjs
• Release with Semantic Release
• Polyfill with Babel and Core Js
• Icons with Feather Icons
• Hosting with Github Pages and Cloudflare

Supported browsers are browsers that supports mainly es6-module, es6-module-dynamic-import, css variables, css grid, async, event.key.

Setup

For a complete css and js setup guide visit online setup page or github setup page.

Frameworks

Xtend UI is a framework agnostic vanilla javascript library, you can use inside any javascript framework.

Contributing

Read our contributing docs before submitting a pull request.

Documentation

• Clone the repository git clone https://github.com/xtendui/xtendui.git --depth 1
• Install required npm packages with pnpm install
• Use pnpm dev to serve a develop version with watch
• Use pnpm build && pnpm serve to serve a production version

Sponsors

  

Copyright and License

Copyright 2017-2023 Riccardo Caroli.

Code licensed MIT.

Docs licensed CC-BY-4.0

xtendui's Issues

Error: Cannot find module 'xtendui/tailwind.preset'

While running in the Next.js framework, got this error on the first start up

In terminal

./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./styles/globals.css
Error: Cannot find module 'xtendui/tailwind.preset'
Require stack:
.........

Suggestion: Can anyone please provide a Next.js starter template with all of the Xtend UI features enabled

vanilla js theme example using codepen or jsfiddle

Is it possible to show a quick codepen or jsfiddle example of one of the more complex theme examples just with vanilla js.

it is not clear to me how you are importing the js in the examples on the site.

thanks

Amend the docs for the hero component.

Suggestion

Amend the docs for the hero component.

In order to support images that are smaller than the dimensions of the parent container (consider a 1024x1024 image within a fullscreen container on a 4K monitor), you'll need to amend the hero CSS classes...

xt-media object-cover w-full h-full

This simple amendment should do it.

This applied to all of the examples on the docs

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

For Svelte too?

Congratulations.

It would be amazing to have this for Svelte too.

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

The release 0.15.0 on branch master cannot be published as it is out of range.

Based on the releases published on other branches, only versions within the range >=0.14.8 <0.14.9 can be published from branch master.

The following commits are responsible for the invalid release:

• Merge branch 'release-0.15' (373edfe)
• fix(toggle): fixed timing delay function and sliders with setindex and setdirection (343a318)
• merge release-0.14 (74a381a)
• docs(scroll): revision demos scroll (9130a8c)
• chore (113188c)
• fix(toggle): fix timing delay fnc with queueStop other queue like in comment + comments (9d0ef45)
• fix(toggle): toggle off set index and direction + revision scroll inverse (24b78ef)
• fix(toggle): toggle off set index and direction + revision scroll inverse (020c942)
• feat(css): refactor css animations without fill-mode (12d389e)
• fix: scroll and sticky refactor events + xt-block + fixes demos (8c99eba)
• fix(scroll): fix scroll business logic start end fallback (ea7140c)
• docs: scroll block demo + revision scroll demos + scroll super initevents (293a16a)
• chore (438010c)
• fix(scroll): fix scroll direction + demos (8314034)
• chore: docs (957b57b)
• chore: docs (19722a9)
• docs: refactor media and card themes with card (92a1260)
• chore: code styles (a97f213)
• feat(card): refactor card styles and no > selectors (9f4d96b)
• chore (861dbd2)
• chore (c501fd9)
• chore: docs (7074715)
• feat: vars.js to variables.js (2dfacb3)
• chore: backdrop revision animation (2e12ce4)
• chore (83e4c60)
• docs: refactor styles & { (2b650fb)
• docs: refactor styles & { (5020fd3)
• fix: card asset full and refactor addons card selector + docs body themes (1b963e9)
• fix: card asset full and refactor addons card selector + docs body themes (974d005)
• docs: less themes indent (cbe3682)
• docs: demo fashion listing v2 (27e590d)
• docs: WIP listing sun68 (358304e)
• chore (dc90769)
• chore (d92afc2)
• chore (5fac835)
• docs: badge color (bdb86cd)
• docs: footer link (2862b8b)
• docs: favicon (9e2d7f6)
• chore (575e75f)
• docs: seo title and description (99bc237)
• docs: titles (562f58c)
• feat(card): refactor card and overlay styles (e32d4da)
• feat(overlay): refactor overlay addons in core (2ae6651)
• chore (2ed0470)
• docs: refactor demos tr instead of targets and elements (a353de9)
• chore (d1d09cc)
• docs: revision demos listing (c6c33e6)
• Merge branch 'release-0.14' into release-0.15 (aa99fee)
• demos: revision iframe demos (dc58b50)
• fix: links styles refactor (21694a6)
• fix: links styles refactor (1df75f7)
• fix(slider): refactor slider pagination (d28013d)
• fix(slider): refactor slider slide height calculation performances (5671d44)
• chore (33f8a7f)
• fix(slider): refactor overflowAuto (4058e26)
• fix(slider): refactor slider nooverflow false (6f1d9fb)
• Merge branch 'release-0.14' into release-0.15 (9d892cf)
• Merge branch 'release-0.14' into release-0.15 (b12e0e0)
• Merge branch 'release-0.14' into release-0.15 (dbe2739)
• Merge branch 'release-0.14' into release-0.15 (4afc8be)
• Merge branch 'release-0.14' into release-0.15 (57ed274)
• Merge branch 'master' into release-0.15 (7cca064)
• docs: various fixes doc (d17fef2)
• feat: refactor row and other docs fixes (de4b113)
• demos: loading eager in slider and fix industrial-hero-v1 (4f5b4b8)
• demos: refactor theme demos name (a110ff6)
• feat: refactor global and variables and utils (8e5da2a)
• docs: list and row demos anything (72227a5)
• docs: fix aniye listing (3e0e5ab)
• docs: demos listing columns (d33829c)

Those commits should be moved to a valid branch with git merge or git cherry-pick and removed from branch master with git revert or git reset.

A valid branch could be release-0.14.

See the workflow configuration documentation for more details.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

The automated release is failing 🚨

🚨 The automated release from the dev-0.15 branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the dev-0.15 branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

The release 0.15.49 on branch dev-0.15 cannot be published as it is out of range.

Based on the releases published on other branches, only versions within the range >=0.15.48 <0.15.49 can be published from branch dev-0.15.

The following commits are responsible for the invalid release:

• fix: release (656e35e)
• fix: ported message and release (d215bcd)
• fix: ported message and release (83f4ec4)
• fix: ported message and release (af5ffe6)
• Merge branch 'master' into dev-0.15 (9490dd2)
• fix: fix googlelocator marker sort (c728449)
• Merge branch 'master' into dev-0.15 (78dc5ee)
• Merge branch 'master' into dev-0.15 (aaf3f67)
• Merge branch 'master' into dev-0.15 (983c055)
• Merge branch 'master' into dev-0.15 (e8c239f)
• Merge branch 'master' into dev-0.15 (6869f21)
• Merge branch 'master' into dev-0.15 (6f35693)
• Merge branch 'master' into dev-0.15 (64afe55)
• Merge branch 'master' into dev-0.15 (edc9772)
• Merge branch 'master' into dev-0.15 (4a49eb1)
• fix: refactor infinite scroll with get variable and no url (1055e28)

Those commits should be moved to a valid branch with git merge or git cherry-pick and removed from branch dev-0.15 with git revert or git reset.

A valid branch could be release-0.14 or master.

See the workflow configuration documentation for more details.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

The automated release is failing 🚨

🚨 The automated release from the release-0.14 branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the release-0.14 branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

The release 0.14.11 on branch release-0.14 cannot be published as it is out of range.

Based on the releases published on other branches, only versions within the range >=0.15.3 can be published from branch release-0.14.

The following commits are responsible for the invalid release:

• fix(slider): slider medialoadedreinit recalculate slide data (d7d28f6)
• docs: slider media loaded (ad5fd9e)

Those commits should be moved to a valid branch with git merge or git cherry-pick and removed from branch release-0.14 with git revert or git reset.

A valid branch could be master or release-0.14.

See the workflow configuration documentation for more details.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

data-xt-drop elements and targets logic

Versions

beta 19

Describe the bug

On the docu you said:

Only when you specify elements or targets with id the query is inside document not only inside object.

But I think that always you have to search inside document and not only inside object.
My logic seems to be much simpler to remember.

The automated release is failing 🚨

🚨 The automated release from the dev-0.15 branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the dev-0.15 branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

The release 0.15.49 on branch dev-0.15 cannot be published as it is out of range.

Based on the releases published on other branches, only versions within the range >=0.15.48 <0.15.49 can be published from branch dev-0.15.

The following commits are responsible for the invalid release:

• fix: ported message and release (d215bcd)
• fix: ported message and release (83f4ec4)
• fix: ported message and release (af5ffe6)
• Merge branch 'master' into dev-0.15 (9490dd2)
• fix: fix googlelocator marker sort (c728449)
• Merge branch 'master' into dev-0.15 (78dc5ee)
• Merge branch 'master' into dev-0.15 (aaf3f67)
• Merge branch 'master' into dev-0.15 (983c055)
• Merge branch 'master' into dev-0.15 (e8c239f)
• Merge branch 'master' into dev-0.15 (6869f21)
• Merge branch 'master' into dev-0.15 (6f35693)
• Merge branch 'master' into dev-0.15 (64afe55)
• Merge branch 'master' into dev-0.15 (edc9772)
• Merge branch 'master' into dev-0.15 (4a49eb1)
• fix: refactor infinite scroll with get variable and no url (1055e28)

Those commits should be moved to a valid branch with git merge or git cherry-pick and removed from branch dev-0.15 with git revert or git reset.

A valid branch could be release-0.14 or master.

See the workflow configuration documentation for more details.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Failed to compile with 1 errors

https://github.com/minimit/xtendui/blob/51219b86090a884ded7a1994151e908abc2ce9a8/src/core/toggle.js#L1264

During the build one error occour:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

I think it's fault of the line highlighted, if you replace ?? with || all go like a charm.

How to customize

Suggestion

How to customize the themes in terms of - colors, padding, border, radius, font family? etc.
And there's already a limited collection of button type how can we extend that?

Like if you see the design system of vercel they at least have 2 - 3 type of button like - Primary, Ghost, With gradient, with custom SVG, loading state etc. https://vercel.com/design/button

So it could be possible if I can just extend this library to customize it. But the question is, Is it possible?

The automated release is failing 🚨

🚨 The automated release from the release-0.14 branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the release-0.14 branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

The release 0.14.11 on branch release-0.14 cannot be published as it is out of range.

Based on the releases published on other branches, only versions within the range >=0.15.4 can be published from branch release-0.14.

The following commits are responsible for the invalid release:

• chore (bf18d50)
• fix(slider): slider medialoadedreinit recalculate slide data (d7d28f6)
• docs: slider media loaded (ad5fd9e)

Those commits should be moved to a valid branch with git merge or git cherry-pick and removed from branch release-0.14 with git revert or git reset.

A valid branch could be master or release-0.14.

See the workflow configuration documentation for more details.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀