https://github.com/rotki/ui-library
Rotki's vue component library
https://github.com/rotki/ui-library
components library ui vue
Last synced: about 1 year ago
JSON representation
Rotki's vue component library
- Host: GitHub
- URL: https://github.com/rotki/ui-library
- Owner: rotki
- License: agpl-3.0
- Created: 2023-03-22T16:07:29.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-04-03T08:37:49.000Z (about 1 year ago)
- Last Synced: 2025-04-04T09:42:31.382Z (about 1 year ago)
- Topics: components, library, ui, vue
- Language: Vue
- Homepage: https://rotki.github.io/ui-library/
- Size: 2.35 MB
- Stars: 5
- Watchers: 4
- Forks: 6
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# @rotki/ui-library
A Vue component library and design system for rotki
[](https://www.npmjs.com/package/@rotki/ui-library)
[](https://github.com/rotki/ui-library/actions/workflows/ci.yml)
[](https://codecov.io/gh/rotki/ui-library)
## Getting started
### Installing the library
You can start using the library after installing it from npm along with the roboto font:
```bash
pnpm install -D --save-exact @rotki/ui-library @fontsource/roboto
```
### Importing the stylesheets
Don't forget to import the `style.css` file from `@rotki/ui-library` along with the latin roboto font,
in the project root (e.g main.ts)
```typescript
import '@rotki/ui-library/dist/style.css';
import '@fontsource/roboto/latin.css';
```
### Using the plugin
To use the library you must install the library plugin:
```typescript
import { createRui } from '@rotki/ui-library';
const RuiPlugin = createRui(options);
app.use(RuiPlugin);
```
### Using the components
Then you can you the library components e.g.:
```vue
import { RuiButton } from '@rotki/ui-library';
This is button
```
### Managing the theme
To dynamically manage the theme you can use the theme manager
```typescript
import { useRotkiTheme } from '@rotki/ui-library';
const { toggleThemeMode, setThemeConfig, switchThemeScheme, state, store } = useRotkiTheme();
// to change the theme (pass colors as described by `ThemeConfig`) anytime:
setThemeConfig(newTheme);
// to switch between auto|light|dark
toggleThemeMode();
// to switch to a specific theme mode
switchThemeScheme(ThemeMode.dark);
```
### Using the icons
You need to specify which icons you want to enable, when installing the RuiPlugin.
```typescript
import { createRui, Ri4kFill, Ri4kLine } from '@rotki/ui-library';
const RuiPlugin = createRui({
theme: {
icons: [Ri4kFill, Ri4kLine],
},
});
app.use(RuiPlugin);
```
```vue
import { RuiIcon } from '@rotki/ui-library';
```
### Use @rotki/ui-library tailwindcss theme
You can extend @rotki/ui-library tailwind theme configuration by adding these to your tailwind config. It will provide you the classes for the colors, typography, and shadow.
```javascript
// tailwind.config.js
module.exports = {
// ... your tailwind configs,
plugins: [require('@rotki/ui-library/theme')],
};
```
## Development
### Installation
To install the dependencies you need to run on the root of the repository
```
pnpm install --frozen-lockfile
```
### Compiles and minifies for production
The following command when executed from the project root will build the `@rotki/ui-library` bundle.
This command will create the bundle for both Vue version >=3.4.3.
```
pnpm run build:prod
```
If you want to build for specific version, you can run:
```
pnpm run build
```
### Lint check
```
pnpm run lint
```
### Lints and fixes files
```
pnpm run lint:fix
```
### Type check
```
pnpm run typecheck
```
### Storybook
In order to run the storybook, you can run:
```
pnpm run storybook
```
### Testing: Unit
In order to test the components, you can run:
```
pnpm run test
```
### Testing: end-to-end
In order to test the components in use in a vue 3 project, you can run:
```
pnpm run test:e2e
```
coverage results can be generated and previewed with:
```
pnpm run coverage
pnpm run coverage:preview
```
### Locally testing the library
After you build the bundle, in the `package.json` on your main project, you can add this to the dependencies:
```json
{
"@rotki/ui-library": "file:...path_of_this_directory"
}
```
When the dependency installed on the main project, it will run the `prepare` script.
### Generating the library icons
We use remix-icons. You need to run this script to scrap the svgs data from remix-icons. (This script runs automatically on `prepare`. Run this in case the icons aren't generated properly)
```
pnpm run generate:icons
```
## License
[AGPL-3.0](./LICENSE.md) License © 2023- [Rotki Solutions GmbH](https://github.com/rotki)