Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/perfect-things/ui
Perfect UI components
https://github.com/perfect-things/ui
components svelte ui-components
Last synced: about 2 months ago
JSON representation
Perfect UI components
- Host: GitHub
- URL: https://github.com/perfect-things/ui
- Owner: perfect-things
- License: gpl-3.0
- Created: 2021-10-12T23:11:54.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-07-27T21:35:41.000Z (5 months ago)
- Last Synced: 2024-10-15T05:01:50.747Z (3 months ago)
- Topics: components, svelte, ui-components
- Language: Svelte
- Homepage: http://ui.perfectthings.dev
- Size: 37.1 MB
- Stars: 17
- Watchers: 1
- Forks: 1
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
PerfectThings/UI
================
A set of simple, but perfect, UI components, written in Svelte (the only front-end framework worth learning).
[](https://github.com/perfect-things/ui/actions/workflows/node.js.yml)
### Github pages site with docs
https://ui.perfectthings.dev
## Install & Setup
### Firstly, install the module as a dev dependency:
```sh
npm i -D @perfectthings/ui
```
### Importing the CSS
You need to import the `docs/ui.css` into your bundle.
There are many ways to do that. I specifically didn't use any css-to-js imports as these restrict the tools & the setup you may want to have.
The easiest way is probably to add a `postinstall` script into your `package.json` that will just copy the file into your `dist` folder:
```sh
...
"postinstall": "cp node_modules/@perfectthings/ui/docs/ui.css ./dist/ui.css"
...
```
From there - you can just add it directly to the `index.html`.
### Svelte components
Just `import` them from the module, as normal:
```js
import { Button } from '@perfectthings/ui';
```
## Usage with SvelteKit
Available from **v6.4.0.**.
### 1. Configs
Because this is a purely front-end framework and requires browser to work, it will not work with SSR so you need to disable it. Create a file: `src/routes/+layout.js` and add this:
```js
export const ssr = false;
```
### 2. CSS
If you're using SvelteKit, you need to add the `ui.css` file to the `static` folder, and then either import it into your `global.css` file or add it to the `head` section of your `app.html` file:
```html
...
```
### 3. Svelte components
Once that's done, you can import the components as normal.
## Development
You need node & npm (obviously). Run these:
```sh
git clone [email protected]:perfect-things/ui.git perfectthings-ui
cd perfectthings-ui
npm i && npm start
```
A browser window should open with the demo of the components.
## Resources
- [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/components/) from Apple
- Icons from [Tabler Icons](https://tablericons.com)
- *Prime Light* font from [Fontfabric](www.fontfabric.com)
## Support
