# Duskmoon Dev Core > When using npm package `@duskmoon-dev/core`, this skill shows how to install, configure, and use the CSS component library - Skill: `gsmlg-dev/duskmoon-dev-core` (Agent Skill) - Install (CLI): `npx skillmds@latest add gsmlg-dev/duskmoon-dev-core` - Raw SKILL.md: https://api.skillmd.com/api/skills/gsmlg-dev/duskmoon-dev-core/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: gsmlg-dev (https://skillmd.com/u/gsmlg-dev) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/gsmlg-dev/duskmoon-dev-core --- # @duskmoon-dev/core Skill ## Overview `@duskmoon-dev/core` is a CSS-only component library for Tailwind CSS v4 with Material Design 3's extended color system. ## Installation ```bash # Bun bun add @duskmoon-dev/core tailwindcss@^4.0.0 # npm npm install @duskmoon-dev/core tailwindcss@^4.0.0 # pnpm pnpm add @duskmoon-dev/core tailwindcss@^4.0.0 ``` ## Setup ### Option A: CSS Import (Recommended) ```css @import "tailwindcss"; @import "@duskmoon-dev/core"; ``` ### Option B: Tailwind Plugin ```css @import "tailwindcss"; @plugin "@duskmoon-dev/core/plugin"; ``` The `@plugin` approach registers MD3 color tokens into Tailwind's theme, enabling utility classes like `bg-primary`, `text-on-surface`, etc. ### Theme Configuration Apply theme via `data-theme` attribute on HTML element: ```html ``` ## Available Components ### Actions - `btn` - Buttons with variants: `btn-primary`, `btn-secondary`, `btn-tertiary`, `btn-outline`, `btn-ghost`, `btn-text`, `btn-loading` - `circle-menu` - Radial navigation menu: `circle-menu-toggler`, `circle-menu-list`, `circle-menu-item`, `circle-menu-label`, `circle-menu-primary`, `circle-menu-secondary`, `circle-menu-tertiary`, `circle-menu-info`, `circle-menu-success`, `circle-menu-warning`, `circle-menu-error`, `circle-menu-sm`, `circle-menu-lg` - `file-upload` - Drag-and-drop file uploader: `file-upload-dropzone`, `file-upload-primary`, `file-upload-compact`, `file-upload-button`, `file-upload-sm`, `file-upload-lg`, `file-upload-ghost` - `toggle-btn` - Toggle buttons and groups: `toggle-btn-active`, `toggle-btn-primary`, `toggle-btn-ghost`, `toggle-btn-sm`, `toggle-btn-lg`, `toggle-group`, `toggle-segmented`, `toggle-chip`, `toggle-filled`, `toggle-outlined` ### Data Entry - `input` - Text inputs: `input-primary`, `input-secondary`, `input-error` - `textarea` - Multi-line text: `textarea-primary`, `textarea-resize-none`, `textarea-resize-vertical` - `select` - Dropdown selection: `select-primary`, `select-filled`, `select-outlined` - `cascader` - Hierarchical selection: `cascader`, `cascader-panel`, `cascader-menu` - `checkbox` - Checkboxes: `checkbox-primary`, `checkbox-indeterminate`, `checkbox-group` - `radio` - Radio buttons: `radio-primary`, `radio-group`, `radio-group-horizontal` - `switch` - Toggle switches: `switch-primary`, `switch-secondary` - `slider` - Range sliders - `segment-control` - Segmented buttons: `segment-control`, `segment-control-item` - `autocomplete` - Search with suggestions - `datepicker` - Calendar: date, datetime, date range, datetime range pickers - `time-input` - Time selection: `time-input`, `time-input-picker` - `file-upload` - Drag-and-drop file uploader - `rating` - Star/heart ratings - `otp-input` - OTP verification: `otp-input`, `otp-input-field` - `pin-input` - PIN entry: `pin-input`, `pin-input-masked` - `multi-select` - Multiple selection: `multi-select`, `multi-select-tag` - `tree-select` - Hierarchical dropdown: `tree-select`, `tree-select-node` - `form-group` - Form layout: `form-group`, `form-label`, `helper-text`, `fieldset` - `theme-controller` - Theme switching: `theme-controller` (inline switch), `theme-controller-dropdown`, `theme-controller-item`, `theme-controller-label` ### Data Display - `card` - Content containers: `card-body`, `card-title` - `badge` - Status indicators: `badge-primary`, `badge-dot` - `avatar` - User images: `avatar-lg`, `avatar-status-online` - `chip` - Tags/filters: `chip-primary`, `chip-removable` - `table` - Data tables: `table-hover`, `table-striped` - `list` - Vertical lists: `list-item`, `list-item-interactive` - `timeline` - Chronological events - `skeleton` - Loading placeholders: `skeleton-text`, `skeleton-circle`, `skeleton-rect`, `skeleton-wave`, `skeleton-avatar`, `skeleton-button`, `skeleton-card`, `skeleton-group` - `code-block` - Styled code containers: `code-header`, `code-title`, `code-language`, `code-content`, `code-block-compact`, `code-block-borderless` - `chat` - LLM-oriented chat primitives: `chat-start`, `chat-end`, `chat-avatar`, `chat-header`, `chat-footer`, `chat-bubble` (with 7 color variants), `chat-bubble-filled`, `chat-bubble-xs`/`sm`/`md`/`lg`, `chat-bubble-streaming`, `chat-reasoning`, `chat-tool` with states (`chat-tool-pending`, `chat-tool-running`, `chat-tool-success`, `chat-tool-error`), `chat-typing` ### Feedback - `alert` - Messages: `alert-success`, `alert-error`, `alert-warning`, `alert-info` - `dialog` - Modal dialogs: `dialog-backdrop`, `dialog-md` - `modal` - Full overlays - `toast` - Notifications: `toast-success`, `toast-show` - `snackbar` - Brief messages - `progress` - Loading: `progress-primary`, `progress-indeterminate` - `skeleton` - Placeholders: `skeleton-text`, `skeleton-circle` - `tooltip` - Hover info: `tooltip-top`, `tooltip-bottom` ### Navigation - `breadcrumbs` - Breadcrumb navigation: `breadcrumb-item`, `breadcrumb-item-active`, `breadcrumb-item-disabled`, `breadcrumb-link`, `breadcrumb-separator`, `breadcrumb-icon`, `breadcrumb-home`, `breadcrumb-home-icon`, `breadcrumb-ellipsis`, `breadcrumbs-contained`, `breadcrumbs-sm`, `breadcrumbs-lg`, `breadcrumbs-nowrap` - `navbar` - Top navigation: `navbar-surface-container-high`, `navbar-start`, `navbar-center`, `navbar-end` - `tabs` - Tab navigation: `tab`, `tab-active`, `tabs-boxed`, `tabs-lifted`, `tab-sm`, `tab-lg`, `tab-xs` - `menu` - Dropdown/context menu: `menu-item`, `menu-title`, `menu-horizontal`, `menu-vertical` - `drawer` - Side panels: `drawer-left`, `drawer-open` - `nested-menu` - Collapsible sidebar: `nested-menu`, `nested-menu-title`, `nested-menu-bordered`, `nested-menu-compact` - `pagination` - Page navigation: `pagination-item`, `pagination-item-active`, `pagination-item-disabled`, `pagination-prev`, `pagination-next`, `pagination-ellipsis`, `pagination-compact`, `pagination-responsive`, `pagination-info`, `pagination-input`, `pagination-item-active-primary`, `pagination-item-active-secondary`, `pagination-item-active-tertiary` - `bottom-nav` - Mobile navigation: `bottom-nav-item` - `stepper` - Multi-step: `stepper-step-active`, `stepper-step-completed` ### Layout - `divider` - Separators: `divider-dashed`, `divider-vertical` - `appbar` - Action bars: `appbar-top`, `appbar-bottom` - `markdown-body` - GitHub-style markdown typography: single class applied to a container, styles all child elements (headings, code, tables, blockquotes, lists) - `grid-cols-auto-fill-*` - Responsive grid with auto-fill: `grid-cols-auto-fill-48`, `grid-cols-auto-fill-64` - `grid-cols-auto-fit-*` - Responsive grid with auto-fit: `grid-cols-auto-fit-48`, `grid-cols-auto-fit-64` ### Utilities - `sr-only` - Screen reader only (visually hidden but accessible) - `not-sr-only` - Undo sr-only for focus states ### Surfaces - `accordion` - Expandable panels: `accordion-item-open` - `bottomsheet` - Mobile panels: `bottom-sheet-show` - `popover` - Contextual overlays: `popover-top`, `popover-show` - `collapse` - Collapsible content ## Usage Examples ### Buttons ```html ``` ### Chat ```html
Bot
Assistant
Hello! How can I help you?
Just now
User
You
I have a question about my account.
Just now
Thought process The user is asking about account access...
get_account_info completed
{ "account_id": "123" }
{ "name": "Alice", "status": "active" }
``` ### Cards ```html

