Svelte UI Component Library

A collection of reusable Svelte 5 UI components with Tailwind CSS styling and FontAwesome icon support.

See JUNIE.md for how Junie (our autonomous programmer) handles repository rules files like CLAUDE.md and .cursorrules.

Components

• Button - Flexible button/anchor with variants and icon support
• Dialog - Modal dialog with backdrop handling
• Input - Enhanced text input with icons and validation
• Select - Custom dropdown with keyboard navigation
• Rating - Interactive star rating component
• NotesEditor - Auto-sizing textarea component

Installation

# For local development
npm install ../path/to/svelte-ui/dist

# Or build from source
cd svelte-ui
npm install
npm run package

Prerequisites

Your project must have these peer dependencies installed:

npm install svelte@^5.0.0 tailwindcss@^4.0.0
npm install @fortawesome/fontawesome-svg-core@^6.7.0
npm install @fortawesome/free-solid-svg-icons@^6.7.0

Setup

1. Tailwind Configuration

Add the component paths to your tailwind.config.js:

export default {
  content: [
    './src/**/*.{html,js,svelte,ts}',
    './node_modules/svelte-ui/**/*.{html,js,svelte,ts}'
  ],
  // ... rest of config
}

2. Import Components

<script>
  import { Button, Dialog, Input, Select, Rating } from 'svelte-ui';
  import { faSearch, faSave } from '@fortawesome/free-solid-svg-icons';
</script>

<Button text="Click me" variant="primary" />
<Input bind:value={searchQuery} icon={faSearch} placeholder="Search..." />
<Select options={myOptions} bind:value={selected} />

Development

npm run dev     # Start demo server
npm run package # Build library
npm run check   # TypeScript validation

Demo

Run npm run dev to see all components in action at http://localhost:5173

License

ISC