hexaWebShare

A comprehensive Svelte 5 component library built with DaisyUI and Tailwind CSS, offering a rich collection of UI components for modern web applications.

✨ Features

• 🎨 100+ Components - Buttons, forms, layouts, overlays, and more
• ⚡ Svelte 5 - Built with the latest Svelte features and runes
• 🎭 DaisyUI Integration - Beautiful, themeable components
• 🎯 TypeScript - Full type safety and IntelliSense support
• 📱 Responsive - Mobile-first, fully responsive designs
• ♿ Accessible - WCAG compliant components
• 🎨 Themeable - Multiple DaisyUI themes supported

📦 Installation

Install from NPM (Recommended)

# Install the latest version
pnpm add @htunesys/hexawebshare

# Or install a specific version
pnpm add @htunesys/[email protected]

Install Peer Dependencies

You must install these dependencies in your project:

pnpm add -D tailwindcss@^4 daisyui@^5 lucide-svelte@^0.563

🚀 Quick Setup

1. Configure Tailwind CSS

Create or update your CSS file (e.g., src/app.css):

@import 'tailwindcss';

@plugin 'daisyui' {
	themes:
		light --default,
		dark --prefersdark;
	logs: false;
}

@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

2. Import and Use Components

<script lang="ts">
	import { Button, Card, Input } from '@htunesys/hexawebshare';
</script>

<Card>
	<h2>Login Form</h2>
	<Input label="Email" type="email" placeholder="Enter your email" />
	<Input label="Password" type="password" placeholder="Enter your password" />
	<Button variant="primary">Sign In</Button>
</Card>

📚 Available Components

Core Components

Buttons

• Button - Versatile button with variants
• IconButton - Icon-only button
• ButtonGroup - Group multiple buttons
• ToggleButton - Toggle state button
• SegmentedControl - Segmented control buttons

Forms

• Input - Text input with validation
• Select - Dropdown select
• Checkbox - Checkbox input
• RadioGroup - Radio button group
• Switch - Toggle switch
• Textarea - Multi-line text input
• DatePicker - Date selection
• TimePicker - Time selection
• FileUpload - File upload component
• NumberInput - Numeric input with stepper
• SearchInput - Search input with icon
• Slider - Range slider
• MultiSelect - Multi-selection dropdown

Layout

• Card - Content container
• Container - Page container
• Grid - Grid layout
• Row / Col - Flex layout
• Divider - Visual separator
• Section - Content section
• PageWrapper - Full page wrapper

Feedback

• Alert - Alert messages
• Toast - Toast notifications
• Spinner - Loading spinner
• ProgressBar - Progress indicator
• Loader - Full-page loader
• SkeletonLoader - Skeleton loading state
• Callout - Important callouts

Typography

• Heading - Headings (h1-h6)
• Text - Text with variants
• Paragraph - Paragraph text
• Link - Styled link
• Lead - Lead paragraph
• MutedText - Muted text

Media

• Avatar - User avatar
• Badge - Status badge
• Chip - Chip/tag component
• Icon - Icon wrapper (Lucide)
• Pill - Pill badge
• Tag - Tag component
• Tooltip - Tooltip overlay

Data Display

• Table - Data table
• List / ListItem - List components
• StatusBadge - Status indicator
• StatusDot - Status dot
• Label - Form label
• EmptyState - Empty state placeholder

Navigation & Overlays

• Menu - Dropdown menu
• Modal - Modal dialog
• Drawer - Side drawer
• Dropdown - Dropdown component
• Tabs - Tab navigation
• Accordion - Expandable sections
• Breadcrumbs - Breadcrumb navigation
• Pagination - Page navigation
• Sidebar - Side navigation
• Stepper - Step indicator
• Steps - Multi-step process
• Popover - Popover overlay
• ContextMenu - Right-click menu

Admin Components

• AdminLayout - Admin panel layout
• AdminSidebar - Admin navigation sidebar
• DataTableToolbar - Data table toolbar

E-commerce Components

• ProductCard - Product display card
• ProductGrid - Product grid layout
• ProductList - Product list view
• PriceDisplay - Price formatter
• ProductRating - Star rating
• AddressCard - Address display
• AddressList - Address list
• AccountSidebar - Account sidebar

Marketing Components

• HeroSection - Hero section
• CTASection - Call-to-action section
• FeaturesSection - Features showcase
• PricingSection - Pricing tables
• TestimonialsSection - Customer testimonials
• FAQAccordionSection - FAQ section
• StatsSection - Statistics display
• BlogListSection - Blog list
• ContactSection - Contact form
• Navbar - Navigation bar
• SiteFooter - Site footer
• LogoCloud - Logo showcase
• Timeline - Timeline component
• Roadmap - Product roadmap

Utility Components

• FooterBar - Footer component
• GlobalSearchBar - Global search
• ThemeToggle - Dark/light theme toggle
• LanguageSwitcher - Language selector
• ConfirmDialog - Confirmation dialog
• FilterPanel - Filter sidebar
• KeyboardShortcutHint - Keyboard hints

🎨 Theming

hexaWebShare uses DaisyUI themes. Available themes:

@plugin 'daisyui' {
	themes:
		light, dark, cupcake, bumblebee, emerald, corporate, synthwave, retro, cyberpunk, valentine,
		halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk,
		autumn, business, acid, lemonade, night, coffee, winter;
}

📖 TypeScript Support

All components are fully typed with TypeScript:

import { Button, type ButtonProps } from '@htunesys/hexawebshare';

const props: ButtonProps = {
	variant: 'primary',
	size: 'md',
	disabled: false
};

🔄 Version Management

# Install latest version
pnpm add @htunesys/hexawebshare

# Install specific version
pnpm add @htunesys/[email protected]

# Update to latest
pnpm update @htunesys/hexawebshare

See all versions on NPM

🛠️ Development Commands

| Command | Description | | ---------------------- | ------------------------------ | | pnpm dev | Start SvelteKit dev server | | pnpm storybook | Start Storybook dev server | | pnpm build | Build library package | | pnpm prepack | Build package for distribution | | pnpm build-storybook | Build static Storybook | | pnpm check | TypeScript type checking | | pnpm format | Format code with Prettier | | pnpm lint | Check code formatting |

📂 Component Structure

src/components/
├── core/         # Core UI components (buttons, forms, layout)
├── admin/        # Admin panel components
├── b2b/          # B2B workspace components
├── ecommerce/    # E-commerce components
├── marketing/    # Marketing components
└── utility/      # Utility components

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

• Development Guide
• Architecture
• Branch Strategy
• Commit Strategy

📄 License

MIT License - see LICENSE file for details.

🏢 About

Built by hexaTune LLC

• GitHub: hTuneSys/hexaWebShare
• Storybook: View Components

⚠️ Requirements

• Node.js >= 18.0.0
• pnpm (recommended) or npm
• Svelte >= 5.0.0
• Tailwind CSS >= 4.0.0
• DaisyUI >= 5.0.0
• lucide-svelte >= 0.563.0

🙏 Acknowledgments

• Built with Svelte 5
• Styled with Tailwind CSS
• Components from DaisyUI
• Icons by Lucide
• Documented with Storybook