Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ogshawnlee/malachite-ui
Malachite UI is a headless component library built from scratch for Svelte inspired by Tailwind's Headless UI.
https://github.com/ogshawnlee/malachite-ui
component-library headless svelte typescript
Last synced: about 2 months ago
JSON representation
Malachite UI is a headless component library built from scratch for Svelte inspired by Tailwind's Headless UI.
- Host: GitHub
- URL: https://github.com/ogshawnlee/malachite-ui
- Owner: OGShawnLee
- Created: 2022-04-23T22:34:01.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-15T21:12:56.000Z (7 months ago)
- Last Synced: 2024-11-01T03:18:23.429Z (2 months ago)
- Topics: component-library, headless, svelte, typescript
- Language: TypeScript
- Homepage: https://malachite-ui.vercel.app
- Size: 906 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Malachite UI
**Malachite UI** is a **component library** inspired by _Tailwind's Headless UI_. Built completely from scratch in _TypeScript_ for **Svelte**, designed to work nicely with CSS Frameworks like **Tailwind CSS** or **WindiCSS**.
## Table of contents
- [Malachite UI](#malachite-ui)
- [Table of contents](#table-of-contents)
- [Installation](#installation)
- [Features](#features)
- [Components](#components)
- [Accordion](#accordion)
- [Button](#button)
- [Dialog](#dialog)
- [Disclosure](#disclosure)
- [Menu](#menu)
- [Navigable](#navigable)
- [Popover](#popover)
- [Switch](#switch)
- [Tabs](#tabs)
- [Toast](#toast)
## Installation
```
npm install malachite-ui -D
```
```
pnpm add malachite-ui -D
```
## Features
- **Functional**: Sit down and relax. Most components will handle all logic and state on their own.
- **Headless**: Build beautiful and unique components, we don't stand in your way.
- **Reactive**: Worry no more, components will react instantly to any prop changes.
- **Svelte Friendly**: All components are handled individually by a single action, meaning you can extract and use them on vanilla DOM elements, this way you have absolute control. You can use Svelte directives like transitions!
```html
Toggle
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Close Me
```
- **Maximum Styling**: No more convoluted classNames. Most components support what I call **Object ClassNames** and **Switch ClassNames** (Don't know if other libraries have this but it's cool nonetheless):
```html
Toggle
The Tab
"button `${isOpen ? 'button--open' : ''}`"}>
Toggle
Toggle
```
You can import and use the **useClassNameResolver hook** and apply it to normal HTML elements if you are using actions:
```html
import { useClassNameResolver } from 'malachite-ui/hooks';
let isDarkTheme = false;
const resolve = useClassNameResolver<'CHECKED' | 'DISABLED'>({
base: 'switch',
disabled: 'switch--disabled',
checked: { on: 'switch--checked', off: 'switch--unchecked' }
});
Toggle Dark Theme
```
This might seem like **overkill** if you are using **simple and short classNames**, however if you are using **utility CSS frameworks** like **Tailwind CSS** and **WindiCSS** you will very likely have a **substantial amount of classNames**, in that case this really comes in handy for **better readability**.
```html
{question}
{answer}
```
## Components
### Accordion
```html
First Item
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Close Me
```
### Button
```svelte
import { Button } from 'malachite-ui';
let bold = false;
Turn text Bold
Lorem ipsum dolor sit amet consectetur adipisicing elit.
```
### Dialog
```html
let open = false;
let ref: HTMLElement;
Toggle
Delete Account
All your data will be permanently deleted. Are you sure about that?
Go Ahead
Cancel
```
### Disclosure
```html
First Item
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Close Me
```
### Menu
```html
Toggle
Edit
```
### Navigable
```html
First Item
Second Item
Third Item
```
### Popover
```html
First Item
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Close Me
First Item
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Close Me
First Item
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Close Me
```
### Switch
```html
Toggle
Turn on Notifications
We will send you notifications about our latest products once a week
```
### Tabs
```html
First Tab
First Panel
```
### Toast
```svelte
import { Toast, ToastGroup, useToast } from 'malachite-ui';
// add custom fields to your toast object
interface CustomToast extends ToastObject {
emoji: string;
}
// this is a store; you can create it and access it from anywhere in your app
let toast = useToast<CustomToast>(5_000, {
// a class name for each toast type
// access them in your markup with the getToastTypeClassName method
info: "bg-neutral-800",
success: "bg-green-800",
warning: "bg-yellow-800",
error: "bg-red-800"
});
function add() {
const random = Math.random();
if (random >= 0.75) {
toast.push({
message: 'This is a success toast',
type: 'success',
emoji: '🎉'
});
} else if (random >= 0.5 && random < 0.75) {
toast.push({
message: 'This is an error toast',
emoji: '😢',
type: 'error'
});
} else if (random >= 0.25 && random < 0.75) {
toast.push({
message: 'This is a warning toast',
emoji: '⚠️',
type: 'warning'
});
} else {
toast.push({
message: 'This is an info toast',
emoji: '📣',
type: 'info'
});
}
}
Add Toast
{#each $toast as { id, message, emoji, type } (id)}
{emoji}
{message}
Close
{/each}
```