Components

Professionally crafted Chakra UI components that help you build intuitive React apps with speed.

These components go hand in hand with Chakra UI's core components and help you create visual and functional consistency in your apps.

  • Authentication

    const auth = useAuth()

    AuthProvider

    Authentication state management and hooks.

    Auth

    Ready to use authentication forms.

  • Layout

    South Tirol

    Card

    Cards can be used to provide easy scannable information and details.

    App Shell

    The App Shell defines the main structure of your app.

    Sidebar

    Side navigation, commonly used as the primary navigation.

    Contacts

    Page

    Page makes it easy to implement consistent page layouts throughout your app.

    Settings

    Manage your settings

    Section

    Split content into multiple easily scannable sections.

    Toolbar

    A container for grouping a set of controls, like buttons, toggles or menus.

  • useHotkeys('G then D')

    Hotkeys

    Keyboard shortcuts for modern apps

    1

    Information

    2

    Account

    Stepper

    Indicate progress through numbered steps in multi-step workflows.

  • Web3

    Address

    Display Web3 addresses in a more readable format.

  • Forms

    Form

    Create fully functional React forms with just a few lines of code.

    1

    Information

    2

    Account

    StepForm

    Create multi-step React forms with just a few lines of code.

    FormLayout

    Arrange fields in a form with consistant spacing and positioning.

    z.object({
  name: z.string()
})

    AutoForm

    Automatically render forms based on a schema.

    Please enter a name

    Field

    A controlled form field component.

    ArrayField

    Form field component to handle array type values.

    <Field name="author.name" />

    ObjectField

    Form field component to handle object type values.

    Select

    A custom select component.

    PasswordInput

    A password input type component

    SearchInput

    A search input type component.

  • Date & Time

    DatePicker

    Allow users to select a Date and Time value.

    DateRangePicker

    Allow users to select a Date and Time value.

    DateInput

    Allow users to enter or select a Date and Time value.

    DateRangeInput

    Allow users to enter or select a Date and Time range.

    DatePickerStatic

    Allow users to select a Date and Time value.

    DatePickerModal

    Allow users to select a Date and Time value.

  • Data Display

    Name
    Elliot Alderson
    Mr Robot

    DataTable

    A basic data table component that supports sorting and selections.

    Divider

    Dividers are used to visually separate content in a list or group.

    No results

    No results found for "ui"

    EmptyState

    Display actionable feedback when no data is available.

    • Renata - Love your product.

      We just launched our first product build with Saas UI.

    List

    A component used to display collections of data in a consistent manner.

    Name
    Michael Scott
    Role
    CTO

    Property

    A component used to show key/value data in a consistent manner.

    Renata AlinkFounderOut for lunch

    Persona

    A component that represents a person and their status.

    GthenD

    Command

    A command is used to show which key or combination of keys performs a given action.

  • Advanced Data

    Name
    Elliot Alderson
    Mr Robot

    DataGrid

    Data grids are used to organize lists of high density data.

    3 items selected

    BulkActions

    A set of actions to perform on one or more selected items.

    Status
    Active

    Filters

    Intuitive data filtering components.

  • Feedback

    Banner

    Banners are used to communicate accouncements and important information.

    NProgress

    Show feedback when switching pages and content is loading in the background.

    Settings saved

    Snackbar

    The snackbar component is used to give feedback after certain actions.

    Loader

    A loading indicator that fills it's parent.

  • Overlay

    const modals = useModals()

    Modals manager

    Manage different types of modals with a single easy to use hook.

    Commands

    Assign
    Close

    MenuDialog

    A list of menu options inside a modal dialog.

    Edit

    FormDialog

    A modal dialog that renders a form.

    Edit
    Remove

    ResponsiveMenu

    A mobile friendly Menu component.

  • Engagement

    New feature

    Benefits Modal

    A benefits modal is used to show case important features or product updates.

    Tour

    Introduce people to new features using multi-step tours.

  • Utilities

    Oops, something went wrong

    ErrorBoundary

    A container component that catches errors and displays a fallback UI.

    <Has feature="premium" />

    Feature Flags

    Expose features to your users using feature flags.

    ResizeBox

    Utility hook and component to create resizable panels.

Was this helpful?