open-index/open-npm huggingface dataset:
npm package: @korhq/ui
Description: ![Banner](/.github/assets/github.png)
Latest version: 1.2.0

![Banner](/.github/assets/github.png)

# KOR UI

KOR UI is a smart, modern, not-boring new design system and UI kit, built for Svelte 5.

## Installation

Run `npm install @korhq/ui`.

Add this to your main Tailwind v4 config file, and make the the `node_modules/@korhq/ui` relative path is correct, so the components can get styled.

```css
@import "@korhq/ui/tailwind.css";
@source "../../node_modules/@korhq/ui/dist/components/ui";
```

## Design language

This design language builds on the traditional semantic and flat color token design systems, by adding glass and skeuomorphism effects on components and materials via shadows and color blend modes.

> [!NOTE]
> For older systems, rendering the shadows might be resource intensive, or maybe the user prefers a flatter interface. So there is a Tailwind variant `flat` that you would apply just like dark mode to change the style.

Figma file: https://www.figma.com/community/file/1532866693398685159/kor-ui

### Font styles

Our main font style will stay as `sans`, which uses Outfit. But we also have a `serif` font style using Wittgenstein, primarily for reading focused apps.

## Components & Development

This component package is build with [`shadcn/svelte`](https://www.shadcn-svelte.com), which itself is mainly built on [Bits UI](https://bits-ui.com) and other various component primitives. Then the components are packaged up again and distributed via npm.

You would think packaging it again would defeat the point of shadcn but we're really just using shadcn/svelte as a starter template for the components, we would like to own the components of our design system, thanks.

### Developing

To develop components, start the Storybook server: `pnpm storybook`.

To preview the various variants and styles we have, we have switchers in the toolbar for you: `Dark/Light`, `Sans/Serif`, `Rich/Flat`.

### Building & publishing

To run a test build, run:

```bash
pnpm build:ui
```

This uses `svelte-package` to compile components and types into `dist/`, and runs a script to update the `package.json` `exports` map.

To test the package locally:

```bash
# In this repo package (korui)
pnpm link --global

# In your app
pnpm link --global @korhq/ui
```

To remove the link and go back to the npm version:

```bash
pnpm unlink --global @korhq/ui
pnpm install
```

To publish to npm, file a pull request into the `main` branch, and we'll review it, once merged into main it will publish.

## License & Contributing

Contributions and fixes are welcome! If you're adding a new component, we can make the UI (fix styles, etc) during the PR review. Check with the [Figma file](https://www.figma.com/community/file/1532866693398685159/kor-ui) to see if the UI is already designed.

Licensed `Apache-2.0`
npm package: @korhq/undocs
Description: A documentation framework built with Astro where you can build your own docs and component playground where you control the layout, components, and design.
Author: dukc
Latest version: 0.4.1-alpha

# @korhq/undocs

A documentation framework built with Astro where you can build your own docs and component playground where you control the layout, components, and design.

Read the docs [here](https://github.com/K0Rhq/un).
npm package: @korhq/unpreview
Description: Preview your components and UI docs via previews made in MDX, inside an Astro component playground that you own.
Author: dukc
Latest version: 0.1.2-alpha

# unPreview

## v0.1.2-alpha

Preview your components and UI docs via previews made in MDX, inside an Astro component playground that you own.

This package provides schemas, recommended structures and helper functions to help you build your own playground UI. Right now, you have to build your playground yourself. In the future, we'll have a CLI with presets available.

## Previews

Previews are kinda like stories if you're from Storybook. Previews are MDX files with your component imported and showed. You can define variants to generate multiple variants of your components in the preview.

Since unPreview is based on Astro content collections and MDX, by default we are framework agnostic, supporting any UI framework Astro supports (basically all of them), and we support monorepos, external packages, and standalone apps, since you can import your component from anywhere.

### Examples

Here's an example with variants defined.

```mdx
---
title: "Button"
variants:
  variant:
    default: "primary"
    options:
      - "primary"
      - "secondary"
  text:
    default: "Button"
    options:
      - "Button"
      - "another button"
---

import Button from "~/components/ui/Button.svelte"

<Button {...props} client:load>{props.text}</Button>
```

The variants you would like are defined in the frontmatter, with your variants under `variants:`, with your default option, and the other types you'd like. Right now, unPreview generates multiple components for each option you define, but the schema is meant for a control panel inspector, which should be implemented in the future.

To get the variants to your component you must define where you want them to go with `{props}`, you can use a spread operator on 1 component, or define specific ones like `{props.text}` anywhere you want.

## Usage

Make sure you have an Astro website ready to go, if you haven't made one already.

Install `@korhq/unpreview` with your package manager.

### Create content collection

Add the following to your `src/content.config.ts` file.

```ts
import { defineCollection } from "astro:content";
import { PreviewSchema } from "@korhq/unpreview";
import { glob } from "astro/loaders";

const previews = defineCollection({
	loader: glob({ pattern: "**/*.{json,mdx}", base: "./src/previews" }),
	schema: PreviewSchema,
});

export const collections = { previews };
```

Create some preview MDX files. Learn how to define variants for your components above, if you want to preview multiple component variants via your props.

### Create components

Follow the components in [`examples/preview`](https://github.com/K0Rhq/un/tree/main/examples/preview/src) for now.