aiby-svelte-uikit

A library of reusable Svelte 5 components for building modern UI and logic-driven applications.

Features

• Collection of UI and logic components for Svelte 5 projects
• CLI tool for easy project setup and component integration
• Optional banner template for quick project scaffolding
• Modular and customizable component structure
• TypeScript support for type safety

Installation

Install the library globally or use it via npx for project setup:

npm install -g aiby-svelte-uikit

Or run directly with npx:

npx aiby-svelte-uikit [project-name]

Usage

Creating a New Project

To create a new project with the library, run:

npx aiby-svelte-uikit my-project

This will:

1. Create a new directory named my-project (if a project name is provided)
2. Prompt you to choose whether to use the standard banner template
3. Ask for paths to install UI and logic components (defaults to src/components/ui and src/components)
4. Allow you to select UI and logic components to add to your project
5. Copy the selected components to the specified directories
6. Install dependencies if the banner template is used

Adding Components to an Existing Project

To add components to an existing Svelte project, navigate to your project directory and run:

npx aiby-svelte-uikit

This will:

1. Prompt for the directories where UI and logic components should be installed
2. Display a list of available UI and logic components
3. Copy the selected components to the specified directories

CLI Options

• Project Name: Specify a project name to create a new directory (e.g., npx aiby-svelte-uikit my-project)
• Banner Template: Choose to scaffold the project with a pre-configured Svelte banner template
• Custom Paths: Define custom directories for UI and logic components

Example Workflow

# Create a new project named "my-app"
npx aiby-svelte-uikit my-app

# Follow the prompts:
# 1. Choose to use the banner template (recommended for new projects)
# 2. Specify directories for UI and logic components
# 3. Select components to add

# Navigate to the project
cd my-app

# Start the development server
npm run dev

Project Structure

After running the CLI, your project may look like this (if using the banner template):

my-app/
├── src/
│   ├── components/
│   │   ├── ui/               # UI components (e.g., Button, Card)
│   │   ├── [logic]/          # Logic components (e.g., FormHandler)
│   ├── app.svelte            # Main Svelte app
├── package.json
├── svelte.config.js

Requirements

• Svelte: ^5.0.0 (peer dependency)
• Node.js: >= 20.x

Available Components

The library includes UI and logic components. Run the CLI to see the full list of available components.

UI Components

• Located in src/components/ui
• Examples: Buttons, Cards, Modals, etc.

Logic Components

• Located in src/components
• Examples: Form handlers, state managers, etc.

Development

To contribute or modify the library:

1. Clone the repository
2. Install dependencies:

   npm install

3. Build the library:

   npm run build

License

MIT License. See the LICENSE file for details.