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

    Auth

  • Layout

    App Shell

    Navbar

    Sidebar

    Contacts

    Page

    Inbox

    Hello

    SplitPage

    Settings

    Manage your settings

    Section

    Toolbar

  • CMDK

    CommandBar

    useHotkeys('G then D')

    Hotkeys

    1

    Information

    2

    Account

    Stepper

    ToggleButton

  • Web3

    0x71C7...976F

    Web3Address

  • Forms

    Form

    1

    Information

    2

    Account

    StepForm

    FormLayout

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

    AutoForm

    Please enter a name

    Field

    ArrayField

    <Field name="author.name" />

    ObjectField

    Select

    PasswordInput

    SearchInput

    Drop your files here or select files

    FileUpload

  • Date & Time

    DatePicker

    DateRangePicker

    DateInput

    DateRangeInput

    DatePickerStatic

    DatePickerModal

  • Data Display

    GthenD

    Command

    Name
    Elliot Alderson
    Mr Robot

    DataTable

    No results

    No results found for "ui"

    EmptyState

    IconBadge

    Name
    Michael Scott
    Role
    CTO

    Property

    Renata AlinkFounderOut for lunch

    Persona

    • Love your product.

      Renata - We just launched our first product build with Saas UI.

    StructuredList

    • New signup

    • Account upgraded

    Timeline

  • Advanced Data

    Name
    Elliot Alderson
    Mr Robot

    DataGrid

    3 items selected

    BulkActions

    Status
    Active

    Filters

    Todo
    Done
    Doing

    Kanban

  • Feedback

    Banner

    NProgress

    Settings saved

    Snackbar

    LoadingOverlay

  • Overlay

    const modals = useModals()

    Modals manager

    Commands

    Assign
    Close

    MenuDialog

    Edit

    FormDialog

    Edit
    Remove

    ResponsiveMenu

  • Engagement

    Beacon

    New feature

    Benefits Modal

    Tour

  • Utilities

    Oops, something went wrong

    ErrorBoundary

    <Has feature="premium" />

    Feature Flags

    ResizeBox

Was this helpful?