Cicerchie UI

A set of web components for building fast user interfaces.

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

Getting started

1. npm install -D @cicerchie/ui

2. TailwindCSS (^v3.0.0) is used for styling. For now it must be added manually in the project. Use this code in your project's tailwind.config.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.

3. Import the components you need, like this:

   <script>
     import { Button, InputText } from "@cicerchie/ui";
   </script>
   
   <Button>I'm the Button!</Button>
   <InputText placeholder="I'm the Input!" />

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

Built (for now) with:

• ♥ Love
• Svelte 3
• TailwindCSS