MLJR CSS Framework

A TailwindCSS-based CSS framework with SvelteKit component library, featuring a Claymorphism design system with warm orange (primary) and soft purple (secondary) colors, working in both light and dark modes.

Packages

Package	Version	Description
mljr-css	1.0.14	CSS framework and Tailwind plugin
mljr-svelte	1.0.14	Svelte 5 component library

Quick Start

Installation

# Install both packages
pnpm add mljr-css mljr-svelte

# Or install individually
pnpm add mljr-css
pnpm add mljr-svelte

Using the CSS Framework

Option 1: Tailwind Plugin

// tailwind.config.js
import mljrPlugin from 'mljr-css';

export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  plugins: [mljrPlugin()],
};

Option 2: Import CSS directly

/* app.css */
@import 'mljr-css/css';

Option 3: CDN

<link rel="stylesheet" href="https://unpkg.com/mljr-css/dist/mljr.min.css">

Using Svelte Components

<script>
  import { Button, Card, Alert, Toast, Table, Spinner } from 'mljr-svelte';
</script>

<Card title="Welcome">
  <p>This is a card component.</p>
  <Button variant="primary">Click me</Button>
</Card>

<Alert variant="success" title="Success!">
  Operation completed successfully.
</Alert>

Color Scheme

Primary (Orange)

• primary-500: #F97316 (main brand color)
• primary-600: #EA580C (buttons, links)
• primary-700: #C2410C (hover states)

Secondary (Purple)

• secondary-500: #A855F7
• secondary-600: #9333EA (buttons, links)
• secondary-700: #7E22CE (hover states)

Accent (Teal)

• accent-500: #14B8A6
• accent-600: #0D9488

Component Implementation Status

Track the progress of component implementation across the framework.

Input Components

Basic Inputs

• Button - Basic button with onClick
  • Icon Button
  • Loading State
  • Disabled State
• Text Input - Single-line text input
  • With Icons (left/right)
• Textarea - Multi-line text input
  • Auto-resize
  • Character Counter
  • Max Length
• Select - Dropdown option selection
  • With Search (SelectMenu component)
  • Multi-select (SelectMenu component)
  • Clear selection
  • Keyboard navigation support
• Checkbox - Binary selection
  • Indeterminate State
  • Checkbox Group
  • Select All functionality
  • Maximum selections limit
  • Individual helper texts
  • Support custom Icons for states
• Radio - Single option from list
  • Radio Group
  • Individual helper texts
  • Error state support
  • Horizontal/vertical layouts
  • Support custom Icons for states
• Switch (Toggle) - Switch-style selection
  • With Icons (onIcon/offIcon props)
  • With Labels (onLabel/offLabel props)
• Range/Slider - Slider value selection
  • With Steps
  • With Labels
  • dual thumbs for range selection (RangeSlider)
• File Input - File upload field
  • Drag & Drop
  • Preview
  • Multiple Files
• Rating - Star-based rating input
  • Custom Icons
  • Half Stars (allowHalf prop)
• OTP/PIN - Pin input with varying length
• Phone Number - With Flags and +xx + validation
  • Flags
  • validation
• Date and Time + Range
  • Date Picker
  • Time Picker
  • 12/24 hour format
  • Seconds support
  • Date Range (via DatePicker)
  • Time Range
• Password Input with Strength
• Email Input - With validation
• Search Input - With loading state
• Color Picker - HSL/RGB/Hex support
• Number Input - Stepper numeric input
  • Min/Max/Step control
  • Keyboard increment/decrement
  • Size variants (sm/md/lg)
  • Disabled/Readonly states

Form Structure

• Form - Form wrapper with validation
  • Reset Functionality
  • Submit Handling
  • Validation State
• Fieldset - Input grouping
  • Disabled State
  • Legend
• Label - Input field labels
  • Required Indicator
  • Helper Text
• Validator
  • Error Messages
  • Success State
  • Warning State
  • Custom Validation Rules
• Form Wizard
  • Step Navigation
  • Progress Indicator
  • Data Persistence

Navigation Components

Primary Navigation

• Navbar - Main navigation bar
  • Responsive Breakpoints
  • Sticky/Fixed Position
  • With Search
  • With User Menu
  • Mobile Hamburger
  • Search Integration
  • User Menu Dropdown
• Menu - Vertical/horizontal navigation
  • Nested Menus
  • Collapsible Groups
  • With Icons
  • Active States
