Package Exports

@rokkit/themes
@rokkit/themes/ant-design
@rokkit/themes/ant-design.css
@rokkit/themes/ant-design/button
@rokkit/themes/ant-design/card
@rokkit/themes/ant-design/chart
@rokkit/themes/ant-design/connector
@rokkit/themes/ant-design/dropdown
@rokkit/themes/ant-design/floating-action
@rokkit/themes/ant-design/floating-navigation
@rokkit/themes/ant-design/grid
@rokkit/themes/ant-design/index
@rokkit/themes/ant-design/input
@rokkit/themes/ant-design/list
@rokkit/themes/ant-design/menu
@rokkit/themes/ant-design/message
@rokkit/themes/ant-design/range
@rokkit/themes/ant-design/search-filter
@rokkit/themes/ant-design/select
@rokkit/themes/ant-design/status-list
@rokkit/themes/ant-design/step-indicator
@rokkit/themes/ant-design/switch
@rokkit/themes/ant-design/table
@rokkit/themes/ant-design/tabs
@rokkit/themes/ant-design/timeline
@rokkit/themes/ant-design/toc
@rokkit/themes/ant-design/toggle
@rokkit/themes/ant-design/toolbar
@rokkit/themes/ant-design/tree
@rokkit/themes/ant-design/upload-progress
@rokkit/themes/ant-design/upload-target
@rokkit/themes/base
@rokkit/themes/base.css
@rokkit/themes/base/alert-list
@rokkit/themes/base/avatar
@rokkit/themes/base/badge
@rokkit/themes/base/breadcrumbs
@rokkit/themes/base/button
@rokkit/themes/base/card
@rokkit/themes/base/carousel
@rokkit/themes/base/chart
@rokkit/themes/base/connector
@rokkit/themes/base/density
@rokkit/themes/base/display
@rokkit/themes/base/divider
@rokkit/themes/base/dropdown
@rokkit/themes/base/floating-action
@rokkit/themes/base/floating-navigation
@rokkit/themes/base/gradient-border
@rokkit/themes/base/graph-paper
@rokkit/themes/base/grid
@rokkit/themes/base/index
@rokkit/themes/base/input
@rokkit/themes/base/item
@rokkit/themes/base/layout
@rokkit/themes/base/list
@rokkit/themes/base/menu
@rokkit/themes/base/message
@rokkit/themes/base/nav-content
@rokkit/themes/base/pill
@rokkit/themes/base/progress
@rokkit/themes/base/radius
@rokkit/themes/base/range
@rokkit/themes/base/rating
@rokkit/themes/base/responsive-grid
@rokkit/themes/base/reveal
@rokkit/themes/base/search-filter
@rokkit/themes/base/select
@rokkit/themes/base/shine
@rokkit/themes/base/stack
@rokkit/themes/base/status-list
@rokkit/themes/base/step-indicator
@rokkit/themes/base/stepper
@rokkit/themes/base/swatch
@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/tooltip
@rokkit/themes/base/tree
@rokkit/themes/base/typography
@rokkit/themes/base/upload-progress
@rokkit/themes/base/upload-target
@rokkit/themes/bits-ui
@rokkit/themes/bits-ui.css
@rokkit/themes/bits-ui/button
@rokkit/themes/bits-ui/card
@rokkit/themes/bits-ui/chart
@rokkit/themes/bits-ui/connector
@rokkit/themes/bits-ui/dropdown
@rokkit/themes/bits-ui/floating-action
@rokkit/themes/bits-ui/floating-navigation
@rokkit/themes/bits-ui/grid
@rokkit/themes/bits-ui/index
@rokkit/themes/bits-ui/input
@rokkit/themes/bits-ui/list
@rokkit/themes/bits-ui/menu
@rokkit/themes/bits-ui/message
@rokkit/themes/bits-ui/range
@rokkit/themes/bits-ui/search-filter
@rokkit/themes/bits-ui/select
@rokkit/themes/bits-ui/status-list
@rokkit/themes/bits-ui/step-indicator
@rokkit/themes/bits-ui/switch
@rokkit/themes/bits-ui/table
@rokkit/themes/bits-ui/tabs
@rokkit/themes/bits-ui/timeline
@rokkit/themes/bits-ui/toc
@rokkit/themes/bits-ui/toggle
@rokkit/themes/bits-ui/toolbar
@rokkit/themes/bits-ui/tree
@rokkit/themes/bits-ui/upload-progress
@rokkit/themes/bits-ui/upload-target
@rokkit/themes/carbon
@rokkit/themes/carbon.css
@rokkit/themes/carbon/button
@rokkit/themes/carbon/card
@rokkit/themes/carbon/chart
@rokkit/themes/carbon/connector
@rokkit/themes/carbon/dropdown
@rokkit/themes/carbon/floating-action
@rokkit/themes/carbon/floating-navigation
@rokkit/themes/carbon/grid
@rokkit/themes/carbon/index
@rokkit/themes/carbon/input
@rokkit/themes/carbon/list
@rokkit/themes/carbon/menu
@rokkit/themes/carbon/message
@rokkit/themes/carbon/range
@rokkit/themes/carbon/search-filter
@rokkit/themes/carbon/select
@rokkit/themes/carbon/status-list
@rokkit/themes/carbon/step-indicator
@rokkit/themes/carbon/switch
@rokkit/themes/carbon/table
@rokkit/themes/carbon/tabs
@rokkit/themes/carbon/timeline
@rokkit/themes/carbon/toc
@rokkit/themes/carbon/toggle
@rokkit/themes/carbon/toolbar
@rokkit/themes/carbon/tree
@rokkit/themes/carbon/upload-progress
@rokkit/themes/carbon/upload-target
@rokkit/themes/daisy-ui
@rokkit/themes/daisy-ui.css
@rokkit/themes/daisy-ui/button
@rokkit/themes/daisy-ui/card
@rokkit/themes/daisy-ui/chart
@rokkit/themes/daisy-ui/connector
@rokkit/themes/daisy-ui/dropdown
@rokkit/themes/daisy-ui/floating-action
@rokkit/themes/daisy-ui/floating-navigation
@rokkit/themes/daisy-ui/grid
@rokkit/themes/daisy-ui/index
@rokkit/themes/daisy-ui/input
@rokkit/themes/daisy-ui/list
@rokkit/themes/daisy-ui/menu
@rokkit/themes/daisy-ui/message
@rokkit/themes/daisy-ui/range
@rokkit/themes/daisy-ui/search-filter
@rokkit/themes/daisy-ui/select
@rokkit/themes/daisy-ui/status-list
@rokkit/themes/daisy-ui/step-indicator
@rokkit/themes/daisy-ui/switch
@rokkit/themes/daisy-ui/table
@rokkit/themes/daisy-ui/tabs
@rokkit/themes/daisy-ui/timeline
@rokkit/themes/daisy-ui/toc
@rokkit/themes/daisy-ui/toggle
@rokkit/themes/daisy-ui/toolbar
@rokkit/themes/daisy-ui/tree
@rokkit/themes/daisy-ui/upload-progress
@rokkit/themes/daisy-ui/upload-target
@rokkit/themes/dist
@rokkit/themes/dist/ant-design
@rokkit/themes/dist/base
@rokkit/themes/dist/bits-ui
@rokkit/themes/dist/carbon
@rokkit/themes/dist/daisy-ui
@rokkit/themes/dist/frosted
@rokkit/themes/dist/grada-ui
@rokkit/themes/dist/material
@rokkit/themes/dist/minimal
@rokkit/themes/dist/rokkit
@rokkit/themes/dist/shadcn
@rokkit/themes/frosted
@rokkit/themes/frosted.css
@rokkit/themes/frosted/button
@rokkit/themes/frosted/card
@rokkit/themes/frosted/chart
@rokkit/themes/frosted/dropdown
@rokkit/themes/frosted/floating-action
@rokkit/themes/frosted/floating-navigation
@rokkit/themes/frosted/index
@rokkit/themes/frosted/input
@rokkit/themes/frosted/list
@rokkit/themes/frosted/menu
@rokkit/themes/frosted/message
@rokkit/themes/frosted/range
@rokkit/themes/frosted/search-filter
@rokkit/themes/frosted/select
@rokkit/themes/frosted/status-list
@rokkit/themes/frosted/step-indicator
@rokkit/themes/frosted/swatch
@rokkit/themes/frosted/switch
@rokkit/themes/frosted/table
@rokkit/themes/frosted/tabs
@rokkit/themes/frosted/timeline
@rokkit/themes/frosted/toc
@rokkit/themes/frosted/toggle
@rokkit/themes/frosted/toolbar
@rokkit/themes/frosted/tree
@rokkit/themes/grada-ui
@rokkit/themes/grada-ui.css
@rokkit/themes/grada-ui/button
@rokkit/themes/grada-ui/card
@rokkit/themes/grada-ui/chart
@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/step-indicator
@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/chart
@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/step-indicator
@rokkit/themes/material/swatch
@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/chart
@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/step-indicator
@rokkit/themes/minimal/swatch
@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/avatar
@rokkit/themes/rokkit/badge
@rokkit/themes/rokkit/button
@rokkit/themes/rokkit/card
@rokkit/themes/rokkit/chart
@rokkit/themes/rokkit/connector
@rokkit/themes/rokkit/divider
@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/stack
@rokkit/themes/rokkit/status-list
@rokkit/themes/rokkit/step-indicator
@rokkit/themes/rokkit/swatch
@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/tooltip
@rokkit/themes/rokkit/tree
@rokkit/themes/rokkit/upload-progress
@rokkit/themes/rokkit/upload-target
@rokkit/themes/shadcn
@rokkit/themes/shadcn.css
@rokkit/themes/shadcn/button
@rokkit/themes/shadcn/card
@rokkit/themes/shadcn/chart
@rokkit/themes/shadcn/connector
@rokkit/themes/shadcn/dropdown
@rokkit/themes/shadcn/floating-action
@rokkit/themes/shadcn/floating-navigation
@rokkit/themes/shadcn/grid
@rokkit/themes/shadcn/index
@rokkit/themes/shadcn/input
@rokkit/themes/shadcn/list
@rokkit/themes/shadcn/menu
@rokkit/themes/shadcn/message
@rokkit/themes/shadcn/range
@rokkit/themes/shadcn/search-filter
@rokkit/themes/shadcn/select
@rokkit/themes/shadcn/status-list
@rokkit/themes/shadcn/step-indicator
@rokkit/themes/shadcn/switch
@rokkit/themes/shadcn/table
@rokkit/themes/shadcn/tabs
@rokkit/themes/shadcn/timeline
@rokkit/themes/shadcn/toc
@rokkit/themes/shadcn/toggle
@rokkit/themes/shadcn/toolbar
@rokkit/themes/shadcn/tree
@rokkit/themes/shadcn/upload-progress
@rokkit/themes/shadcn/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
`frosted`	Frosted glass and blur
`shadcn`	Flat borders and ring focus
`daisy-ui`	Rounded-full and bold fills
`bits-ui`	Rounded-lg and shadow-sm
`carbon`	Square corners and bottom-border inputs
`ant-design`	Thin borders and dense layout
`grada-ui`	Coral/purple gradient identity
`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/frosted.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
  frosted/     -- Frosted glass + blur theme
  shadcn/      -- Flat borders + ring focus theme
  daisy-ui/    -- Rounded-full + bold fills theme
  bits-ui/     -- Rounded-lg + shadow-sm theme
  carbon/      -- Square + bottom-border inputs theme
  ant-design/  -- Thin borders + dense layout theme
  grada-ui/    -- Coral/purple gradient identity theme
  index.css    -- Full bundle entry point

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