mljr-components v0.1.8

MLJR Components

A collection of Svelte components based on DaisyUI, organized for easy reference and implementation tracking.

Form Controls

• Button - Actions and choices
• Checkbox - Select/deselect values
• File Input - File upload field
• Text Input - Basic text input field
• Radio - Single option selection
• Range slider - Value selection via sliding (Future make it actual range with two handles)
• Rating - Star-based rating input
• Select - Dropdown option picker
• Textarea - Multi-line text input
• Toggle - Switch-style checkbox
• Fieldset - Form element grouping
• Validator - Form validation styling

Navigation & Structure

• Accordion - Collapsible content panels
• Breadcrumbs - Navigation path indicator
• Drawer - Side panel navigation
• Dropdown - Click-triggered menus
• Menu - Vertical/horizontal link lists
• Navbar - Top navigation bar
• Pagination - Page navigation controls
• Steps - Process step indicators
• Tabs - Tabbed content navigation
• Timeline - Chronological event display

Layout & Containers

• Card - Content grouping boxes
• Collapse - Expandable content
• Divider - Content separator
• Dock - Bottom navigation bar (Not needed maybe implement later)
• Footer - Page footer content
• Hero - Featured content display
• Join - Element grouping container
• Stack - Z-axis element stacking
• Table - Data grid display

Feedback & Status

• Alert - Important event notifications
• Badge - Status indicators
• Loading - Loading state animations
• Modal - Dialog boxes
• Progress - Linear progress indicator
• Radial progress - Circular progress
• Skeleton - Loading state placeholder
• Stat - Data/numbers display
• Status - Small status indicators
• Toast - Corner notifications (Close Button alignment broken!)

Display & Media

• Avatar - User thumbnails (online indicator on placeholder variant not circular???)
• Calendar - Date display/selection (in the future hopefully? For now only Browser date picker)
• Carousel - Scrollable content
• Chat bubble - Conversation bubbles
• Diff - Side-by-side comparison (Appears to be create correct html code but not working????)
• Indicator - Corner element placement
• Mask - Shape-based content cropping (only CSS Class no Component as it makes no sense)
• Swap - Element toggle visibility

Mockups

• Browser mockup - Browser window simulation
• Code mockup - Code editor simulation
• Phone mockup - iPhone device simulation
• Window mockup - OS window simulation

Utilities

• Countdown - Number transition effects
• Filter - Radio button filtering
• Kbd - Keyboard shortcut display
• Label - Input field labels
• Link - Styled anchor tags
• List - Vertical information rows
• Theme Controller - Theme switching control (Only works for light and dark mode)

Prebuilt compount components

• Login
• Register
• Password Reset
• Navbar
• Footer
• Hero Element
• Dynamic form generator (from JSON schema)
• Cookie consent banner
• Account settings panel + place for app specific settings and stats etc.?
• ...?

Advanced Components / non DaisyUI Components

• Rich text Editor
• Video Player
• Custom Date / time picker ?? (e.g. https://svelty-picker.vercel.app/)
• Color Picker
• Data Graphs ( simple premade graphs for library? )
• PIN (like OTP)
• Auto Complete
• Table of Content
• Lazy Loading?
• Image Compare (as Diff does not work?)
• Map (maplibre, openmap, etc?)
• Marquee
• Svelte Filepond (advance file upload with preview to replace current one or as advanced version?)
• svelte PDF (for bachelor thesis?)
• animated headline?
• Animations?
• mCaptha? else Turnstile
• Audio Visualiser
• Svelte Origami (3d animations)?
• auto animate: https://auto-animate.formkit.com/ ???
• ...

TODO

• Navbar mobile verison + Hamburger
• check mobile use of every component
• Fix missing or slightly broken Components
• ...

Getting Started

npm install mljr-components

Usage

<script>
	import { Button } from 'mljr-components';
</script>

<Button>Click me!</Button>