https://github.com/okcontract/uic
OKcontract UI Components is an open-source UI component library built with Svelte, Tailwind CSS and DaisyUI. This library helps to streamline the development of front-ends for various projects.
https://github.com/okcontract/uic
daisyui svelte-components tailwindcss ui-components
Last synced: 3 months ago
JSON representation
OKcontract UI Components is an open-source UI component library built with Svelte, Tailwind CSS and DaisyUI. This library helps to streamline the development of front-ends for various projects.
- Host: GitHub
- URL: https://github.com/okcontract/uic
- Owner: okcontract
- License: mit
- Created: 2024-04-12T09:48:35.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-15T04:12:01.000Z (5 months ago)
- Last Synced: 2025-01-22T09:35:45.953Z (5 months ago)
- Topics: daisyui, svelte-components, tailwindcss, ui-components
- Language: Svelte
- Homepage: https://uic.pages.dev
- Size: 500 KB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://uic.pages.dev)
[](https://github.com/okcontract/cells)
# OKcontract UI Components (UIC)
**OKcontract UI Components** is an open-source UI component library built with
[Svelte](https://svelte.dev/), [Tailwind CSS](https://tailwindcss.com/) and
[DaisyUI](https://daisyui.com/). This library helps to streamline the
development of front-ends for various projects.
UIC is a low-level component library that depends on
[cells](https://github.com/okcontract/cells), a simplified reactive functional
programming library.
In its current state, **cells** is not yet used throughout the components but
our vision is to tighten the integration, making programming easier. In
particular, this will also enable _i18n_ support in the future.
The list of current components is maintained in the
[StoryBook](https://uic.pages.dev).
# Getting Started
## Install UIC
Install the package with `npm` or your favorite package manager:
```sh
npm i --save @okcontract/uic
```
## Tailwind + DaisyUI
OKcontract UI Components use
[Tailwind CSS](https://tailwindcss.com/docs/installation), an open-source,
utility-first CSS framework. Tailwind CSS enables easy and flexible
customization of the components' appearance.
All UIC components use [daisyUI](https://daisyui.com/docs/install) - a popular
component library on top of Tailwind CSS. UIC uses daisyUI class names like
`btn`, `card`, `tooltip`, `checkbox` etc.
**daisyUI** comes with dozens of pre-built
[themes](https://daisyui.com/docs/themes/) `light`, `dark`, `cupcake` etc, and
allows to easily create a custom theme. Also, it allows to use multiple themes
in your app.
Learn more about daisyUI classes [here](https://daisyui.com/docs/use/).
### Use UIC with your own daisyUI theme
To apply your own theme to UIC components, you need to use a **daisyUI**
theme. If your app uses daisyUI, it will apply to all components.
In your `tailwind.config.js` you need to include a path to the files
`@okcontract/uic/dist`. Here's an example:
```js
// tailwind.config.js
import daisy from "daisyui";
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,js,svelte,ts}",
"./node_modules/@okcontract/uic/dist/**/*.{js,ts,jsx,tsx}",
],
plugins: [daisy],
};
```
### Use together with another CSS library
If you use another CSS library in your app, you have to generate a custom
theme from your colors and apply it around a UIC component using a
`data-theme` tag. In that case, install `tailwindcss`, `autoprefixer` and
`daisyui` plugin for Tailwind CSS.
Once setup, simply add `data-theme='THEME_NAME'` to any element and the theme
will apply on the content inside it.
```html
The component inside this div will have daisyUI dark theme.
```
### Use OKcontract pre-built stylesheet
OKcontract UIC comes with pre-built daisyUI theme stylesheet. If you prefer to
use OKcontract pre-built theme (which is used in our
[Storybook](https://uic.pages.dev)), you can include `style.min.css` in your
`main.js|ts` or its equivalent.
```js
// main.js
import "[PATH]/node_modules/@okcontract/uic/dist/style.min.css";
```
## How to use UIC components
### Hello, Button
To use a UIC component in your app, import it into your `.svelte` file and
customize actions, labels etc.
```svelte
import { Button } from "@okcontract/uic";
let disabled = false;
// const logEvent = ...
logEvent("click", event)}>
```
### Hello, component with cells
Cells may have a fancy name and super-powers, but they are compatible with
Svelte Store interface so you can think of them as stores.
For example, `Collapsible` component is built using two cells as props:
`disabled` and `isOpen`. This means that changing their value reactively
updates the Collapsible state from anywhere.
```svelte
import { Collapsible } from "@okcontract/uic";
// @see cells documentation about creating proxies
import { proxy } from "./lib";
const open = proxy.new(false, "disabled");
// programmatically update open (including outside of this component)
// $open = true;
{heading}
{content}
```
## Storybook
For more examples, refer to the [Storybook](https://uic.pages.dev).
# About
`UIC` is built at [OKcontract](https://okcontract.com) and is released under
the MIT license.
Contributors are welcome, feel free to submit PRs directly for small changes.
You can also reach out in our [Discord](https://discord.gg/Ns45RTUXka) or
contact us on [Twitter](https://x.com/okcontract) in advance for larger
contributions.
This work is supported in part by a RFG grant from
[Optimism](https://optimism.io).