• Tabs - Content section navigation
  • Scrollable Tabs
  • With Counter Badges
  • With Close Button
  • Vertical Tabs
• Breadcrumbs - Hierarchical navigation
  • With Icons
  • Dynamic Updates
  • Truncation
• Pagination - Page navigation
  • With Size Options
  • Jump to Page
  • Items Per Page

Secondary Navigation

• Drawer - Side panel navigation
  • Multiple Positions
  • Overlay/Push Modes
  • Backdrop Options
• Steps/Stepper - Progress indicators
  • Vertical Layout
  • With Status
  • Interactive Steps
• Navigation Rail - Minimal Side Navigation
• Dock - Dock at the bottom for navigation (mobile)
• Command Palette - Keyboard Navigation

Content Containers

• Card - Content wrapper
  • Loading State
  • With Actions
  • Hoverable
  • Clickable
• Modal - Overlay dialogs
  • Size Variants
  • With Animation
  • Nested Modals
  • Focus Trap
• Collapse - Expandable sections
  • Group Behavior
  • Custom Icons
  • With Animation
• Accordion - Collapsible panels
  • Multiple Open
  • Custom Headers
  • Nested Accordions
• Toast - Notification containers
  • Auto Dismiss
  • Stack Behavior
  • Custom Position
  • Progress Bar
  • With promise and actions
• Popover - Contextual overlays
  • Placement Options
  • Arrow Indicators
  • Click/Hover Trigger
• Context Menu - Right-click contextual menu
  • Custom items with icons and shortcuts
  • Danger/disabled item states
  • Dividers
  • Keyboard close (Escape)
• Notification Center - Bell icon + notification panel
  • Unread badge count
  • Mark read / mark all read
  • Clear notifications
  • Type variants (info/success/warning/error)

Display Components

Status & Progress

• Alert - Status messages
  • Different Types (success, error, warning, info)
  • Dismissible
  • With Icons
  • With Actions
• Badge - Status indicators
  • Position Variants
  • Size Variants
  • With Icons
• Progress - Linear progress
  • Determinate/Indeterminate
  • With Label
  • Color Variants
• Radial Progress - Circular progress
  • With Label
  • Custom Size
  • Custom Colors
• Loading/Spinner - Loading state spinners
  • Multiple Variants
  • Custom Colors
  • Custom Size
• Skeleton - Content placeholders
  • Text Variants
  • Image Placeholder
  • Custom Animations
• Stat/Stats - Metric displays
  • With Icons
  • With Trends
  • With Charts

Media & Content

• Avatar - User images
  • With Status
  • Group Layout
  • Fallback Text
• Carousel - Content slider
  • Auto-play
  • Custom Controls
  • Multiple Items
• Chat Bubble - Message display
  • User/Bot Variants
  • With Time
  • With Status
• Indicator - Position markers
  • Different Positions (6 positions)
  • Custom Colors (6 color variants)
  • Dot/badge modes
  • Ping animation
  • Size variants
• Mask - Image masks
  • Different Shapes (9 shapes: circle, squircle, hexagon, triangle, star, heart, pentagon, diamond, decagon)
  • CSS clip-path based
  • Works with any content
• Timeline - Event sequences
  • Vertical/Horizontal
  • With Icons
  • Interactive Items
• Calendar - Full month calendar view
  • Date selection
  • Event dots
  • Min/Max date constraints
  • Month/Year navigation
  • Today highlight
• Gauge - Circular arc gauge
  • Half/Full arc variants
  • Animated value transitions
  • Custom colors, label, unit
  • Size control

Data Display

• Table - Data grid
  • Sortable Columns
  • Filterable
  • Pagination
  • Row Selection
  • Column Resizing
• Tree View - Hierarchical data
  • Drag & Drop
  • Checkbox Selection
  • Custom Icons
  • Search/Filter
• Tags/Chips
  • Removable
  • With Icons
  • Color Variants
  • Input Mode
• Diff Viewer
  • Side by Side
  • Inline Mode (unified)
  • Syntax Highlighting

Utility Components

Interactive Utils

• Countdown - Number animations
  • Different Formats (default, compact, card, minimal)
  • Custom Styling
  • With Events (onComplete callback)
  • Custom Labels
  • Selectable Units (days/hours/minutes/seconds)
• Kbd - Keyboard shortcuts
  • Combinations
  • Platform Specific
• Swap - Element toggle
  • Custom Animations (rotate, flip, fade, none)
  • Transition Effects
  • Active state management
