https://github.com/perfect-things/ui
Perfect UI components
https://github.com/perfect-things/ui
components svelte ui-components
Last synced: 8 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 (over 4 years ago)
- Default Branch: master
- Last Pushed: 2025-04-06T17:06:19.000Z (about 1 year ago)
- Last Synced: 2025-04-15T14:40:26.463Z (about 1 year ago)
- Topics: components, svelte, ui-components
- Language: Svelte
- Homepage: http://ui.perfectthings.dev
- Size: 37.6 MB
- Stars: 18
- Watchers: 1
- Forks: 1
- Open Issues: 18
-
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
```
### Svelte components
Just `import` them from the module, as normal:
```js
import { Button } from '@perfectthings/ui';
```
## Usage with SvelteKit
Available from **v6.4.0.**.
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;
```
Once that's done, you can import the components as normal.
## Development
You need node & npm (obviously). Run these:
```sh
git clone git@github.com: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
