Package Exports

@rokkit/themes
@rokkit/themes/base
@rokkit/themes/base.css
@rokkit/themes/base/alert-list
@rokkit/themes/base/breadcrumbs
@rokkit/themes/base/button
@rokkit/themes/base/card
@rokkit/themes/base/carousel
@rokkit/themes/base/connector
@rokkit/themes/base/display
@rokkit/themes/base/dropdown
@rokkit/themes/base/floating-action
@rokkit/themes/base/floating-navigation
@rokkit/themes/base/graph-paper
@rokkit/themes/base/grid
@rokkit/themes/base/index
@rokkit/themes/base/input
@rokkit/themes/base/item
@rokkit/themes/base/list
@rokkit/themes/base/menu
@rokkit/themes/base/message
@rokkit/themes/base/pill
@rokkit/themes/base/progress
@rokkit/themes/base/range
@rokkit/themes/base/rating
@rokkit/themes/base/reveal
@rokkit/themes/base/search-filter
@rokkit/themes/base/select
@rokkit/themes/base/shine
@rokkit/themes/base/status-list
@rokkit/themes/base/stepper
@rokkit/themes/base/switch
@rokkit/themes/base/table
@rokkit/themes/base/tabs
@rokkit/themes/base/tilt
@rokkit/themes/base/timeline
@rokkit/themes/base/toc
@rokkit/themes/base/toggle
@rokkit/themes/base/toolbar
@rokkit/themes/base/tree
@rokkit/themes/base/upload-progress
@rokkit/themes/base/upload-target
@rokkit/themes/dist
@rokkit/themes/glass
@rokkit/themes/glass.css
@rokkit/themes/glass/button
@rokkit/themes/glass/card
@rokkit/themes/glass/dropdown
@rokkit/themes/glass/floating-action
@rokkit/themes/glass/floating-navigation
@rokkit/themes/glass/index
@rokkit/themes/glass/input
@rokkit/themes/glass/list
@rokkit/themes/glass/menu
@rokkit/themes/glass/message
@rokkit/themes/glass/range
@rokkit/themes/glass/search-filter
@rokkit/themes/glass/select
@rokkit/themes/glass/status-list
@rokkit/themes/glass/switch
@rokkit/themes/glass/table
@rokkit/themes/glass/tabs
@rokkit/themes/glass/timeline
@rokkit/themes/glass/toc
@rokkit/themes/glass/toggle
@rokkit/themes/glass/toolbar
@rokkit/themes/glass/tree
@rokkit/themes/grada-ui
@rokkit/themes/grada-ui.css
@rokkit/themes/grada-ui/button
@rokkit/themes/grada-ui/card
@rokkit/themes/grada-ui/dropdown
@rokkit/themes/grada-ui/floating-action
@rokkit/themes/grada-ui/floating-navigation
@rokkit/themes/grada-ui/index
@rokkit/themes/grada-ui/input
@rokkit/themes/grada-ui/list
@rokkit/themes/grada-ui/menu
@rokkit/themes/grada-ui/message
@rokkit/themes/grada-ui/range
@rokkit/themes/grada-ui/search-filter
@rokkit/themes/grada-ui/select
@rokkit/themes/grada-ui/status-list
@rokkit/themes/grada-ui/switch
@rokkit/themes/grada-ui/table
@rokkit/themes/grada-ui/tabs
@rokkit/themes/grada-ui/timeline
@rokkit/themes/grada-ui/toc
@rokkit/themes/grada-ui/toggle
@rokkit/themes/grada-ui/toolbar
@rokkit/themes/grada-ui/tree
@rokkit/themes/material
@rokkit/themes/material.css
@rokkit/themes/material/button
@rokkit/themes/material/card
@rokkit/themes/material/dropdown
@rokkit/themes/material/floating-action
@rokkit/themes/material/floating-navigation
@rokkit/themes/material/index
@rokkit/themes/material/input
@rokkit/themes/material/list
@rokkit/themes/material/menu
@rokkit/themes/material/message
@rokkit/themes/material/range
@rokkit/themes/material/search-filter
@rokkit/themes/material/select
@rokkit/themes/material/status-list
@rokkit/themes/material/switch
@rokkit/themes/material/table
@rokkit/themes/material/tabs
@rokkit/themes/material/timeline
@rokkit/themes/material/toc
@rokkit/themes/material/toggle
@rokkit/themes/material/toolbar
@rokkit/themes/material/tree
@rokkit/themes/minimal
@rokkit/themes/minimal.css
@rokkit/themes/minimal/button
@rokkit/themes/minimal/card
@rokkit/themes/minimal/dropdown
@rokkit/themes/minimal/floating-action
@rokkit/themes/minimal/floating-navigation
@rokkit/themes/minimal/index
@rokkit/themes/minimal/input
@rokkit/themes/minimal/list
@rokkit/themes/minimal/menu
@rokkit/themes/minimal/message
@rokkit/themes/minimal/range
@rokkit/themes/minimal/search-filter
@rokkit/themes/minimal/select
@rokkit/themes/minimal/status-list
@rokkit/themes/minimal/switch
@rokkit/themes/minimal/table
@rokkit/themes/minimal/tabs
@rokkit/themes/minimal/timeline
@rokkit/themes/minimal/toc
@rokkit/themes/minimal/toggle
@rokkit/themes/minimal/toolbar
@rokkit/themes/minimal/tree
@rokkit/themes/rokkit
@rokkit/themes/rokkit.css
@rokkit/themes/rokkit/button
@rokkit/themes/rokkit/card
@rokkit/themes/rokkit/connector
@rokkit/themes/rokkit/dropdown
@rokkit/themes/rokkit/floating-action
@rokkit/themes/rokkit/floating-navigation
@rokkit/themes/rokkit/grid
@rokkit/themes/rokkit/index
@rokkit/themes/rokkit/input
@rokkit/themes/rokkit/list
@rokkit/themes/rokkit/menu
@rokkit/themes/rokkit/message
@rokkit/themes/rokkit/range
@rokkit/themes/rokkit/search-filter
@rokkit/themes/rokkit/select
@rokkit/themes/rokkit/status-list
@rokkit/themes/rokkit/switch
@rokkit/themes/rokkit/table
@rokkit/themes/rokkit/tabs
@rokkit/themes/rokkit/timeline
@rokkit/themes/rokkit/toc
@rokkit/themes/rokkit/toggle
@rokkit/themes/rokkit/toolbar
@rokkit/themes/rokkit/tree
@rokkit/themes/rokkit/upload-progress
@rokkit/themes/rokkit/upload-target
@rokkit/themes/styles

