Rokkit

Rokkit is a data-driven, configurable, and themeable UI library built for use with Svelte. Rokkit controls are designed to be easily themeable, so you can match the look and feel of your project with minimal effort.

Rokkit provides both composable and data-driven components.

• The Composition-based components allow developers to reuse code and create modular, flexible designs that are easy to maintain and update.
• Data-driven components, make it easier to build dynamic and reactive interfaces. One of the key benefits of this approach is that it allows developers to focus on the data and logic of their application, rather than the implementation of UI elements.

Rokkit is currently under development and not feature complete yet. Rokkit has been rewritten to use Svelte 5 runes Some components are yet to be rewritten

Libraries

Components have been separated into the following packages. Refer to the stories for examples of all available UI components. View a live demo here

• @rokkit/core
• @rokkit/data
• @rokkit/actions
• @rokkit/states
• @rokkit/icons
• @rokkit/themes
• @rokkit/ui

Installation

To install Rokkit, use the following command:

degit jerrythomas/rokkit/sites/quick-start my-app
pnpm i

Basic Usage

To use Rokkit in your Svelte project, simply import the desired control and use it in your template like any other Svelte component. For example, to use the List control:

<script>
  import { List } from '@rokkit/ui'
  let items = $state(['a', 'b', 'c'])
</script>

<List bind:items />

Data-Driven Controls

One of the key features of Rokkit is its data-driven controls. These controls automatically bind to your data and update its state whenever the data changes. All data-driven components follow a consistent pattern. Selection components that work on arrays have an items property and all components have a value property that has the current value.

<script>
  import { List } from '@rokkit/ui'

  let items = $state(['a', 'b', 'c'])
  let value = $state(null)
</script>

<List bind:items bind:value />

Themeable Controls

To apply a theme to your controls, simply pass a theme prop to the body element.

<svelte:body data-style="rokkit" data-mode="dark" />

If you want to provide users the option of switching between dark theme and light mode or custom themes, then you can also use the themable action with the ToggleThemeMode component.

<script>
  import { themable } from '@rokkit/actions'
  import { ToggleThemeMode } from '@rokkit/ui'
</script>

<svelte:body use:themable />
<ToggleThemeMode />

Documentation

For more detailed documentation on each control, including a list of all available props and usage examples, please refer to the Rokkit documentation on our website.

We hope you enjoy using Rokkit in your projects!

Features

• Data-driven
• Unstyled
• Actions
• Utility functions
• Themes
• Accessible
• Responsive
• Micro-animations

Quickstart

degit jerrythomas/rokkit/sites/quick-start my-app
cd my-app
pnpm i
pnpm dev