[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-7490":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":35,"readmeContent":36,"aiSummary":37,"trendingCount":16,"starSnapshotCount":16,"syncStatus":18,"lastSyncTime":38,"discoverSource":39},7490,"Showkase","airbnb\u002FShowkase","airbnb","🔦 Showkase is an annotation-processor based Android library that helps you organize, discover, search and visualize Jetpack Compose UI elements","https:\u002F\u002Fmedium.com\u002Fairbnb-engineering\u002Fintroducing-showkase-a-library-to-organize-discover-and-visualize-your-jetpack-compose-elements-d5c34ef01095",null,"Kotlin",2305,121,29,54,0,1,2,11,4,62.36,"Apache License 2.0",false,"master",true,[27,28,29,30,31,32,33,34],"android","android-library","annotation-processor","design-systems","jetpack-android","jetpack-compose","reusable-components","ui-components","2026-06-12 04:00:33","# Showkase\n![Showkase Version](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FShowkase-1.0.5-brightgreen) ![Compatible with Compose](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCompatible%20with%20Compose-1.6.7-brightgreen)\n\nShowkase is an annotation-processor based Android library that helps you organize, discover, search \nand visualize [Jetpack Compose](https:\u002F\u002Fdeveloper.android.com\u002Fjetpack\u002Fcompose) UI elements. With \nminimal configuration it generates a UI browser that helps you easily find your components, \ncolors & typography. It also renders your components in common situations like dark mode, \nright-to-left layouts, and scaled fonts which help in finding issues early.\n\n\n\u003Cp align=\"center\">\n    \u003Cimg src=\"assets\u002Fshowkase_features.png\">\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n    \u003Cimg src=\"assets\u002Fshowkase_permutations.png\">\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n    \u003Cimg src=\"assets\u002Fshowkase_design_system.png\">\n\u003C\u002Fp>\n\n\u003Ctable align=\"center\" style=\"width:100%\">\n    \u003Ctr>\n        \u003Ctd>\u003Cimg height=\"400\" src=\"assets\u002Fshowkase_demo.gif\">\u003C\u002Ftd>\n        \u003Ctd>\u003Cimg height=\"400\" src=\"assets\u002Fshowkase_design_system.gif\">\u003C\u002Ftd>\n    \u003C\u002Ftr>\n\u003C\u002Ftable>\n \n ## Why should you use Showkase?\n - When using component based UI toolkits (like React, Compose, Flutter, etc), our codebase often \n ends up with hundreds of components that are hard to discover, visualize, search and organize.\n - Showkase eliminates the manual work of maintaining a UI preview\u002Fbrowser app that \n each company is forced to build in order to maintain their design system.\n - Since all the available UI elements are now easily searchable and discoverable, there is better \n reuse of UI elements in your repo. This makes it useful for maintaining consistency across \n your app. The biggest problem for enforcing a design system is discoverability and Showkase \n hopefully solves that problem for your team.\n - It allows you to quickly visualize `@Composable` components, `Color` properties and `TextStyle\n (Typography)` as you are building them. The goal is to improve the turnaround time in creating \n  production-ready UI elements.\n - Showkase aids in catching common UI issues early with the help of auto-generated permutations \n of your components.\n \n ## Features\n  - [Super simple setup](#Installation)\n  - Support for visualizing composables(`@ShowkaseComposable`), colors(`@ShowkaseColor`) & \n  typography(`@ShowkaseTypography`). \n  - First class support for [@Preview](https:\u002F\u002Fdeveloper.android.com\u002Freference\u002Fkotlin\u002Fandroidx\u002Fui\u002Ftooling\u002Fpreview\u002FPreview) \n  annotation. If you are already using `@Preview` for previews in Android Studio, using Showkase \n  is even easier as all those components are included in the Showkase browser.  \n  - Support for top level, class, object & companion object functions and properties to be \n  annotated with the Showkase annotations.\n  - 5 Permutations are auto created for each composable (Basic Example, Dark Mode, RTL, Font \n  Scaled, Display Scaled. Look in the gif above for examples)'. More to be added in the future!\n  - Support for searching a Showkase UI element by name or group.\n  - KDoc support that shows the documentation that you added for a component in the Showkase browser. \n  - Multi-module support for showcasing UI elements across multiple modules.\n  - Support for constraining a component with a custom height\u002Fwidth using additional parameters in \n  the annotation.\n  - Descriptive error messages so that the users of the library can fix any incorrect setup.\n  - Incremental annotation processor that makes the code-gen more performant. \n\n## Installation\n\nUsing Showkase is straightforward and takes just a couple of minutes to get started.\n\n**Step 1**: Add the dependency to your module's `build.gradle` file. If you have a multi-module \nsetup, add this dependency to all the modules with UI elements that should be displayed inside the \nShowkase browser.\n\nShowkase supports both ksp and kapt. By default, it uses kapt as we only recently added ksp support.\n\n\n#### If you want Showkase to be available only in debug builds (Recommended and practical for most use cases)\n\n```kotlin\ndebugImplementation \"com.airbnb.android:showkase:1.0.5\"\nimplementation \"com.airbnb.android:showkase-annotation:1.0.5\"\nkspDebug \"com.airbnb.android:showkase-processor:1.0.5\" or kaptDebug \"com.airbnb.android:showkase-processor:1.0.5\"\n```\n\n#### If you want Showkase to be available in your release builds as well\n```kotlin\nimplementation \"com.airbnb.android:showkase:1.0.5\"\nksp \"com.airbnb.android:showkase-processor:1.0.5\" or kapt \"com.airbnb.android:showkase-processor:1.0.5\"\n\n```\n\n**Step 2**: Add the relevant annotations for every UI element that should be a part of the \nShowkase browser. \n\nFor `@Composable` components, you can either use the `@Preview` annotation that Compose comes with\n or use the `@ShowkaseComposable` annotation: \n\n```kotlin\n@Preview(name = \"Custom name for component\", group = \"Custom group name\")\n@Composable\nfun MyComponent() { ... }\n\n\u002F\u002F or\n\n@ShowkaseComposable(name = \"Name of component\", group = \"Group Name\")\n@Composable\nfun MyComponent() { ... }\n```\n\nFor `Color` properties, you can add the `@ShowkaseColor` annotation to the field:\n\n```kotlin\n@ShowkaseColor(name = \"Primary Color\", group = \"Material Design\")\nval primaryColor = Color(0xFF6200EE)\n```\n\nFor `TextStyle` properties that are useful for typography, you can add the `@ShowkaseTypography` \nannotation to the field:\n\n```kotlin\n@ShowkaseTypography(name = \"Custom name for style\", group = \"Custom group name\")\nval h1 = TextStyle(\n    fontWeight = FontWeight.Light,\n    fontSize = 96.sp,\n    letterSpacing = (-1.5).sp\n)\n```\n\n**Step 3**: Define an implementation of the `ShowkaseRootModule` interface in your **root** module.\n If your setup involves only a single module, add this implementation in that module. Ensure that this \nimplementation is also annotated with the `@ShowkaseRoot` annotation.\n\n```kotlin\n@ShowkaseRoot\nclass MyRootModule: ShowkaseRootModule\n```\n\n**Step 4**: Showkase is now ready for use! Showkase comes with an Activity that you need to start\n for accessing the UI browser. Typically you would start this activity from the debug menu of \n your app but you are free to start this from any place you like! A nice helper extension function \n `getBrowserIntent` is generated for you so you might have to build the app once \n before it's available for use. Just start the intent and that's all you need to do for accessing\n  Showkase! \n\n```kotlin\nstartActivity(Showkase.getBrowserIntent(context))\n```\n\n## Documentation\n\n##### 1. @ShowkaseComposable\nUsed to annotate `@Composable` functions that should be displayed inside the Showkase browser. If\n you are using the `@Preview` annotation with your `@Composable` function already then you don't \n need to use this annotation. Showkase has first class support for `@Preview`. \n\nHere's how you would use it with your @Composable function:\n\n```kotlin\n@ShowkaseComposable(name = \"Name\", group = \"Group\")\n@Composable\nfun MyComposable() {\n    .......\n    .......\n}\n```\nName and group are optional. Look at the [properties section](#showkasecomposable-currently-supports-the-following-properties)\nto understand the behavior when you don't pass any properties.\n\n**Note:** Make sure that you add this annotation to only those functions that meet the following criteria:\n- Functions that don't have any parameters\n- If it does have a parameter, it has to be annotated with `@PreviewParameter` that is provided a `PreviewParameterProvider` implementation.\n- Stacked `@Preview` and `ShowkaseComposable` annotations are only supported with KSP at the moment. This is because of this [issue](https:\u002F\u002Fyoutrack.jetbrains.com\u002Fissue\u002FKT-49682).\n- If you use `@Preview` to generate UI in the Showkase app, you have to make them `internal` or `public` functions. If you would like to have private previews, but skip them in during compilation, you can add `skipPrivatePreview`compiler flag:\n\nIf you use KSP:\n```\nksp {\n arg(\"skipPrivatePreviews\", \"true\")\n}\n```\n\nIf you use KAPT:\n```\nkapt {\n arguments {\n  arg(\"skipPrivatePreviews\", \"true\")\n }\n}\n```\n\n\nThis is identical to how `@Preview` works in Compose as well so Showkase just adheres to the same rules. \n\n```kotlin\n\n\u002F\u002F Consider a simple data class\ndata class Person(\n    val name: String,\n    val age: Int\n)\n\n\u002F\u002F In order to pass a person object as a parameter to our composable function, we will annotate \n\u002F\u002F our parameter with `@PreviewParameter` and pass a `PreviewParameterProvider` implementation.\n@ShowkaseComposable(name = \"Name\", group = \"Group\") or @Preview(name = \"Name\", group = \"Group\")\n@Composable\nfun MyComposable(\n    @PreviewParameter(provider = ParameterProvider::class) person: Person\n) {\n    ...\n}\n\nclass ParameterProvider : PreviewParameterProvider\u003CPerson> {\n    override val values: Sequence\u003CPerson>\n        get() = sequenceOf(\n            Person(\"John\", 12),\n            Person(\"Doe\", 20)\n        )\n\n    override val count: Int\n        get() = super.count\n}\n\n\u002F\u002F Since we return 2 objects through our ParameterProvider, Showkase will create 2 previews \n\u002F\u002F for this single composable function. Each preview will have it's own parameter that's passed \n\u002F\u002F to it - Person(\"John\", 12) for the first preview and Person(\"Doe\", 20) for the second one. \n\u002F\u002F This is an effective way to preview your composables against different sets of data.\n\n```\n\nAlternatively, you could simply wrap your function inside another function that doesn't accept any parameters -\n\n```kotlin\n@Composable\nfun MyComposable(name: String) {\n    .......\n    .......\n}\n```\n\nIn order to make this function compatible with Showkase, you could further wrap this function \ninside a method that doesn't accept parameters in the following way:\n\n```kotlin\n@ShowkaseComposable(name = \"Name\", group = \"Group\")\n@Composable\nfun MyComposablePreview() {\n    MyComposable(\"Name\")\n}\n```\n\n###### Representing component styles in Showkase\n\nThere are usecases where you might have a component that supports multiple styles. Consider the following example where you have a `CustomButton` composable and it supports 3 different sizes - Large\u002FMedium\u002FSmall. You want to be able to document this in Showkase so that your team can visualize what these different styles look like in action. One option would be to treat them as 3 separate components. However this isn't ideal. `ShowkaseComposable` offers two properties that help you represent this information better - `styleName` & `defaultStyle`. Using these properties allow you to describe all the styles offered by a given `Composable` component in an organized manner as they are shown on the same screen in the Showkase browser. \n\nHere's what the usage would actually look like for this example - \n\n```kotlin\n\u002F\u002F Actual component\n@Composable\nfun CustomButton(\n    size: ButtonSize,\n    ...\n)\n\n\u002F\u002F Previews\n@ShowkaseComposable(name = \"CustomButton\", group = \"Buttons\", defaultStyle = true)\n@Composable\nfun Preview_CustomButton_Large() {\n    CustomButton(size = ButtonSize.Large)\n}\n\n@ShowkaseComposable(name = \"CustomButton\", group = \"Buttons\", styleName = \"Medium size\")\n@Composable\nfun Preview_CustomButton_Medium() {\n    CustomButton(size = ButtonSize.Medium)\n}\n\n@ShowkaseComposable(name = \"CustomButton\", group = \"Buttons\", styleName = \"Small size\")\n@Composable\nfun Preview_CustomButton_Small() {\n    CustomButton(size = ButtonSize.Small)\n}\n\n```\n\n\u003Cimg src=\"assets\u002Fshowkase_styles_demo.png\" height=400>\n\n###### @ShowkaseComposable currently supports the following properties:\n\nProperty Name | Description\n------------- | -------------\n\u003Cb>name\u003C\u002Fb>| The name that should be used to describe your `@Composable` function. If you don't pass any value, the name of the composable function is used as the name.\n\u003Cb>group\u003C\u002Fb> | The grouping key that will be used to group it with other `@Composable` functions. This is useful for better organization and discoverability of your components. If you don't pass any value for the group, the name of the class that wraps this function is used as the group name. If the function is a top level function, the composable is added to a \"Default Group\".\n\u003Cb>widthDp\u003C\u002Fb> | The width that your component will be rendered inside the Showkase browser. Use this to restrict the size of your preview inside the Showkase browser.\n\u003Cb>heightDp\u003C\u002Fb> | The height that your component will be rendered inside the Showkase browser. Use this to restrict the size of your preview inside the Showkase browser.\n\u003Cb>skip\u003C\u002Fb> | Setting this to true will skip this composable from rendering in the Showkase browser. A good use case for this would be when you want to have  composable with `@Preview` but want to stop Showkase from picking it up and rendering it in its browser\n\u003Cb>styleName\u003C\u002Fb> | The name of the style that a given composable represents. This is useful for scenarios where a given component has multiple style variants and you want to organize them through Showkase for better discoverability.\n\u003Cb>defaultStyle\u003C\u002Fb> | A boolean value to denote whether the current composable is using its default style (or the only style if the composable doesn't have other style variants) \n\n##### 2. @ShowkaseColor\nUsed to annotate `Color` properties that should be presented inside the Showkase browser. Here's \nhow you would use it with your `Color` fields:\n\n```kotlin\n@ShowkaseColor(name = \"Name\", group = \"Group\")\nval redColor = Color.Red\n\n@ShowkaseColor(\"Primary\", \"Light Colors\")\nval primaryColor = Color(0xFF6200EE)\n```\n\nName and group are optional. Look at the properties section below to understand the behavior when\n you don't pass any properties.\n\n###### @ShowkaseColor currently supports the following properties:\n\nProperty Name | Description\n------------- | -------------\n\u003Cb>name\u003C\u002Fb> | The name that should be used to describe your `Color` fields. If you don't pass any value, the name of the color field is used as the name.\n\u003Cb>group\u003C\u002Fb> | The grouping key that will be used to group it with other `Color` fields. This is useful for better organization and discoverability of your colors. If you don't pass any value for the group, the name of the class that wraps this field is used as the group name. If the field is a top level field, the color is added to a \"Default Group\".\n\n##### 3. @ShowkaseTypography\nUsed to annotate `TextStyle` properties that should be presented inside the Showkase browser. \nHere's how you would use it with your `TextStyle` fields:\n\n```kotlin\n@ShowkaseTypography(name = \"Name\", group = \"Group\")\nval h1 = TextStyle(\n    fontWeight = FontWeight.Light,\n    fontSize = 96.sp,\n    letterSpacing = (-1.5).sp\n)\n```\n\nName and group are optional. Look at the properties section below to understand the behavior when\n you don't pass any properties.\n \n###### @ShowkaseTypography currently supports the following properties:\n\nProperty Name | Description\n------------- | -------------\n\u003Cb>name\u003C\u002Fb> | The name that should be used to describe your `TextStyle` fields. If you don't pass any value, the name of the textStyle field is used as the name.\n\u003Cb>group\u003C\u002Fb> | The grouping key that will be used to group it with other `TextStyle` fields. This is useful for better organization and discoverability of your typography. If you don't pass any value for the group, the name of the class that wraps this field is used as the group name. If the field is a top level field, the textStyle is added to a \"Default Group\".\n\n\n##### 4. @ShowkaseRoot\nUsed to annotate the `ShowkaseRootModule` implementation class. This is needed to let Showkase\nknow more about the module that is going to be the root module for aggregating all the Showkase \nsupported UI elements across all the different modules(if you are using a multi-module project). \nIf you are only using a single module in your project, add it to that module. You are allowed to \nhave only one @ShowkaseRoot per module.\n\n\u003Cp>\nHere's an example of how you would use it:\n\n```kotlin\n@ShowkaseRoot\nclass MyRootModule: ShowkaseRootModule\n```\n\nNote: The root module is the main module of your app that has a dependency on all other modules \nin the app. This is relevant because we generate the Showkase related classes in the package of \nthe root module and we need to be able to access the UI elements across all the sub modules. This\n is only possible from the root module as it typically has a dependency on all the sub-modules. \n \n##### 5. `Showkase` Object\nThe `Showkase` object is the receiver for all the helper methods that this library generates. \nCurrently there are a few extension functions that are generated with the `Showkase` object as the \nreceiver. In order to get access to these functions, you need to build the app once so that the \nmethods can be generated for your use.\n\nExtension function | Description\n------------- | -------------\ngetBrowserIntent | Helper function that return an intent to start the ShowkaseBrowser activity.\ngetMetadata | Helper function that's give's you access to Showkase metadata. This contains data about all the composables, colors and typography in your codebase that's rendered in the Showkase Browser.\n\n```kotlin\n\n\u002F\u002F Example Usage\n\nval intent = Showkase.getBrowserIntent(context)\nstartActivity(intent)\n\nval metadata = Showkase.getMetadata()\nval components = metadata.componentList\nval colors= metadata.colorList\nval typography = metadata.typographyList\n\n```\n\n##### 6. Custom\u002FMultipreview Annotations\nYou can use custom preview annotations for Showkase as well. Custom preview annotations are annotations that are annotated with preview it self.\nAn example of this can be:\n\n```kt\n@Preview(name = \"Custom Preview One First\", group = \"Custom Previews\")\n@Preview(name = \"Custom Preview One Second\", group = \"Custom Previews\")\nannotation class CustomPreview1\n```\n\n```kt\n@Preview(name = \"Custom Preview One First\", group = \"Custom Previews\")\nannotation class CustomPreview2\n```\n\nthis can be used to annotate a composable function like you would do any other preview function in Compose like this:\n\n```kt\n@CustomPreview1\n@Composable\nfun CustomAnnotationPreview() {\n}\n```\n\nThis can also be combined like this:\n\n```kt\n@Preview(name = \"Custom Preview One First\", group = \"Custom Previews\")\n@Preview(name = \"Custom Preview One Second\", group = \"Custom Previews\")\nannotation class CustomPreviewOne\n\n\n@Preview(name = \"Custom Preview Two First\", group = \"Custom Previews\")\nannotation class CustomPreviewTwo\n\n@CustomPreviewOne\n@CustomPreviewTwo\n@Composable\nfun CustomAnnotationPreviewCombined() {\n}\n```\n\n###### KAPT vs KSP\n\nBecause of [this issue](https:\u002F\u002Fyoutrack.jetbrains.com\u002Fissue\u002FKT-49682\u002FSupport-JVM-IR-in-KAPT-stub-generation) KAPT does not quite support repeatable annotations from Kotlin. This means that  if you have an annotation class like:\n\n```kt\n@Preview(name = \"Shape 100 by 100\", group = \"Shapes\", widthDp = 100, heightDp = 100)\n@Preview(name = \"Shape 150 by 150\", group = \"Shapes\", widthDp = 150, heightDp = 150)\nannotation class CustomShape\n```\n\nThis will be skipped by KAPT, but KSP will pick it up. However, if you have an annotation like:\n\n```kt\n@Preview(name = \"Shape 100 by 100\", group = \"Shapes\", widthDp = 100, heightDp = 100)\nannotation class CustomShape\n```\nIt will be picked up by both KSP and KAPT.\n\n###### Important for KAPT users\n\nYou will need to provide a compiler arg in you module for the custom preview annotations that you are using and expecting to be picked up by Showkase. This can be done with the following code:\n\n```kt\nkapt {\n    arguments {\n        arg(\"multiPreviewType\", \"com.airbnb.android.submodule.showkasesample.LocalePreview\")\n    }\n}\n```\n\nIt is important to remember to use the whole qualified name of the annotation, and not just the name.\n\n## R8 \u002F ProGuard\n\nIf you use Showkase as a dependency in an Android project which uses R8 as a default compiler\nyou don't have to do anything. The specific rules are [already bundled](showkase\u002Fconsumer-rules.pro)\ninto the AAR which can be interpreted by R8 automatically.\n\n## Frequently Asked Questions\n\u003Cdetails>\n  \u003Csummary>Is Airbnb using Jetpack Compose in their main app?\u003C\u002Fsummary>\n  Airbnb has been one of the earliest adopters of Jetpack Compose and has been using it in production since early 2021.\n  Compose is a really critical pillar of our overall Android strategy and we continue to heavily invest in building more\n  tooling on top of it. We \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=23sNq-N06xU\">spoke about our experience\u003C\u002Fa> of using Jetpack Compose \n  at Google I\u002FO 2022.\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n  \u003Csummary>Can I contribute to this library?\u003C\u002Fsummary>\n  Pull requests are welcome! We'd love help improving this library. Feel free to browse through \n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fairbnb\u002FShowkase\u002Fissues\">open issues\u003C\u002Fa> to look for things that need \n  work. If you have a feature request or bug, please open a new issue so we can track it.\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n  \u003Csummary>How do I provide feedback?\u003C\u002Fsummary>\n  The \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fairbnb\u002FShowkase\u002Fissues\">issues\u003C\u002Fa> tab is the best place to do \n  that. \n\u003C\u002Fdetails>\n\n\u003Cdetails>\n  \u003Csummary>\n    Why can't we have a single annotation like `Showkase` for all the UI elements? Why did you \n    create a different annotation for each UI element(@ShowkaseComposable for composables, \n    @ShowkaseColor for colors & @ShowkaseTypography for text styles)?\n  \u003C\u002Fsummary>\n  This was done mostly for future proofing. Even though these annotations have the same \n  properties right now, it's possible that they will diverge as we add more features. Once more \n  people start using this library, we will get a more clear idea about whether that needs to \n  happen or not. If we find that it didn't evolve the way we expected, we will consider \n  consildating these annotations. \n\u003C\u002Fdetails>\n\n\u003Cdetails>\n  \u003Csummary>I would like to customize my component browser. Can this library still be useful?\n  \u003C\u002Fsummary>\n  We provide a nice helper function that gives you access to the metadata of all your UI elements \n  that are configured to work with Showkase. You can use `Showkase.getMetadata()` to get access \n  to it and then use it in whatever way you see fit.\n\u003C\u002Fdetails>\n\n## Coming Soon!\n\nHere are some ideas that we are thinking about. We are also not limited to these and would love \nto learn more about your use cases.\n\n- [x] Support for passing a `@PreviewParameter` parameter to `@Preview`\u002F`@ShowkaseComposable` \ncomponents. (See https:\u002F\u002Fgithub.com\u002Fairbnb\u002FShowkase#1-showkasecomposable)\n- [x] Hooks for screenshot testing. Since all your components are a part of the Showkase browser, \nthis would be a good opportunity to make this a part of your CI and detect diffs in components. (The `getMetadata` method can be useful to accomplish this. More info here - https:\u002F\u002Fgithub.com\u002Fairbnb\u002FShowkase#5-showkase-object) \n- [ ] Support for other UI elements that are a part of your design system (like icons, spacing, etc)\n- [ ] Generating a web version of the Showkase browser with documentation, search and screenshots.\n\n## Contributing\nPull requests are welcome! We'd love help improving this library. Feel free to browse through \nopen issues to look for things that need work. If you have a feature request or bug, please open \na new issue so we can track it.\n\n## License\n\n```\nCopyright 2023 Airbnb, Inc.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http:\u002F\u002Fwww.apache.org\u002Flicenses\u002FLICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","Showkase 是一个基于注解处理器的 Android 库，旨在帮助开发者组织、发现、搜索和可视化 Jetpack Compose UI 元素。其核心功能包括自动生成一个 UI 浏览器，支持对组件、颜色及字体样式进行轻松查找，并自动为每个组件生成多种显示情况（如暗模式、从右到左布局等），以提前发现潜在问题。此外，Showkase 与 `@Preview` 注解无缝集成，使得已经使用该注解进行预览的组件可以直接在 Showkase 中展示。此工具非常适合需要维护复杂设计系统且希望提高 UI 组件复用率及一致性的团队或项目，在开发过程中能够显著提升工作效率并确保视觉一致性。","2026-06-11 03:12:45","top_language"]