JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 519
  • Score
    100M100P100Q87909F
  • License MIT

Modern web components and CSS-first UI library built with Lit. Framework-agnostic, customizable prefix, design tokens.

Package Exports

  • luxen-ui
  • luxen-ui/avatar
  • luxen-ui/avatar/element
  • luxen-ui/badge
  • luxen-ui/badge/element
  • luxen-ui/carousel
  • luxen-ui/carousel-item
  • luxen-ui/carousel-item/element
  • luxen-ui/carousel/element
  • luxen-ui/cdn/chunks/decorate.js
  • luxen-ui/cdn/chunks/decorate.js.map
  • luxen-ui/cdn/chunks/lit.js
  • luxen-ui/cdn/chunks/lit.js.map
  • luxen-ui/cdn/chunks/map.js
  • luxen-ui/cdn/chunks/map.js.map
  • luxen-ui/cdn/custom-elements.json
  • luxen-ui/cdn/define.d.ts
  • luxen-ui/cdn/define.d.ts.map
  • luxen-ui/cdn/define.js
  • luxen-ui/cdn/define.js.map
  • luxen-ui/cdn/elements/avatar/avatar.d.ts
  • luxen-ui/cdn/elements/avatar/avatar.d.ts.map
  • luxen-ui/cdn/elements/avatar/avatar.js
  • luxen-ui/cdn/elements/avatar/avatar.js.map
  • luxen-ui/cdn/elements/avatar/index.d.ts
  • luxen-ui/cdn/elements/avatar/index.d.ts.map
  • luxen-ui/cdn/elements/avatar/index.js
  • luxen-ui/cdn/elements/avatar/index.js.map
  • luxen-ui/cdn/elements/badge/badge.d.ts
  • luxen-ui/cdn/elements/badge/badge.d.ts.map
  • luxen-ui/cdn/elements/badge/badge.js
  • luxen-ui/cdn/elements/badge/badge.js.map
  • luxen-ui/cdn/elements/badge/index.d.ts
  • luxen-ui/cdn/elements/badge/index.d.ts.map
  • luxen-ui/cdn/elements/badge/index.js
  • luxen-ui/cdn/elements/badge/index.js.map
  • luxen-ui/cdn/elements/carousel-item/carousel-item.d.ts
  • luxen-ui/cdn/elements/carousel-item/carousel-item.d.ts.map
  • luxen-ui/cdn/elements/carousel-item/carousel-item.js
  • luxen-ui/cdn/elements/carousel-item/carousel-item.js.map
  • luxen-ui/cdn/elements/carousel-item/index.d.ts
  • luxen-ui/cdn/elements/carousel-item/index.d.ts.map
  • luxen-ui/cdn/elements/carousel-item/index.js
  • luxen-ui/cdn/elements/carousel-item/index.js.map
  • luxen-ui/cdn/elements/carousel/carousel.d.ts
  • luxen-ui/cdn/elements/carousel/carousel.d.ts.map
  • luxen-ui/cdn/elements/carousel/carousel.js
  • luxen-ui/cdn/elements/carousel/carousel.js.map
  • luxen-ui/cdn/elements/carousel/index.d.ts
  • luxen-ui/cdn/elements/carousel/index.d.ts.map
  • luxen-ui/cdn/elements/carousel/index.js
  • luxen-ui/cdn/elements/carousel/index.js.map
  • luxen-ui/cdn/elements/dialog/dialog.d.ts
  • luxen-ui/cdn/elements/dialog/dialog.d.ts.map
  • luxen-ui/cdn/elements/dialog/dialog.js
  • luxen-ui/cdn/elements/dialog/dialog.js.map
  • luxen-ui/cdn/elements/dialog/dialog.styles.d.ts
  • luxen-ui/cdn/elements/dialog/dialog.styles.d.ts.map
  • luxen-ui/cdn/elements/dialog/dialog.styles.js
  • luxen-ui/cdn/elements/dialog/dialog.styles.js.map
  • luxen-ui/cdn/elements/dialog/index.d.ts
  • luxen-ui/cdn/elements/dialog/index.d.ts.map
  • luxen-ui/cdn/elements/dialog/index.js
  • luxen-ui/cdn/elements/dialog/index.js.map
  • luxen-ui/cdn/elements/divider/divider.d.ts
  • luxen-ui/cdn/elements/divider/divider.d.ts.map
  • luxen-ui/cdn/elements/divider/divider.js
  • luxen-ui/cdn/elements/divider/divider.js.map
  • luxen-ui/cdn/elements/divider/index.d.ts
  • luxen-ui/cdn/elements/divider/index.d.ts.map
  • luxen-ui/cdn/elements/divider/index.js
  • luxen-ui/cdn/elements/divider/index.js.map
  • luxen-ui/cdn/elements/drawer/drawer.d.ts
  • luxen-ui/cdn/elements/drawer/drawer.d.ts.map
  • luxen-ui/cdn/elements/drawer/drawer.js
  • luxen-ui/cdn/elements/drawer/drawer.js.map
  • luxen-ui/cdn/elements/drawer/index.d.ts
  • luxen-ui/cdn/elements/drawer/index.d.ts.map
  • luxen-ui/cdn/elements/drawer/index.js
  • luxen-ui/cdn/elements/drawer/index.js.map
  • luxen-ui/cdn/elements/dropdown-item/dropdown-item.d.ts
  • luxen-ui/cdn/elements/dropdown-item/dropdown-item.d.ts.map
  • luxen-ui/cdn/elements/dropdown-item/dropdown-item.js
  • luxen-ui/cdn/elements/dropdown-item/dropdown-item.js.map
  • luxen-ui/cdn/elements/dropdown-item/index.d.ts
  • luxen-ui/cdn/elements/dropdown-item/index.d.ts.map
  • luxen-ui/cdn/elements/dropdown-item/index.js
  • luxen-ui/cdn/elements/dropdown-item/index.js.map
  • luxen-ui/cdn/elements/dropdown/dropdown.d.ts
  • luxen-ui/cdn/elements/dropdown/dropdown.d.ts.map
  • luxen-ui/cdn/elements/dropdown/dropdown.js
  • luxen-ui/cdn/elements/dropdown/dropdown.js.map
  • luxen-ui/cdn/elements/dropdown/index.d.ts
  • luxen-ui/cdn/elements/dropdown/index.d.ts.map
  • luxen-ui/cdn/elements/dropdown/index.js
  • luxen-ui/cdn/elements/dropdown/index.js.map
  • luxen-ui/cdn/elements/icon/icon.d.ts
  • luxen-ui/cdn/elements/icon/icon.d.ts.map
  • luxen-ui/cdn/elements/icon/icon.js
  • luxen-ui/cdn/elements/icon/icon.js.map
  • luxen-ui/cdn/elements/icon/index.d.ts
  • luxen-ui/cdn/elements/icon/index.d.ts.map
  • luxen-ui/cdn/elements/icon/index.js
  • luxen-ui/cdn/elements/icon/index.js.map
  • luxen-ui/cdn/elements/input-otp/index.d.ts
  • luxen-ui/cdn/elements/input-otp/index.d.ts.map
  • luxen-ui/cdn/elements/input-otp/index.js
  • luxen-ui/cdn/elements/input-otp/index.js.map
  • luxen-ui/cdn/elements/input-otp/input-otp.d.ts
  • luxen-ui/cdn/elements/input-otp/input-otp.d.ts.map
  • luxen-ui/cdn/elements/input-otp/input-otp.js
  • luxen-ui/cdn/elements/input-otp/input-otp.js.map
  • luxen-ui/cdn/elements/input-stepper/index.d.ts
  • luxen-ui/cdn/elements/input-stepper/index.d.ts.map
  • luxen-ui/cdn/elements/input-stepper/index.js
  • luxen-ui/cdn/elements/input-stepper/index.js.map
  • luxen-ui/cdn/elements/input-stepper/input-stepper.d.ts
  • luxen-ui/cdn/elements/input-stepper/input-stepper.d.ts.map
  • luxen-ui/cdn/elements/input-stepper/input-stepper.js
  • luxen-ui/cdn/elements/input-stepper/input-stepper.js.map
  • luxen-ui/cdn/elements/popover/index.d.ts
  • luxen-ui/cdn/elements/popover/index.d.ts.map
  • luxen-ui/cdn/elements/popover/index.js
  • luxen-ui/cdn/elements/popover/index.js.map
  • luxen-ui/cdn/elements/popover/popover.d.ts
  • luxen-ui/cdn/elements/popover/popover.d.ts.map
  • luxen-ui/cdn/elements/popover/popover.js
  • luxen-ui/cdn/elements/popover/popover.js.map
  • luxen-ui/cdn/elements/rating/index.d.ts
  • luxen-ui/cdn/elements/rating/index.d.ts.map
  • luxen-ui/cdn/elements/rating/index.js
  • luxen-ui/cdn/elements/rating/index.js.map
  • luxen-ui/cdn/elements/rating/rating.d.ts
  • luxen-ui/cdn/elements/rating/rating.d.ts.map
  • luxen-ui/cdn/elements/rating/rating.js
  • luxen-ui/cdn/elements/rating/rating.js.map
  • luxen-ui/cdn/elements/skeleton/index.d.ts
  • luxen-ui/cdn/elements/skeleton/index.d.ts.map
  • luxen-ui/cdn/elements/skeleton/index.js
  • luxen-ui/cdn/elements/skeleton/index.js.map
  • luxen-ui/cdn/elements/skeleton/skeleton.d.ts
  • luxen-ui/cdn/elements/skeleton/skeleton.d.ts.map
  • luxen-ui/cdn/elements/skeleton/skeleton.js
  • luxen-ui/cdn/elements/skeleton/skeleton.js.map
  • luxen-ui/cdn/elements/spinner/index.d.ts
  • luxen-ui/cdn/elements/spinner/index.d.ts.map
  • luxen-ui/cdn/elements/spinner/index.js
  • luxen-ui/cdn/elements/spinner/index.js.map
  • luxen-ui/cdn/elements/spinner/spinner.d.ts
  • luxen-ui/cdn/elements/spinner/spinner.d.ts.map
  • luxen-ui/cdn/elements/spinner/spinner.js
  • luxen-ui/cdn/elements/spinner/spinner.js.map
  • luxen-ui/cdn/elements/sticky-bar/index.d.ts
  • luxen-ui/cdn/elements/sticky-bar/index.d.ts.map
  • luxen-ui/cdn/elements/sticky-bar/index.js
  • luxen-ui/cdn/elements/sticky-bar/index.js.map
  • luxen-ui/cdn/elements/sticky-bar/sticky-bar.d.ts
  • luxen-ui/cdn/elements/sticky-bar/sticky-bar.d.ts.map
  • luxen-ui/cdn/elements/sticky-bar/sticky-bar.js
  • luxen-ui/cdn/elements/sticky-bar/sticky-bar.js.map
  • luxen-ui/cdn/elements/stories-viewer/index.d.ts
  • luxen-ui/cdn/elements/stories-viewer/index.d.ts.map
  • luxen-ui/cdn/elements/stories-viewer/index.js
  • luxen-ui/cdn/elements/stories-viewer/index.js.map
  • luxen-ui/cdn/elements/stories-viewer/stories-viewer.d.ts
  • luxen-ui/cdn/elements/stories-viewer/stories-viewer.d.ts.map
  • luxen-ui/cdn/elements/stories-viewer/stories-viewer.js
  • luxen-ui/cdn/elements/stories-viewer/stories-viewer.js.map
  • luxen-ui/cdn/elements/stories/index.d.ts
  • luxen-ui/cdn/elements/stories/index.d.ts.map
  • luxen-ui/cdn/elements/stories/index.js
  • luxen-ui/cdn/elements/stories/index.js.map
  • luxen-ui/cdn/elements/stories/stories.d.ts
  • luxen-ui/cdn/elements/stories/stories.d.ts.map
  • luxen-ui/cdn/elements/stories/stories.js
  • luxen-ui/cdn/elements/stories/stories.js.map
  • luxen-ui/cdn/elements/story/index.d.ts
  • luxen-ui/cdn/elements/story/index.d.ts.map
  • luxen-ui/cdn/elements/story/index.js
  • luxen-ui/cdn/elements/story/index.js.map
  • luxen-ui/cdn/elements/story/story.d.ts
  • luxen-ui/cdn/elements/story/story.d.ts.map
  • luxen-ui/cdn/elements/story/story.js
  • luxen-ui/cdn/elements/story/story.js.map
  • luxen-ui/cdn/elements/tabs/index.d.ts
  • luxen-ui/cdn/elements/tabs/index.d.ts.map
  • luxen-ui/cdn/elements/tabs/index.js
  • luxen-ui/cdn/elements/tabs/index.js.map
  • luxen-ui/cdn/elements/tabs/tabs.d.ts
  • luxen-ui/cdn/elements/tabs/tabs.d.ts.map
  • luxen-ui/cdn/elements/tabs/tabs.js
  • luxen-ui/cdn/elements/tabs/tabs.js.map
  • luxen-ui/cdn/elements/toast/index.d.ts
  • luxen-ui/cdn/elements/toast/index.d.ts.map
  • luxen-ui/cdn/elements/toast/index.js
  • luxen-ui/cdn/elements/toast/index.js.map
  • luxen-ui/cdn/elements/toast/toast.d.ts
  • luxen-ui/cdn/elements/toast/toast.d.ts.map
  • luxen-ui/cdn/elements/toast/toast.js
  • luxen-ui/cdn/elements/toast/toast.js.map
  • luxen-ui/cdn/elements/tooltip/index.d.ts
  • luxen-ui/cdn/elements/tooltip/index.d.ts.map
  • luxen-ui/cdn/elements/tooltip/index.js
  • luxen-ui/cdn/elements/tooltip/index.js.map
  • luxen-ui/cdn/elements/tooltip/tooltip.d.ts
  • luxen-ui/cdn/elements/tooltip/tooltip.d.ts.map
  • luxen-ui/cdn/elements/tooltip/tooltip.js
  • luxen-ui/cdn/elements/tooltip/tooltip.js.map
  • luxen-ui/cdn/elements/tree-item/index.d.ts
  • luxen-ui/cdn/elements/tree-item/index.d.ts.map
  • luxen-ui/cdn/elements/tree-item/index.js
  • luxen-ui/cdn/elements/tree-item/index.js.map
  • luxen-ui/cdn/elements/tree-item/tree-item.d.ts
  • luxen-ui/cdn/elements/tree-item/tree-item.d.ts.map
  • luxen-ui/cdn/elements/tree-item/tree-item.js
  • luxen-ui/cdn/elements/tree-item/tree-item.js.map
  • luxen-ui/cdn/elements/tree/index.d.ts
  • luxen-ui/cdn/elements/tree/index.d.ts.map
  • luxen-ui/cdn/elements/tree/index.js
  • luxen-ui/cdn/elements/tree/index.js.map
  • luxen-ui/cdn/elements/tree/tree.d.ts
  • luxen-ui/cdn/elements/tree/tree.d.ts.map
  • luxen-ui/cdn/elements/tree/tree.js
  • luxen-ui/cdn/elements/tree/tree.js.map
  • luxen-ui/cdn/index.d.ts
  • luxen-ui/cdn/index.d.ts.map
  • luxen-ui/cdn/index.js
  • luxen-ui/cdn/registry.d.ts
  • luxen-ui/cdn/registry.d.ts.map
  • luxen-ui/cdn/registry.js
  • luxen-ui/cdn/registry.js.map
  • luxen-ui/cdn/shared/controllers/popover.d.ts
  • luxen-ui/cdn/shared/controllers/popover.d.ts.map
  • luxen-ui/cdn/shared/controllers/popover.js
  • luxen-ui/cdn/shared/controllers/popover.js.map
  • luxen-ui/cdn/shared/luxen-element.d.ts
  • luxen-ui/cdn/shared/luxen-element.d.ts.map
  • luxen-ui/cdn/shared/luxen-element.js
  • luxen-ui/cdn/shared/luxen-element.js.map
  • luxen-ui/cdn/shared/luxen-form-associated-element.d.ts
  • luxen-ui/cdn/shared/luxen-form-associated-element.d.ts.map
  • luxen-ui/cdn/shared/luxen-form-associated-element.js
  • luxen-ui/cdn/shared/luxen-form-associated-element.js.map
  • luxen-ui/cdn/shared/styles/host.styles.d.ts
  • luxen-ui/cdn/shared/styles/host.styles.d.ts.map
  • luxen-ui/cdn/shared/styles/host.styles.js
  • luxen-ui/cdn/shared/styles/host.styles.js.map
  • luxen-ui/cdn/styles/elements/avatar.css
  • luxen-ui/cdn/styles/elements/badge.css
  • luxen-ui/cdn/styles/elements/button.css
  • luxen-ui/cdn/styles/elements/close-button/circle.css
  • luxen-ui/cdn/styles/elements/close-button/ring.css
  • luxen-ui/cdn/styles/elements/close-button/square.css
  • luxen-ui/cdn/styles/elements/disclosure.css
  • luxen-ui/cdn/styles/elements/divider.css
  • luxen-ui/cdn/styles/elements/input-otp.css
  • luxen-ui/cdn/styles/elements/input-stepper/default.css
  • luxen-ui/cdn/styles/elements/input-stepper/rounded.css
  • luxen-ui/cdn/styles/elements/kbd.css
  • luxen-ui/cdn/styles/elements/progress.css
  • luxen-ui/cdn/styles/elements/select.css
  • luxen-ui/cdn/styles/elements/skeleton.css
  • luxen-ui/cdn/styles/elements/stories.css
  • luxen-ui/cdn/styles/elements/story.css
  • luxen-ui/cdn/styles/elements/tabs/enclosed.css
  • luxen-ui/cdn/styles/elements/tabs/line.css
  • luxen-ui/cdn/styles/elements/toast.css
  • luxen-ui/cdn/styles/index.css
  • luxen-ui/cdn/vite-env.d.js
  • luxen-ui/css
  • luxen-ui/css/avatar
  • luxen-ui/css/badge
  • luxen-ui/css/base
  • luxen-ui/css/button
  • luxen-ui/css/close-button/circle
  • luxen-ui/css/close-button/ring
  • luxen-ui/css/close-button/square
  • luxen-ui/css/disclosure
  • luxen-ui/css/divider
  • luxen-ui/css/input-otp
  • luxen-ui/css/input-stepper/default
  • luxen-ui/css/input-stepper/rounded
  • luxen-ui/css/kbd
  • luxen-ui/css/progress
  • luxen-ui/css/select
  • luxen-ui/css/skeleton
  • luxen-ui/css/stories
  • luxen-ui/css/story
  • luxen-ui/css/tabs/enclosed
  • luxen-ui/css/tabs/line
  • luxen-ui/css/toast
  • luxen-ui/dialog
  • luxen-ui/dialog/element
  • luxen-ui/dist/css/elements/avatar.css
  • luxen-ui/dist/css/elements/badge.css
  • luxen-ui/dist/css/elements/button.css
  • luxen-ui/dist/css/elements/close-button/circle.css
  • luxen-ui/dist/css/elements/close-button/ring.css
  • luxen-ui/dist/css/elements/close-button/square.css
  • luxen-ui/dist/css/elements/disclosure.css
  • luxen-ui/dist/css/elements/divider.css
  • luxen-ui/dist/css/elements/input-otp.css
  • luxen-ui/dist/css/elements/input-stepper/default.css
  • luxen-ui/dist/css/elements/input-stepper/rounded.css
  • luxen-ui/dist/css/elements/kbd.css
  • luxen-ui/dist/css/elements/progress.css
  • luxen-ui/dist/css/elements/select.css
  • luxen-ui/dist/css/elements/skeleton.css
  • luxen-ui/dist/css/elements/stories.css
  • luxen-ui/dist/css/elements/story.css
  • luxen-ui/dist/css/elements/tabs/enclosed.css
  • luxen-ui/dist/css/elements/tabs/line.css
  • luxen-ui/dist/css/elements/toast.css
  • luxen-ui/dist/css/index.css
  • luxen-ui/dist/custom-elements.json
  • luxen-ui/dist/elements/avatar/avatar.css
  • luxen-ui/dist/elements/avatar/avatar.d.ts
  • luxen-ui/dist/elements/avatar/avatar.d.ts.map
  • luxen-ui/dist/elements/avatar/avatar.js
  • luxen-ui/dist/elements/avatar/index.d.ts
  • luxen-ui/dist/elements/avatar/index.d.ts.map
  • luxen-ui/dist/elements/avatar/index.js
  • luxen-ui/dist/elements/badge/badge.d.ts
  • luxen-ui/dist/elements/badge/badge.d.ts.map
  • luxen-ui/dist/elements/badge/badge.js
  • luxen-ui/dist/elements/badge/index.d.ts
  • luxen-ui/dist/elements/badge/index.d.ts.map
  • luxen-ui/dist/elements/badge/index.js
  • luxen-ui/dist/elements/carousel-item/carousel-item.css
  • luxen-ui/dist/elements/carousel-item/carousel-item.d.ts
  • luxen-ui/dist/elements/carousel-item/carousel-item.d.ts.map
  • luxen-ui/dist/elements/carousel-item/carousel-item.js
  • luxen-ui/dist/elements/carousel-item/index.d.ts
  • luxen-ui/dist/elements/carousel-item/index.d.ts.map
  • luxen-ui/dist/elements/carousel-item/index.js
  • luxen-ui/dist/elements/carousel/carousel.css
  • luxen-ui/dist/elements/carousel/carousel.d.ts
  • luxen-ui/dist/elements/carousel/carousel.d.ts.map
  • luxen-ui/dist/elements/carousel/carousel.js
  • luxen-ui/dist/elements/carousel/index.d.ts
  • luxen-ui/dist/elements/carousel/index.d.ts.map
  • luxen-ui/dist/elements/carousel/index.js
  • luxen-ui/dist/elements/dialog/dialog.css
  • luxen-ui/dist/elements/dialog/dialog.d.ts
  • luxen-ui/dist/elements/dialog/dialog.d.ts.map
  • luxen-ui/dist/elements/dialog/dialog.js
  • luxen-ui/dist/elements/dialog/dialog.styles.d.ts
  • luxen-ui/dist/elements/dialog/dialog.styles.d.ts.map
  • luxen-ui/dist/elements/dialog/dialog.styles.js
  • luxen-ui/dist/elements/dialog/index.d.ts
  • luxen-ui/dist/elements/dialog/index.d.ts.map
  • luxen-ui/dist/elements/dialog/index.js
  • luxen-ui/dist/elements/divider/divider.d.ts
  • luxen-ui/dist/elements/divider/divider.d.ts.map
  • luxen-ui/dist/elements/divider/divider.js
  • luxen-ui/dist/elements/divider/index.d.ts
  • luxen-ui/dist/elements/divider/index.d.ts.map
  • luxen-ui/dist/elements/divider/index.js
  • luxen-ui/dist/elements/drawer/drawer.css
  • luxen-ui/dist/elements/drawer/drawer.d.ts
  • luxen-ui/dist/elements/drawer/drawer.d.ts.map
  • luxen-ui/dist/elements/drawer/drawer.js
  • luxen-ui/dist/elements/drawer/index.d.ts
  • luxen-ui/dist/elements/drawer/index.d.ts.map
  • luxen-ui/dist/elements/drawer/index.js
  • luxen-ui/dist/elements/dropdown-item/dropdown-item.css
  • luxen-ui/dist/elements/dropdown-item/dropdown-item.d.ts
  • luxen-ui/dist/elements/dropdown-item/dropdown-item.d.ts.map
  • luxen-ui/dist/elements/dropdown-item/dropdown-item.js
  • luxen-ui/dist/elements/dropdown-item/index.d.ts
  • luxen-ui/dist/elements/dropdown-item/index.d.ts.map
  • luxen-ui/dist/elements/dropdown-item/index.js
  • luxen-ui/dist/elements/dropdown/dropdown.css
  • luxen-ui/dist/elements/dropdown/dropdown.d.ts
  • luxen-ui/dist/elements/dropdown/dropdown.d.ts.map
  • luxen-ui/dist/elements/dropdown/dropdown.js
  • luxen-ui/dist/elements/dropdown/index.d.ts
  • luxen-ui/dist/elements/dropdown/index.d.ts.map
  • luxen-ui/dist/elements/dropdown/index.js
  • luxen-ui/dist/elements/icon/icon.css
  • luxen-ui/dist/elements/icon/icon.d.ts
  • luxen-ui/dist/elements/icon/icon.d.ts.map
  • luxen-ui/dist/elements/icon/icon.js
  • luxen-ui/dist/elements/icon/index.d.ts
  • luxen-ui/dist/elements/icon/index.d.ts.map
  • luxen-ui/dist/elements/icon/index.js
  • luxen-ui/dist/elements/input-otp/index.d.ts
  • luxen-ui/dist/elements/input-otp/index.d.ts.map
  • luxen-ui/dist/elements/input-otp/index.js
  • luxen-ui/dist/elements/input-otp/input-otp.d.ts
  • luxen-ui/dist/elements/input-otp/input-otp.d.ts.map
  • luxen-ui/dist/elements/input-otp/input-otp.js
  • luxen-ui/dist/elements/input-stepper/index.d.ts
  • luxen-ui/dist/elements/input-stepper/index.d.ts.map
  • luxen-ui/dist/elements/input-stepper/index.js
  • luxen-ui/dist/elements/input-stepper/input-stepper.d.ts
  • luxen-ui/dist/elements/input-stepper/input-stepper.d.ts.map
  • luxen-ui/dist/elements/input-stepper/input-stepper.js
  • luxen-ui/dist/elements/popover/index.d.ts
  • luxen-ui/dist/elements/popover/index.d.ts.map
  • luxen-ui/dist/elements/popover/index.js
  • luxen-ui/dist/elements/popover/popover.css
  • luxen-ui/dist/elements/popover/popover.d.ts
  • luxen-ui/dist/elements/popover/popover.d.ts.map
  • luxen-ui/dist/elements/popover/popover.js
  • luxen-ui/dist/elements/rating/index.d.ts
  • luxen-ui/dist/elements/rating/index.d.ts.map
  • luxen-ui/dist/elements/rating/index.js
  • luxen-ui/dist/elements/rating/rating.css
  • luxen-ui/dist/elements/rating/rating.d.ts
  • luxen-ui/dist/elements/rating/rating.d.ts.map
  • luxen-ui/dist/elements/rating/rating.js
  • luxen-ui/dist/elements/skeleton/index.d.ts
  • luxen-ui/dist/elements/skeleton/index.d.ts.map
  • luxen-ui/dist/elements/skeleton/index.js
  • luxen-ui/dist/elements/skeleton/skeleton.d.ts
  • luxen-ui/dist/elements/skeleton/skeleton.d.ts.map
  • luxen-ui/dist/elements/skeleton/skeleton.js
  • luxen-ui/dist/elements/spinner/index.d.ts
  • luxen-ui/dist/elements/spinner/index.d.ts.map
  • luxen-ui/dist/elements/spinner/index.js
  • luxen-ui/dist/elements/spinner/spinner.css
  • luxen-ui/dist/elements/spinner/spinner.d.ts
  • luxen-ui/dist/elements/spinner/spinner.d.ts.map
  • luxen-ui/dist/elements/spinner/spinner.js
  • luxen-ui/dist/elements/sticky-bar/index.d.ts
  • luxen-ui/dist/elements/sticky-bar/index.d.ts.map
  • luxen-ui/dist/elements/sticky-bar/index.js
  • luxen-ui/dist/elements/sticky-bar/sticky-bar.css
  • luxen-ui/dist/elements/sticky-bar/sticky-bar.d.ts
  • luxen-ui/dist/elements/sticky-bar/sticky-bar.d.ts.map
  • luxen-ui/dist/elements/sticky-bar/sticky-bar.js
  • luxen-ui/dist/elements/stories-viewer/index.d.ts
  • luxen-ui/dist/elements/stories-viewer/index.d.ts.map
  • luxen-ui/dist/elements/stories-viewer/index.js
  • luxen-ui/dist/elements/stories-viewer/stories-viewer.css
  • luxen-ui/dist/elements/stories-viewer/stories-viewer.d.ts
  • luxen-ui/dist/elements/stories-viewer/stories-viewer.d.ts.map
  • luxen-ui/dist/elements/stories-viewer/stories-viewer.js
  • luxen-ui/dist/elements/stories/index.d.ts
  • luxen-ui/dist/elements/stories/index.d.ts.map
  • luxen-ui/dist/elements/stories/index.js
  • luxen-ui/dist/elements/stories/stories.d.ts
  • luxen-ui/dist/elements/stories/stories.d.ts.map
  • luxen-ui/dist/elements/stories/stories.js
  • luxen-ui/dist/elements/story/index.d.ts
  • luxen-ui/dist/elements/story/index.d.ts.map
  • luxen-ui/dist/elements/story/index.js
  • luxen-ui/dist/elements/story/story.d.ts
  • luxen-ui/dist/elements/story/story.d.ts.map
  • luxen-ui/dist/elements/story/story.js
  • luxen-ui/dist/elements/tabs/index.d.ts
  • luxen-ui/dist/elements/tabs/index.d.ts.map
  • luxen-ui/dist/elements/tabs/index.js
  • luxen-ui/dist/elements/tabs/tabs.d.ts
  • luxen-ui/dist/elements/tabs/tabs.d.ts.map
  • luxen-ui/dist/elements/tabs/tabs.js
  • luxen-ui/dist/elements/toast/index.d.ts
  • luxen-ui/dist/elements/toast/index.d.ts.map
  • luxen-ui/dist/elements/toast/index.js
  • luxen-ui/dist/elements/toast/toast.d.ts
  • luxen-ui/dist/elements/toast/toast.d.ts.map
  • luxen-ui/dist/elements/toast/toast.js
  • luxen-ui/dist/elements/tooltip/index.d.ts
  • luxen-ui/dist/elements/tooltip/index.d.ts.map
  • luxen-ui/dist/elements/tooltip/index.js
  • luxen-ui/dist/elements/tooltip/tooltip.css
  • luxen-ui/dist/elements/tooltip/tooltip.d.ts
  • luxen-ui/dist/elements/tooltip/tooltip.d.ts.map
  • luxen-ui/dist/elements/tooltip/tooltip.js
  • luxen-ui/dist/elements/tree-item/index.d.ts
  • luxen-ui/dist/elements/tree-item/index.d.ts.map
  • luxen-ui/dist/elements/tree-item/index.js
  • luxen-ui/dist/elements/tree-item/tree-item.css
  • luxen-ui/dist/elements/tree-item/tree-item.d.ts
  • luxen-ui/dist/elements/tree-item/tree-item.d.ts.map
  • luxen-ui/dist/elements/tree-item/tree-item.js
  • luxen-ui/dist/elements/tree/index.d.ts
  • luxen-ui/dist/elements/tree/index.d.ts.map
  • luxen-ui/dist/elements/tree/index.js
  • luxen-ui/dist/elements/tree/tree.css
  • luxen-ui/dist/elements/tree/tree.d.ts
  • luxen-ui/dist/elements/tree/tree.d.ts.map
  • luxen-ui/dist/elements/tree/tree.js
  • luxen-ui/divider
  • luxen-ui/divider/element
  • luxen-ui/drawer
  • luxen-ui/drawer/element
  • luxen-ui/dropdown
  • luxen-ui/dropdown-item
  • luxen-ui/dropdown-item/element
  • luxen-ui/dropdown/element
  • luxen-ui/icon
  • luxen-ui/icon/element
  • luxen-ui/input-otp
  • luxen-ui/input-otp/element
  • luxen-ui/input-stepper
  • luxen-ui/input-stepper/element
  • luxen-ui/luxen-element
  • luxen-ui/luxen-form-associated-element
  • luxen-ui/popover
  • luxen-ui/popover/element
  • luxen-ui/postcss-plugin-prefix
  • luxen-ui/rating
  • luxen-ui/rating/element
  • luxen-ui/skeleton
  • luxen-ui/skeleton/element
  • luxen-ui/spinner
  • luxen-ui/spinner/element
  • luxen-ui/sticky-bar
  • luxen-ui/sticky-bar/element
  • luxen-ui/stories
  • luxen-ui/stories-viewer
  • luxen-ui/stories-viewer/element
  • luxen-ui/stories/element
  • luxen-ui/story
  • luxen-ui/story/element
  • luxen-ui/tabs
  • luxen-ui/tabs/element
  • luxen-ui/toast
  • luxen-ui/toast/element
  • luxen-ui/tooltip
  • luxen-ui/tooltip/element
  • luxen-ui/tree
  • luxen-ui/tree-item
  • luxen-ui/tree-item/element
  • luxen-ui/tree/element
  • luxen-ui/vite-plugin

