https://github.com/iotaledger/iota-ui-kit
https://github.com/iotaledger/iota-ui-kit
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/iotaledger/iota-ui-kit
- Owner: iotaledger
- Created: 2023-11-03T12:35:17.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-21T10:12:00.000Z (about 2 years ago)
- Last Synced: 2024-10-31T18:43:45.657Z (over 1 year ago)
- Language: Svelte
- Size: 1.12 MB
- Stars: 2
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# IOTA UI Kit 🧰
Official UI Kit for IOTA apps built with Svelte, TypeScript, and Tailwind CSS. This kit provides you with reusable, easy-to-use components for building consistent interfaces with the IOTA design system.
## Features ✨
- **Reusable Components**: Efficient pre-built components.
- **Easy to Use**: Developer-friendly design for seamless integration.
- **Storybook**: Visual documentation and testing in an isolated environment.
## Installation 🛠️
Add the UI Kit to your project with Yarn:
```bash
yarn add @iota/ui-kit
```
To be able to use the fonts you need to add the following link to the head in the HTML. ``
## Usage 📦
Here's a simple example to demonstrate how to use our components in a Svelte project:
```svelte
import { Button, ButtonType, ButtonSize } from '@iota/ui-kit';
import { ComponentProps } from 'svelte';
const BUTTON: ComponentProps<Button> = {
type: ButtonType.Primary,
label: 'Click Me',
}
const handleOnClick = () => {
console.log('Button clicked!');
}
```
### Stores 🏪
The UI Kit uses Svelte stores to manage global state. You can import them from `@iota/ui-kit/stores` and use them in your components:
- **isSmallScreen**: Returns true if the innerWidth of the screen is less than 1024px.
- **isMobile**: Returns true if the innerWidth of the screen is less than 768px.
## Requirements 📋
Ensure you have the following installed:
- Node.js >= 18.12.x
- Yarn >= 1.22.x
## Development 🧑💻
To view and test the components in Storybook, run:
```sh
yarn storybook
```
This command will start a development server at http://localhost:6006. Open it in your browser to explore and interact with the components.