https://github.com/Polydile/dile-components

Custom elements catalog for all kind of projects and frameworks.
https://github.com/Polydile/dile-components

catalog components custom elements lit ui ui-components web

Last synced: 3 months ago
JSON representation

Custom elements catalog for all kind of projects and frameworks.

• Host: GitHub
• URL: https://github.com/Polydile/dile-components
• Owner: Polydile
• License: mit
• Created: 2020-04-22T21:50:53.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-07-05T14:22:17.000Z (4 months ago)
• Last Synced: 2024-07-07T09:09:14.044Z (4 months ago)
• Topics: catalog, components, custom, elements, lit, ui, ui-components, web
• Language: JavaScript
• Homepage: https://dile-components.polydile.com/
• Size: 13.1 MB
• Stars: 73
• Watchers: 7
• Forks: 10
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-lit - Dile Components - General use Web Components for websites and applications. (Component Libraries)
• awesome-web-components - Dile Components - General use Web Components for websites and applications. (Real World / Component Libraries)

README

        
# Dile Components V2

This is the "dile-components" catalog monorepo, a library of Custom Elements based on Lit and Web Components.

> If you are looking for the previous version of this component catalog, you can find it in this repository: 

## Packages in This Repository

- `@dile/ui`: Components for creating common User Interfaces, such as buttons, dialogs, custom form elements, etc.

- `@dile/utils`: Components that provide useful functionalities for web development.

- `@dile/icons`: Templates for implementing SVG icons within your components.

- `@dile/editor`: A Markdown WYSIWYG (What You See Is What You Get) editor for the web.

To utilize this component library, follow these steps.

## Installation

First install the repository where the desired component is located. For instance, to use the UI custom elements, install `@dile/ui`:

```bash

npm install @dile/ui

```

## Component usage

To utilize a component from this library, you must import the element you need. For example, to use the toast feedback element, use the following import:

```javascript

import '@dile/ui/components/toast/toast';

```

After importing, you can use the component in your application like so:

```html

```

## Complete docs

You will find a complete list of the custom elements, along with their properties, methods, events, and examples on the [dile-components website](https://dile-components.polydile.com/):

## Contribute

If you like to contribute publishing a component to this library, you will find a complete [guide to understand the components organization](https://dile-components.polydile.com/contribute/).