Readme

Luxen UI

npm version lit CI license

A Web UI library built with with modern CSS-first, native HTML and custom HTML elements.

Features

  • Web Components — Custom elements with the l- prefix (e.g. <l-badge>, <l-tooltip>)
  • CSS-only elements — Styled with plain CSS classes, no JavaScript required
  • Modular — Import only what you need (JS and CSS are individually tree-shakeable)
  • CDN-ready — Ship individual modules directly from a CDN

Documentation

Visit https://luxen-ui.com to explore the documentation.

📦 Elements

Name HTML tag Type
Avatar <l-avatar> ⬢ Custom HTML Element (with Shadow DOM)
Badge <l-badge> ◇ Custom HTML Element (no Shadow DOM)
Button <button> ⏣ Native HTML Element
Carousel <l-carousel> ⬢ Custom HTML Element (with Shadow DOM)
Carousel Item <l-carousel-item> ⬢ Custom HTML Element (with Shadow DOM)
Close Button <button> ⏣ Native HTML Element
Dialog <l-dialog> ⬢ Custom HTML Element (with Shadow DOM)
Disclosure <details> ⏣ Native HTML Element
Divider <l-divider> ◇ Custom HTML Element (no Shadow DOM)
Drawer <l-drawer> ⬢ Custom HTML Element (with Shadow DOM)
Dropdown <l-dropdown> ⬢ Custom HTML Element (with Shadow DOM)
Dropdown Item <l-dropdown-item> ⬢ Custom HTML Element (with Shadow DOM)
Icon <l-icon> ⬢ Custom HTML Element (with Shadow DOM)
Input OTP <l-input-otp> ⬡ Progressive Custom HTML Element
Input Stepper <l-input-stepper> ⬡ Progressive Custom HTML Element
Kbd <kbd> ⏣ Native HTML Element
Popover <l-popover> ⬢ Custom HTML Element (with Shadow DOM)
Progress <progress> ⏣ Native HTML Element
Rating <l-rating> ⬢ Custom HTML Element (with Shadow DOM)
Select <select> ⏣ Native HTML Element
Skeleton <l-skeleton> ◇ Custom HTML Element (no Shadow DOM)
Spinner <l-spinner> ⬢ Custom HTML Element (with Shadow DOM)
Tabs <l-tabs> ⬡ Progressive Custom HTML Element
Toast <l-toast> ◇ Custom HTML Element (no Shadow DOM)
Tooltip <l-tooltip> ⬢ Custom HTML Element (with Shadow DOM)
Tree <l-tree> ⬢ Custom HTML Element (with Shadow DOM)
Tree Item <l-tree-item> ⬢ Custom HTML Element (with Shadow DOM)

Install

npm install luxen-ui

Usage

// Import a web component
import 'luxen-ui/tooltip';

// Import a CSS-only element
import 'luxen-ui/css/button';
<button
  id="my-button"
  type="button"
  class="l-button"
>
  Hover me
</button>
<l-tooltip for="my-button">Hello world</l-tooltip>

Local Development

Requires Node.js >= 24 and pnpm.

pnpm install
pnpm build
# Dev servers
cd packages/ui && pnpm dev           # CSS watch
cd packages/ui && pnpm dev:elements  # Vite dev server
cd packages/docs && pnpm dev         # Docs (VitePress)

License

Licensed under the MIT license.