https://github.com/zedix/zedix-ui

A library of essential web components (lit-based), serving as a foundation for web apps or design systems. Mostly headless. Works with any frameworks.
https://github.com/zedix/zedix-ui

custom-element design-system dialog embla-carousel floating-ui lit ui-library web-components

Last synced: about 5 hours ago
JSON representation

A library of essential web components (lit-based), serving as a foundation for web apps or design systems. Mostly headless. Works with any frameworks.

• Host: GitHub
• URL: https://github.com/zedix/zedix-ui
• Owner: zedix
• License: mit
• Created: 2019-08-30T12:56:36.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2024-10-26T21:54:29.000Z (11 days ago)
• Last Synced: 2024-10-26T23:19:00.279Z (11 days ago)
• Topics: custom-element, design-system, dialog, embla-carousel, floating-ui, lit, ui-library, web-components
• Language: TypeScript
• Homepage: https://zedix-ui-storybook.netlify.app/
• Size: 6.79 MB
• Stars: 4
• Watchers: 1
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# @zedix/zedix-ui

![version](https://img.shields.io/github/package-json/v/zedix/zedix-ui.svg?maxAge=60)

[![lit](https://img.shields.io/badge/lib-lit-blue.svg?maxAge=60)](https://github.com/lit/lit/)

[![Run tests](https://github.com/zedix/zedix-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/zedix/zedix-ui/actions/workflows/ci.yml)

`@zedix/zedix-ui` is a library of essential web components ([lit-based](https://github.com/lit/lit/)) serving as a foundation for web apps or design systems.

The UI kit provides primitives such as:

- `autocomplete`

- `carousel`

- `details`

- `dialog`

- `drawer`

- `popover`

- `skeleton`

- `spinner`

- `tooltip`

- …

## Demo

[Demo ↗](https://zedix-ui-storybook.netlify.app)



  

  



## Installation

```

❯ yarn add @zedix/zedix-ui

```

## Usage

Tooltip example:

```js

import '@zedix/zedix-ui/dist/components/tooltip/tooltip.js';

<script>

<button id="btn-close" type="button">✗<button>

<zx-tooltip

  for="btn-close"

  class="px-3 py-2"

  placement="bottom"

  trigger="focus hover"

  hide-delay="150"

>

  Close

</zx-tooltip>

```