@paxapos/fyc-svelte

Comprehensive Svelte component library combining Flowbite Svelte components, Flowbite Icons, and custom FYC components for building modern web applications.

📦 Installation

npm install @paxapos/fyc-svelte
# or
pnpm add @paxapos/fyc-svelte
# or
yarn add @paxapos/fyc-svelte

🎯 What's Included

🎨 60+ Flowbite Svelte Components

Complete UI toolkit with layout, forms, buttons, data display, and utility components.

🎭 500+ Flowbite Icons

Comprehensive icon library covering interface, navigation, actions, communication, and brand icons.

🏗️ 11 Custom FYC Components

Specialized components built specifically for modern web applications.

🚀 Quick Start

<script>
  import {
    Button, Card, FycInput, FycAppLayout,
    CheckCircleOutline
  } from '@paxapos/fyc-svelte';

  // Import the styles
  import '@paxapos/fyc-svelte/style.css';

  let username = '';
</script>

<FycAppLayout>
  <main class="p-6">
    <Card class="max-w-md mx-auto">
      <h2 class="text-xl font-bold mb-4">Welcome</h2>

      <FycInput
        label="Username"
        placeholder="Enter username"
        bind:value={username}
      />

      <Button class="w-full mt-4">
        <CheckCircleOutline class="mr-2" />
        Submit
      </Button>
    </Card>
  </main>
</FycAppLayout>

📚 Documentation

• 🎨 Storybook - Interactive component playground (run pnpm storybook)
• Flowbite Svelte Docs - Complete Flowbite component documentation## 🛠️ Development

Prerequisites

• Node.js 22+
• pnpm 9+

Setup

# Clone the repository
git clone https://github.com/paxapos/core.git
cd core/packages/fyc-svelte

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Run Storybook
pnpm storybook

Building

# Build the library
pnpm run build

# Type check
pnpm run check

# Clean build artifacts
pnpm run clean

📦 Publishing

This package is automatically published to npm via GitHub Actions when a release is created.

Create a release with tag format fyc-svelte-v1.2.3 to trigger automatic publishing.

Manual Publishing

# Use the provided script
./publish.sh

# Or manually
pnpm run build
npm publish --access public

🏗️ Architecture

Component Categories

@paxapos/fyc-svelte/
├── 🎨 Flowbite Components (60+)
│   ├── Layout & Navigation
│   ├── Forms & Inputs
│   ├── Buttons & Actions
│   ├── Display Components
│   └── Data Components
├── 🎭 Flowbite Icons (500+)
│   ├── Interface Icons
│   ├── Navigation Icons
│   ├── Action Icons
│   └── Brand Icons
└── 🏗️ Custom FYC Components (11)
    ├── Input Components
    ├── Button Components
    ├── Layout Components
    └── UI Components

🔧 Peer Dependencies

{
  "svelte": "^5.0.0",
  "tailwindcss": "^4.1.0"
}

Make sure you have these installed in your project.

📋 Browser Support

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-component
3. Make your changes
4. Add tests if applicable
5. Run pnpm run check and pnpm run build
6. Submit a pull request

📄 License

MIT License - see LICENSE for details.

🔗 Links

• 📦 npm Package
• 🐙 GitHub Repository
• 📚 Flowbite Svelte Docs
• 🎨 Flowbite Icons
• 🎭 Tailwind CSS

🆕 Recent Updates

Check the Releases page for the latest updates and changelogs.

Built with ❤️ by the PaxaPOS team