• Theme Controller/ThemeToggle
  • System Preference
  • Persistent Storage
  • Custom Themes
• Language Toggle
  • Auto Detection
  • Persistent Choice
  • Language Names/Flags
• Tooltip
  • Multiple Positions
  • Custom Delay
  • Rich Content
• Copy to Clipboard (CopyButton)
  • Success Feedback
  • Custom Content
  • Custom Icons
  • Multiple Variants
• Intersection Observer (InView)
  • Lazy Loading (LazyImage)
  • Infinite Scroll (InfiniteScroll)
  • Scroll Animations (fade, slide, scale, flip)

Layout Components

• Navbar - Responsive navigation
  • Mobile Menu
  • Search Integration
  • User Menu Dropdown
• Footer - Page footer
  • Multi-column Layout
  • Newsletter Signup
  • Social Links
• Hero Section
  • Multiple Variants (default, centered, split, minimal)
  • With Background Image/Gradient
  • With CTA Buttons
  • Pattern Support
  • Media Slot
  • Customizable Alignment
• Sidebar - Side navigation
  • Collapsible
  • With Search
  • With Categories
• Background - Decorative backgrounds
  • Pattern support
  • Animated variants
• Divider - Separators
  • Horizontal/Vertical
  • With content
  • Color variants
• Icon - Universal icon component
  • Iconify integration (200k+ icons)
  • Size/color control

Prebuilt Compound Components

• UnifiedNav - Combined nav showcase
• EmptyState - No data states
• CodeExample - Code display with syntax highlighting

Advanced Components

• Rich Text Editor
  • Bold/Italic/Underline/Strikethrough
  • Headings (H1-H3)
  • Lists (ordered/unordered)
  • Text alignment
  • Blockquote/Code block/Links/HR
  • Undo/Redo/Clear formatting
  • Word & character count
  • Keyboard shortcuts
• Video Player
• Color Picker
• Data Graphs (simple premade graphs)
  • Bar Chart (single and multi-dataset)
  • Line Chart (with area fill)
  • Donut Chart (with hover and center label)
• PIN (like OTP)
• Auto Complete
  • Single Selection
  • Multiple Selection
  • Grouped Options
  • Allow Custom Values
  • Keyboard Navigation
• Table of Content
  • Manual items
  • Auto-scan from content selector
  • Scroll-based active tracking
  • Sticky sidebar mode
• Lazy Loading (via LazyImage + InView)
• Image Compare
  • Horizontal slider
  • Vertical slider
  • Keyboard support (arrow keys)
  • Touch support
  • Before/after labels
• Map Embed (OpenStreetMap)
  • Coordinate-based (lat/lon + zoom)
  • Location label overlay
  • Attribution
  • Loading state
  • Rounded variants
• Marquee
  • Horizontal Scrolling
  • Reverse Direction
  • Pause on Hover
  • Gradient Fade Edges
  • Custom Item Snippet
• File Pond (advanced file upload)
• PDF Viewer
  • Browser-native inline rendering
  • Download button
  • Open in new tab button
  • Fallback for unsupported browsers
  • Configurable toolbar
• Animated Headline
  • Typing Animation
  • Fade Animation
  • Slide Animation
  • Flip Animation
  • Gradient Highlight
• Scroll Animations (via InView: fade, slide-up/down/left/right, scale, flip)
• Turnstile (Cloudflare CAPTCHA)
  • Real widget integration (siteKey prop)
  • Demo widget (no API key)
  • Theme variants (light/dark/auto)
  • Verification/expiry/error callbacks
  • Status messages
• Audio Visualizer

Examples Page

The main examples page (/) demonstrates all components organized by category tabs.

Forms Tab

• Basic form inputs (Input, Password, EmailInput, Checkbox, Radio, Switch, Select, Slider, Rating)
• Textarea (auto-resize, character counter, max length)
• Radio buttons (individual + RadioGroup)
• CheckboxGroup (select all, max selections)
• RadioGroup (horizontal/vertical layouts)
• FileUpload (drag & drop, preview, multiple)
• Advanced inputs (PhoneInput, DatePicker, ColorPicker, OtpInput)
• TimePicker & TimeRangePicker
• PinInput
• New inputs (NumberInput, DropZone)
• ChipInput
• AutoComplete (single, multi, grouped, custom values)

Buttons & Chips Tab

• Button variants (primary, secondary, outline, ghost, link, danger, success)
• Icon buttons and loading states
• Chip (removable, with icons, color variants)
• CopyButton

