THIS WORK UNDER DEVELOPMENT, FEEL FREE TO CONTRIBUTE.

Jaspr UI Component Library: A Powerful Design Toolkit

Jaspr UI delivers an advanced component library engineered for modern web development, seamlessly integrating Tailwind CSS and Daisy UI. Our comprehensive solution offers developers a robust toolkit for creating dynamic digital interfaces.

Key Features

• 50+ Pre-built UI Components
• Organized into 7 Functional Groups
• Full Support for Websites and Web Applications
• Powered by Tailwind CSS and Daisy UI
• Rapid Development Capabilities

Design Philosophy

Meticulously crafted to provide seamless integration, responsive design, and a consistent user experience across digital platforms. Developers can quickly build sophisticated interfaces with minimal effort and maximum efficiency. Core Benefits

• Accelerated Development Workflow
• Consistent Design Language
• Flexible Implementation
• High-Performance UI Elements

Transform your web projects with a comprehensive, ready-to-use component ecosystem designed for modern developers.

Getting Started with Jaspr UI

Implementing Jaspr UI in your project involves a systematic approach that seamlessly integrates powerful UI components into your web application. This guide will walk you through the essential steps of setting up and utilizing Jaspr UI effectively.

Step 1: Dependency Installation

Integrating Jaspr UI begins with adding the library to your project's dependencies. You have two primary methods of installation:

Standard Package Installation

When using the official published package, update your pubspec.yaml with:

dependencies:
  jaspr_ui: ^1.0.0

Git Repository Installation

For developers wanting the latest development version, you can reference the GitHub repository directly:

dependencies:
  jaspr_ui:
    git:
      url: https://github.com/anoochit/jaspr_ui.git
      ref: daisyui # Specify the branch you want to use

Step 2: Stylesheet and Styling Configuration

To ensure your application has the necessary styling, incorporate the required CSS frameworks and stylesheets:

runApp(Document(
  lang: 'en',
  title: 'Your Application',
  head: daisyUiStyles,  // Includes Tailwind CSS and DaisyUI styles
  body: App(),
));

Step 3: Application Component Setup

Configure your main application component to leverage Jaspr UI's routing and theming capabilities:

import 'package:jaspr/jaspr.dart';
import 'package:jaspr_router/jaspr_router.dart';
import 'package:jaspr_ui/jaspr_ui.dart';

import 'pages/home.dart';

class App extends StatelessComponent {
  const App({super.key});

  @override
  Iterable<Component> build(BuildContext context) sync* {
    yield DaisyUI(
      theme: 'dark',  // Choose between light and dark themes
      routes: [
        Route(
          path: '/',
          title: 'Home',
          builder: (context, state) => const Home(),
        )
      ],
    );
  }
}

Step 4: Component Implementation

Demonstrate component usage in your page implementations. Here's an example of integrating a gradient title component:

import 'package:jaspr/jaspr.dart';
import 'package:jaspr_ui/jaspr_ui.dart';

@client
class Home extends StatefulComponent {
  const Home({super.key});

  @override
  State<Home> createState() => HomeState();
}

class HomeState extends State<Home> {
  @override
  Iterable<Component> build(BuildContext context) sync* {
    yield TitleGradient(
      title: 'Welcome to Our Dynamic Web Application',
    );
  }
}

Best Practices and Recommendations

1. Dependency Management: Regularly update your Jaspr UI dependency to access the latest features and bug fixes.

2. Theme Customization: Experiment with different themes to match your application's design language.

3. Responsive Design: Leverage Tailwind CSS's utility classes to create responsive layouts.

4. Performance: Minimize unnecessary component renders and optimize your application's performance.

Troubleshooting

• Ensure all dependencies are correctly installed
• Verify CDN stylesheet loading
• Check browser console for any configuration warnings

By following these steps, you'll be well-equipped to integrate Jaspr UI into your web application, creating dynamic and visually appealing interfaces with ease.