Title

Content

``` ### Forms ```html ``` ### Alerts ```html
Success message
Error message
Warning message
Info message
``` ### Navigation ```html ``` ### Tabs ```html
``` ### Dialog ```html

Title

Content
``` ### Nested Menu ```html ``` ### Theme Controller ```html
Theme
``` ### Toggle Buttons ```html
``` ### Responsive Grid ```html
Item 1
Item 2
Item 3
Item 1
Item 2
``` ## Color System ### Color Utilities ```html
Primary
Secondary
Tertiary
Surface

Primary

On surface

Muted

Success
Error
``` ### CSS Variables ```css .custom { background-color: var(--color-primary); color: var(--color-primary-content); border-color: var(--color-outline); } ``` ## Theme Switching ```javascript // Switch to dark theme document.documentElement.dataset.theme = 'moonlight'; // Switch to light theme document.documentElement.dataset.theme = 'sunshine'; ``` ## Importing Component Styles ### Full Library Import Import all components and themes at once: ```css /* In your CSS file */ @import "tailwindcss"; @import "@duskmoon-dev/core"; ``` ### Individual Component CSS Import Import only the CSS you need for smaller bundle sizes: ```css /* CSS imports */ @import "@duskmoon-dev/core/components/button"; @import "@duskmoon-dev/core/components/card"; @import "@duskmoon-dev/core/components/input"; @import "@duskmoon-dev/core/components/alert"; ``` ### JavaScript/TypeScript Import ```javascript // Import component styles in JS/TS import '@duskmoon-dev/core/components/button'; import '@duskmoon-dev/core/components/card'; import '@duskmoon-dev/core/components/input'; ``` ### Theme-Only Import ```css /* Import specific themes */ @import "@duskmoon-dev/core/themes/sunshine"; @import "@duskmoon-dev/core/themes/moonlight"; ``` ### Available Component Exports All components available for individual import: | Import Path | Component | |-------------|-----------| | `@duskmoon-dev/core/components/accordion` | Accordion | | `@duskmoon-dev/core/components/alert` | Alert | | `@duskmoon-dev/core/components/appbar` | App Bar | | `@duskmoon-dev/core/components/autocomplete` | Autocomplete | | `@duskmoon-dev/core/components/avatar` | Avatar | | `@duskmoon-dev/core/components/badge` | Badge | | `@duskmoon-dev/core/components/bottom-navigation` | Bottom Navigation | | `@duskmoon-dev/core/components/bottomsheet` | Bottom Sheet | | `@duskmoon-dev/core/components/button` | Button | | `@duskmoon-dev/core/components/card` | Card | | `@duskmoon-dev/core/components/cascader` | Cascader | | `@duskmoon-dev/core/components/chat` | Chat | | `@duskmoon-dev/core/components/checkbox` | Checkbox | | `@duskmoon-dev/core/components/chip` | Chip | | `@duskmoon-dev/core/components/circle-menu` | Circle Menu | | `@duskmoon-dev/core/components/code-block` | Code Block | | `@duskmoon-dev/core/components/collapse` | Collapse | | `@duskmoon-dev/core/components/datepicker` | Date Picker | | `@duskmoon-dev/core/components/dialog` | Dialog | | `@duskmoon-dev/core/components/divider` | Divider | | `@duskmoon-dev/core/components/drawer` | Drawer | | `@duskmoon-dev/core/components/file-upload` | File Upload | | `@duskmoon-dev/core/components/form` | Form | | `@duskmoon-dev/core/components/form-group` | Form Group | | `@duskmoon-dev/core/components/input` | Input | | `@duskmoon-dev/core/components/list` | List | | `@duskmoon-dev/core/components/markdown-body` | Markdown Body | | `@duskmoon-dev/core/components/modal` | Modal | | `@duskmoon-dev/core/components/multi-select` | Multi-Select | | `@duskmoon-dev/core/components/navigation` | Navigation (Navbar/Tabs/Menu) | | `@duskmoon-dev/core/components/nested-menu` | Nested Menu | | `@duskmoon-dev/core/components/otp-input` | OTP Input | | `@duskmoon-dev/core/components/pin-input` | PIN Input | | `@duskmoon-dev/core/components/popover` | Popover | | `@duskmoon-dev/core/components/progress` | Progress | | `@duskmoon-dev/core/components/radio` | Radio | | `@duskmoon-dev/core/components/rating` | Rating | | `@duskmoon-dev/core/components/segment-control` | Segment Control | | `@duskmoon-dev/core/components/select` | Select | | `@duskmoon-dev/core/components/skeleton` | Skeleton | | `@duskmoon-dev/core/components/slider` | Slider | | `@duskmoon-dev/core/components/snackbar` | Snackbar | | `@duskmoon-dev/core/components/stepper` | Stepper | | `@duskmoon-dev/core/components/switch` | Switch | | `@duskmoon-dev/core/components/table` | Table | | `@duskmoon-dev/core/components/textarea` | Textarea | | `@duskmoon-dev/core/components/theme-controller` | Theme Controller | | `@duskmoon-dev/core/components/time-input` | Time Input | | `@duskmoon-dev/core/components/timeline` | Timeline | | `@duskmoon-dev/core/components/toast` | Toast | | `@duskmoon-dev/core/components/toggle` | Toggle | | `@duskmoon-dev/core/components/tooltip` | Tooltip | | `@duskmoon-dev/core/components/tree-select` | Tree Select | ### Usage in Web Components / Custom Elements Each component exports a named `css` export containing the CSS string: ```javascript // Import the css named export import { css as buttonCSS } from '@duskmoon-dev/core/components/button'; import { css as cardCSS } from '@duskmoon-dev/core/components/card'; import { css as inputCSS } from '@duskmoon-dev/core/components/input'; ``` Example usage in a custom element: ```javascript import { css as buttonCSS } from '@duskmoon-dev/core/components/button'; // Strip @layer wrapper for Shadow DOM compatibility const coreStyles = buttonCSS.replace(/@layer\s+components\s*\{/, '').replace(/\}\s*$/, ''); class MyButton extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); // Add styles to shadow DOM const style = document.createElement('style'); style.textContent = coreStyles; this.shadowRoot.appendChild(style); } } ``` Note: The CSS is wrapped in `@layer components { }` for Tailwind CSS cascade layers. When using in Shadow DOM, strip the `@layer` wrapper as shown above.