Data Display Tab

• Card (loading state, actions, hoverable)
• Table (sortable, filterable, paginated, row selection)
• Stats with trends
• AvatarGroup & ChatBubble
• TreeView (drag & drop, checkbox selection, search)
• Stepper
• Data Graphs (BarChart, LineChart, DonutChart)

Feedback Tab

• Alert (types, dismissible, icons, actions)
• Badge (positions, sizes, icons)
• Progress (determinate/indeterminate, variants)
• Skeleton (text, image placeholders)
• Spinner (multiple variants)
• Toast (auto-dismiss, positions, promise)
• Carousel (auto-play, custom controls)
• Countdown (formats, units)
• Swap (rotate, flip, fade animations)
• Indicator (positions, colors, ping)
• Mask (9 shapes)
• EmptyState
• Misc display (Timeline, Kbd, AvatarGroup, RadialProgress)

Overlays Tab

• Modal (sizes, nested, focus trap)
• Drawer (positions, overlay/push)
• Popover (placements, arrows)
• Dropdown (sizes, item states)
• Tooltip (positions, delay)
• Collapse (group, icons, animation)
• Accordion (multiple open, nested)
• Tabs

Navigation Tab

• Navbar (responsive, sticky, search, user menu)
• Breadcrumb (icons, truncation)
• Pagination (sizes, jump to page)
• Sidebar (collapsible, search, categories)
• Menu (nested, collapsible, icons)
• CommandPalette (Cmd+K)
• NavigationRail
• Dock
• UnifiedNav showcase

Layout Tab

• Divider (horizontal/vertical, with content)
• Kbd (combinations, platform-specific)
• Hero (variants: default, centered, split, minimal)
• Sidebar
• Background (patterns, animated)
• Gradients
• Footer (multi-column, newsletter, social)

Media Tab

• Marquee (horizontal, reverse, pause on hover, gradient edges)
• ImageCompare (horizontal/vertical, keyboard, touch)
• AudioVisualizer
• VideoPlayer
• DropZone (advanced upload)
• ScrollReveal (fade, slide, scale, flip via InView)
• LazyLoad (LazyImage + InfiniteScroll)

Text & Content Tab

• AnimatedHeadline (typing, fade, slide, flip, gradient)
• TableOfContent (manual, auto-scan, scroll tracking, sticky)
• DiffViewer (side-by-side, inline, syntax highlighting)
• Icon (Iconify integration, 200k+ icons)

Integration Tab

• RichTextEditor (formatting, lists, undo/redo, shortcuts)
• MapEmbed (OpenStreetMap, coordinate-based)
• PdfViewer (inline, download, new tab, fallback)
• Turnstile (Cloudflare CAPTCHA)
• CookieBanner (consent management)
• Legal pages (Impressum, Datenschutz, AboutPage)

---

Component Tester

The component tester page (/components/tester) provides isolated showcase views for each component with search, category filter, and keyboard navigation (← → arrow keys).

Forms

• Button
• Input
• Checkbox
• CheckboxGroup
• Radio
• RadioGroup
• Select
• SelectMenu (searchable, multi-select)
• Switch
• Textarea
• Rating
• Slider
• RangeSlider
• FileUpload
• DropZone
• Password
• SearchInput
• EmailInput
• PhoneInput
• DatePicker
• ColorPicker
• TimePicker
• TimeRangePicker
• OtpInput
• PinInput
• ChipInput
• AutoComplete
• NumberInput
• RichTextEditor
• Turnstile
• FormWizard
• Form / Fieldset / Label / Validator

Display

• Avatar
• AvatarGroup
• Card
• Chip
• Divider
• Table
• Stats
• Timeline
• Carousel
• Kbd
• ChatBubble
• Countdown
• Swap
• Indicator
• Mask
• TreeView
• Marquee
• AnimatedHeadline
• ImageCompare
• Charts (BarChart / LineChart / DonutChart)
• TableOfContent
• InView (Scroll Reveal)
• LazyImage
• InfiniteScroll
• DiffViewer
• AudioVisualizer
• VideoPlayer
• MapEmbed
• PdfViewer
• Calendar
• Gauge

Feedback

• Alert
• Badge
• Progress
• RadialProgress
• Skeleton
• Spinner
• Toast
• Tooltip
• EmptyState

Overlay

• Accordion
• Dropdown
• Modal
• Popover
• Collapse
• CommandPalette
• CookieBanner
• ContextMenu
• NotificationCenter

Navigation