Readme

@rokkit/themes

Pre-built CSS themes for @rokkit/ui components.

Install

npm install @rokkit/themes
# or
bun add @rokkit/themes

Overview

@rokkit/themes provides visual styles for @rokkit/ui components. Components in @rokkit/ui are unstyled by default — themes layer on top without requiring changes to component markup. Styles target semantic data-* attributes that components emit (e.g. [data-button], [data-list-item]).

Available themes:

Theme	Description
`rokkit`	Default — gradients and glowing borders
`minimal`	Clean and subtle
`material`	Elevation and shadows
`glass`	Blur and transparency
`base`	Structural styles only (layout and positioning, no visual treatment)

Usage

Full bundle (base + all themes)

@import '@rokkit/themes';

Or in JavaScript/TypeScript:

import '@rokkit/themes'

Single theme

@import '@rokkit/themes/rokkit.css';
/* or */
@import '@rokkit/themes/minimal.css';
/* or */
@import '@rokkit/themes/material.css';
/* or */
@import '@rokkit/themes/glass.css';

Base structural styles only

@import '@rokkit/themes/base';

Useful when writing a fully custom theme — imports layout and positioning rules without any visual styling.

Individual component styles

@import '@rokkit/themes/base/button.css';
@import '@rokkit/themes/rokkit/button.css';

Theme scoping

The rokkit theme is the default and applies without any wrapper element.

Other themes are scoped using the data-style attribute:

<!-- Apply minimal theme to a section -->
<div data-style="minimal">
  <!-- @rokkit/ui components here use the minimal theme -->
</div>

<!-- Apply a theme globally -->
<html data-style="material"></html>

Switching themes at runtime is a matter of updating the data-style attribute.

Custom themes

To build your own theme:

Import @rokkit/themes/base for structural styles.
Write CSS targeting the same data-* attribute selectors used by the built-in themes.
Scope your selectors with [data-style='my-theme'] to enable runtime switching.

Component attribute hooks follow the pattern [data-style='my-theme'] [data-button], [data-style='my-theme'] [data-list-item], etc.

Architecture

src/
  base/       -- Structural styles (layout, spacing, positioning)
  rokkit/     -- Default theme (gradients + borders)
  minimal/    -- Clean + subtle theme
  material/   -- Elevation + shadows theme
  glass/      -- Blur + transparency theme
  index.css   -- Full bundle entry point

Part of Rokkit — a Svelte 5 component library and design system.