Skip to content

Sushi UI

Sushi UI is a comprehensive design system for Jetpack Compose that provides a rich set of customizable components for building beautiful, consistent, and accessible user interfaces.

Overview

Sushi UI offers a collection of ready-to-use components that follow a consistent design language while providing extensive customization options. The library is built on top of Jetpack Compose and is designed to make UI development faster, more consistent, and more enjoyable.

Key Features

Comprehensive Component Library

Sushi UI includes a wide range of components from basic atoms like buttons, text fields, and cards to complex components like bottom sheets, dialogs, and navigation components. Each component is carefully designed to provide a consistent look and feel while offering extensive customization options.

Consistent Props-Based API

All components follow a consistent API pattern using Props objects that make customization intuitive and easy to understand. This approach ensures that components are used consistently throughout your application and reduces the learning curve for developers.

Theming System

Sushi UI provides a robust theming system that allows you to customize the look and feel of all components with minimal effort. The theming system includes:

  • Color schemes with light and dark variants
  • Typography scales
  • Dimension systems
  • Shape definitions

Accessibility Built-In

Accessibility features are built into every component, ensuring that your applications are usable by everyone, including people with disabilities. Components follow WCAG guidelines and support TalkBack on Android.

Markdown Support

Many text components in Sushi UI support markdown formatting, allowing you to easily add rich text formatting to your UI.

Getting Started

The best way to get started with Sushi UI is to explore the component documentation and examples. Check out the Button component to see how Sushi UI components work.

Component Categories

Sushi UI components are organized into the following categories:

Atoms and Components

Building blocks that form the foundation of the design system:

  • SushiText: Text component with styling options, decorations, prefix/suffix icons, expandable support, etc.
  • SushiIcon: Component that displays an icon from the Sushi design system.
  • SushiButton: Button component that supports different visual styles, sizes, and content configurations.
  • SushiImage: Component that displays images in the Sushi design system.
  • SushiCheckBox:Checkbox component for the Sushi design system.
  • SushiRadioButton: Radio button component for the Sushi design system.
  • SushiSwitch: Toggle switch component for the Sushi design system.
  • SushiTag: Tag component for the Sushi design system.
  • SushiTextField: Text input field component for the Sushi design system.
  • SushiAnimation: Component for displaying animations in the Sushi design system, supports Lottie animations and different playback behaviors.
  • SushiLoader: Component that displays an animated loading indicator with two concentric rotating arcs.
  • SushiCard: Card component for the Sushi design system.
  • SushiIndicator: Component to display page indicators for carousel, pager components, etc.
  • SushiDivider: Component that displays a divider with various customizable styles.
  • SushiShimmer: Component that displays a shimmer loading effect over placeholder content.
  • SushiSnackbar: Component that displays a snackbar message with an optional action.
  • SushiBottomSheet: Customizable bottom sheet component for the Sushi design system.
  • SushiDialog: Customizable alert dialog component for the Sushi design system.
  • SushiDropDown: Dropdown menu component with support for checkbox and radio based selections.
  • SushiMedia: Unified media component for the Sushi design system that can display different types of media.
  • SushiOTPInput: Customizable OTP (One-Time Password) input field component.
  • SushiHorizontalPager: Component that allow users to swipe between pages of content horizontally.
  • SushiVerticalPager: Component that allow users to swipe between pages of content vertically.
  • SushiRatingBar: Rating bar component for the Sushi design system.
  • SushiTooltip: Customizable tooltip component for the Sushi design system.
  • SushiViewFlipper: Component that automatically cycles through multiple content items with animated transitions.

Design Principles

Sushi UI is built with the following principles in mind:

  1. Consistency: All components follow the same design language and API patterns
  2. Customization: Every aspect of the components can be customized to fit your needs
  3. Accessibility: Components are designed to be usable by everyone
  4. Performance: Components are optimized for performance and minimal recompositions
  5. Developer Experience: APIs are intuitive and easy to use

Contributing

Sushi UI is an open-source project, and contributions are welcome. Please check the GitHub repository for more information on how to contribute.