https://github.com/loskware/svelte-luna

svelte ui kit
https://github.com/loskware/svelte-luna

components svelte ui uikit

Last synced: 3 months ago
JSON representation

svelte ui kit

• Host: GitHub
• URL: https://github.com/loskware/svelte-luna
• Owner: loskware
• License: mit
• Created: 2021-05-10T06:47:26.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-07-25T23:07:20.000Z (over 2 years ago)
• Last Synced: 2024-07-19T22:28:28.846Z (4 months ago)
• Topics: components, svelte, ui, uikit
• Language: Svelte
• Homepage: https://loskware.github.io/svelte-luna/
• Size: 2.95 MB
• Stars: 11
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# LUNA

Luna is a simple, elegant and beautiful UI component library for Svelte.

_Remember that Luna is still in an `EARLY STAGE`. Many aspects could change in the future._

## Get started

Install the package:

```bash

npm i svelte-luna

```

Then import luna in your project:

```js

import {

  Avatar,

  Button,

  Card,

  CheckBox,

  CircleProgress,

  Divider,

  FlipView,

  LineProgress,

  Dropdown,

  DropdownMenu,

  ContextMenu,

  MenuItem,

  Radio,

  Segment,

  SegmentedControl,

  Select,

  Switch,

  TextField,

} from "svelte-luna";

// OR

import Avatar from "svelte-luna/widgets/Avatar.svelte";

import Button from "svelte-luna/widgets/Button.svelte";

import Card from "svelte-luna/widgets/Card.svelte";

// ecc...

```

Remember to import the required css files (rollup-plugin-css-only is required):

```js

import "svelte-luna/css/theme.css";

import "svelte-luna/css/global.css";

```

If you prefer you can copy the css files from the package folder into your project and import them directly into your html.

Finally select the desired theme (`dark-theme` or `light-theme`):

```html

  import {theme} from "stores/theme";

  $: {

    document.body.className = $theme;

  }

```

### Actions

Luna provides some Svelte actions.

```js

import {

  autofocus,

  badge,

  modal,

  pannable,

} from "svelte-luna/actions";

```

## Styling

To customize the appearance of the components you can override the CSS variables found in `svelte-luna/css/theme.css`.

## Project Showcase

There is currently no documentation for Luna but you can find a components showcase at https://loskware.github.io/svelte-luna