Showkase

screenshot of Showkase

Showkase

🔦 Showkase is an annotation-processor based Android library that helps you organize, discover, search and visualize Jetpack Compose UI elements

Overview:

Showkase is an annotation-processor based Android library that helps developers organize, discover, search, and visualize Jetpack Compose UI elements. With minimal configuration, Showkase generates a UI browser that allows for easy component discovery, color exploration, and typography visualization. The library also renders components in different situations, such as dark mode and right-to-left layouts, to help identify any potential issues early on. Showkase aims to streamline the process of maintaining a design system by providing a searchable and discoverable repository of UI elements.

Features:

  • Simple Setup: Setting up Showkase is straightforward and requires only a few steps.
  • Visualization Support: Showkase supports the visualization of composables, colors, and typography, making it easier to preview and fine-tune UI elements.
  • First Class @Preview Support: Showkase seamlessly integrates with the @Preview annotation in Android Studio, allowing for easy inclusion of existing components in the Showkase browser.
  • Permutations Generation: Showkase automatically creates multiple permutations of each composable, including basic examples, dark mode, right-to-left layouts, font scaled, and display scaled.
  • Search Functionality: Showkase provides the ability to search for a specific UI element by name or group.
  • KDoc Support: Showkase includes support for KDoc, allowing developers to add descriptive documentation for components within the Showkase browser.
  • Multi-Module Support: Showkase enables showcasing UI elements across multiple modules.
  • Customizable Component Constraints: Showkase allows for constraining a component with a custom height/width using additional parameters in the annotation.
  • Descriptive Error Messages: The library provides descriptive error messages to help developers troubleshoot any setup issues.
  • Incremental Annotation Processor: Showkase's incremental annotation processor improves code-generation performance.

Installation:

To install Showkase, follow these steps:

Step 1: Add the following dependency to your module's build.gradle file:

implementation 'com.github.airbnb.android:showkase:x.x.x'

Note: If you have a multi-module setup, make sure to add this dependency to all modules that have UI elements to be displayed in the Showkase browser.

Step 2: (optional) Uncomment the following line in your module's build.gradle file if you prefer to use ksp instead of kapt:

kapt 'com.github.airbnb.android:showkase-processor:x.x.x'

That's it! You can now start using Showkase in your project.

Summary:

Showkase is an Android library that simplifies the organization, discovery, and visualization of Jetpack Compose UI elements. It eliminates the need for manual maintenance of a UI preview/browser app by generating a UI browser with minimal configuration. Showkase enables easy component discovery, color exploration, and typography visualization, and supports search functionality to easily locate UI elements. With features like @Preview support, permutations generation, custom component constraints, and KDoc support, Showkase aims to improve the development process and enhance consistency in UI design. The library provides simple installation steps and descriptive error messages to ensure a smooth integration into projects.

ui-kit
UI Kits & Components

A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.