https://github.com/cicerchie/ui

Web components for fast user interfaces.
https://github.com/cicerchie/ui

consuming-components javascript svelte svelte-components svelte-ui svelte-ui-components svelte-v3 svelte3 sveltejs tailwind tailwind-css tailwindcss ui ui-components

Last synced: 10 months ago
JSON representation

Web components for fast user interfaces.

• Host: GitHub
• URL: https://github.com/cicerchie/ui
• Owner: cicerchie
• License: mit
• Created: 2020-08-26T16:59:56.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-04-08T18:05:07.000Z (over 3 years ago)
• Last Synced: 2025-02-15T22:46:18.620Z (over 1 year ago)
• Topics: consuming-components, javascript, svelte, svelte-components, svelte-ui, svelte-ui-components, svelte-v3, svelte3, sveltejs, tailwind, tailwind-css, tailwindcss, ui, ui-components
• Language: Svelte
• Homepage: https://cicerchie.github.io/ui
• Size: 7.54 MB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Cicerchie UI

A set of web components for building **fast** user interfaces.



![Lastest release](https://badgen.net/github/release/cicerchie/ui)

![License](https://badgen.net/github/license/cicerchie/ui)

![Github repo dependents](https://badgen.net/github/dependents-repo/cicerchie/ui)

![Github pkg dependents](https://badgen.net/github/dependents-pkg/cicerchie/ui)

![Github open issues](https://badgen.net/github/open-issues/cicerchie/ui)

![Github status](https://badgen.net/github/checks/cicerchie/ui/master/Release)

![Bundlephobia MinZip](https://badgen.net/bundlephobia/minzip/@cicerchie/ui)

![Bundlephobia dependency count](https://badgen.net/bundlephobia/dependency-count/@cicerchie/ui)

![Snyk](https://badgen.net/snyk/cicerchie/ui)

![Npm version](https://badgen.net/npm/v/@cicerchie/ui)

![Npm DT](https://badgen.net/npm/dt/@cicerchie/ui)

![Npm dependents](https://badgen.net/npm/dependents/@cicerchie/ui)

![Npm types](https://badgen.net/npm/types/@cicerchie/ui)

---

### WARNING!

These components are still "experimental" (`v0.x.x`).


Some of them are not tested as rigourously as it should be and none of them have been through code review.


Use them at your own risk and check that them do what you want them to do.

---

## Demo

[Explore the Storybook](https://cicerchie.github.io/ui)

## Getting started

1.  `npm install -D @cicerchie/ui`

1.  [TailwindCSS](https://tailwindcss.com) (^v3.0.0) is used for styling. For now [it must be added manually in the project](https://tailwindcss.com/docs/installation).


    Use this code in your project's **tailwind.config.js**:

    ```js

    const resolveConfig = require('tailwindcss/resolveConfig');

    const cicerchieUITailwindConfig = require('@cicerchie/ui/tailwind.config');

    module.exports = resolveConfig(

    	{

    		// your optional Tailwind config here...

    	},

    	cicerchieUITailwindConfig

    );

    ```

    _We are planning to make available in the future an optional version of each component that already contains the CSS needed for it to work._

1.  Import the components you need, like this:

    ```svelte

    

    	import { Button, InputText } from '@cicerchie/ui';

    

    I'm the Button!

    

    ```

### Consuming components in a **Svelte 3 project**

Svelte apps can import components source code directly if they are using a bundler plugin like [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) or [svelte-loader](https://github.com/sveltejs/svelte-loader).

### Consuming components in **any JavaScript project**

You can import components using plain JavaScript module or UMD.

### Consuming components as **Web Components**

COMING SOON.

## Changelog

Is automagically updated with each release and [you can read it here](https://github.com/cicerchie/ui/blob/master/CHANGELOG.md).

---

### Built (for now) with:

- ♥ Love

- [Svelte 3](https://svelte.dev)

- [TailwindCSS](https://tailwindcss.com)