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: 5 days 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 (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-12-31T11:02:22.000Z (about 1 month ago)
• Last Synced: 2025-01-22T05:13:32.859Z (12 days ago)
• Topics: catalog, components, custom, elements, lit, ui, ui-components, web
• Language: JavaScript
• Homepage: https://dile-components.com
• Size: 12.7 MB
• Stars: 84
• Watchers: 7
• Forks: 15
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Dile Components V2

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

Find the full documentation and details of the 'dile-components' catalog at [dile-components.com](https://dile-components.com/)

> 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.

- `@dile/crud`: Customizable generic CRUD components.

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.js';

```

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/).