• Navbar
• Breadcrumb
• Pagination
• Sidebar
• Tabs
• Drawer
• Stepper
• Menu
• NavigationRail
• Dock
• UnifiedNav

Layout

• Background
• Footer
• Hero
• Icon
• ThemeToggle
• LanguageToggle
• CopyButton
• Impressum
• Datenschutz
• AboutPage

---

Unit Tests

Vitest browser tests for all components (packages/mljr-svelte/src/tests/).

Form Components

• Button
• Input
• Checkbox
• CheckboxGroup
• Radio
• RadioGroup
• Switch
• Textarea
• Select
• SelectMenu
• Rating
• Slider
• RangeSlider
• FileUpload
• DropZone
• Password
• SearchInput
• EmailInput
• PhoneInput
• DatePicker
• TimePicker
• TimeRangePicker
• ColorPicker
• OtpInput
• PinInput
• ChipInput
• AutoComplete
• NumberInput
• RichTextEditor
• Turnstile
• Form
• FormWizard
• Fieldset
• Label
• Validator

Navigation Components

• Navbar
• Tabs
• Breadcrumb
• Pagination
• Drawer
• Stepper
• CommandPalette
• Sidebar
• Menu
• NavigationRail
• Dock
• UnifiedNav

Feedback Components

• Alert
• Badge
• Toast
• Spinner
• Progress
• RadialProgress
• Skeleton
• EmptyState

Display Components

• Card
• Avatar
• AvatarGroup
• Chip
• Divider
• Timeline
• Stats
• Carousel
• Kbd
• ChatBubble
• Countdown
• Swap
• Indicator
• Mask
• TreeView
• Marquee
• AnimatedHeadline
• ImageCompare
• TableOfContent
• BarChart
• LineChart
• DonutChart
• InView
• LazyImage
• InfiniteScroll
• DiffViewer
• AudioVisualizer
• VideoPlayer
• MapEmbed
• PdfViewer
• Calendar
• Gauge

Overlay Components

• Modal
• Popover
• Tooltip
• Dropdown
• Collapse
• Accordion
• CookieBanner
• ContextMenu
• NotificationCenter

Layout Components

• Background
• Footer
• Hero
• Icon
• ThemeToggle
• LanguageToggle
• CopyButton
• Impressum
• Datenschutz
• AboutPage

Utility Components

• Table
• Accordion
• CodeExample
• CookieSettingsButton

---

Dark Mode

The framework supports both light and dark modes. Toggle between modes using:

• CSS class: .dark
• Data attribute: [data-theme="dark"]

// Toggle dark mode
document.documentElement.classList.toggle('dark');
// or
document.documentElement.setAttribute('data-theme', 'dark');

Using the Svelte theme store:

<script>
  import { themeStore } from 'mljr-svelte';

  // Initialize on mount
  themeStore.initialize();
</script>

<button onclick={() => themeStore.toggleTheme()}>
  Toggle theme
</button>

Development

Prerequisites

• Node.js 18+
• pnpm 9+

Setup

# Clone the repository
git clone https://github.com/your-username/mljrCSS.git
cd mljrCSS

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Start development
pnpm dev

Project Structure

mljrCSS/
├── .github/workflows/      # CI + Release automation
├── .changeset/             # Version management
├── packages/
│   ├── mljr-css/           # CSS framework
│   │   ├── src/
│   │   │   ├── themes/     # CSS variables, light/dark
│   │   │   ├── base/       # Reset, typography
│   │   │   ├── components/ # Buttons, cards, forms, etc.
│   │   │   ├── layout/     # Header, footer, grid, etc.
│   │   │   ├── utilities/  # Custom utilities
│   │   │   └── plugin.ts   # Tailwind plugin
│   │   └── dist/           # Built CSS + plugin
│   └── mljr-svelte/        # Svelte 5 components
│       └── src/lib/
│           ├── components/ # Button, Card, Alert, etc.
│           ├── stores/     # Theme store
│           └── index.ts    # Exports
├── pnpm-workspace.yaml
├── package.json
└── turbo.json

Commands

# Build all packages
pnpm build

# Run development servers
pnpm dev

# Type check
pnpm check

# Create a changeset
pnpm changeset

# Version packages
pnpm version-packages

# Release packages
pnpm release

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Create a changeset (pnpm changeset)
4. Commit your changes (git commit -m 'Add amazing feature')
5. Push to the branch (git push origin feature/amazing-feature)
6. Open a Pull Request

License

MIT