Components

An overview of all Saas UI core components.

Saas UI comes with 60+ React components built with Chakra UI and are designed to help you build intuitive React apps with speed.

  • Authentication

    Illustration of AuthProvider componentIllustration of AuthProvider component in dark mode

    AuthProvider

    Illustration of Auth componentIllustration of Auth component in dark mode

    Auth

  • Layout

    Illustration of AppShell componentIllustration of AppShell component in dark mode

    App Shell

    Illustration of Navbar componentIllustration of Navbar component in dark mode

    Navbar

    Illustration of Sidebar componentIllustration of Sidebar component in dark mode

    Sidebar

    Illustration of Page componentIllustration of Page component in dark mode

    Page

    Illustration of SplitPage componentIllustration of SplitPage component in dark mode

    SplitPage

    Illustration of SettingSections componentIllustration of SettingSections component in dark mode

    Section

    Illustration of Toolbar componentIllustration of Toolbar component in dark mode

    Toolbar

  • Illustration of CommandBar componentIllustration of CommandBar component in dark mode

    CommandBar

    Illustration of Hotkeys componentIllustration of Hotkeys component in dark mode

    Hotkeys

    Illustration of Stepper componentIllustration of Stepper component in dark mode

    Stepper

    Illustration of ToggleButton componentIllustration of ToggleButton component in dark mode

    ToggleButton

  • Forms

    Illustration of Form componentIllustration of Form component in dark mode

    Form

    Illustration of StepForm componentIllustration of StepForm component in dark mode

    StepForm

    Illustration of FormLayout componentIllustration of FormLayout component in dark mode

    FormLayout

    Illustration of Form componentIllustration of Form component in dark mode

    AutoForm

    Illustration of Field componentIllustration of Field component in dark mode

    Field

    Illustration of ArrayField componentIllustration of ArrayField component in dark mode

    ArrayField

    Illustration of ObjectField componentIllustration of ObjectField component in dark mode

    ObjectField

    Illustration of Select componentIllustration of Select component in dark mode

    Select

    Illustration of PasswordInput componentIllustration of PasswordInput component in dark mode

    PasswordInput

    Illustration of SearchInput componentIllustration of SearchInput component in dark mode

    SearchInput

    Illustration of FileUpload componentIllustration of FileUpload component in dark mode

    FileUpload

  • Date & Time

    Illustration of DatePicker componentIllustration of DatePicker component in dark mode

    DatePicker

    Illustration of DateRangePicker componentIllustration of DateRangePicker component in dark mode

    DateRangePicker

    Illustration of DateInput componentIllustration of DateInput component in dark mode

    DateInput

    Illustration of DateRangeInput componentIllustration of DateRangeInput component in dark mode

    DateRangeInput

    Illustration of DatePickerStatic componentIllustration of DatePickerStatic component in dark mode

    DatePickerStatic

    Illustration of DatePickerModal componentIllustration of DatePickerModal component in dark mode

    DatePickerModal

  • Data Display

    Illustration of Command componentIllustration of Command component in dark mode

    Command

    Illustration of DataTable componentIllustration of DataTable component in dark mode

    DataTable

    Illustration of EmptyState componentIllustration of EmptyState component in dark mode

    EmptyState

    Illustration of IconBadge componentIllustration of IconBadge component in dark mode

    IconBadge

    Illustration of Property componentIllustration of Property component in dark mode

    Property

    Illustration of Persona componentIllustration of Persona component in dark mode

    Persona

    Illustration of StructuredList componentIllustration of StructuredList component in dark mode

    StructuredList

    Illustration of Timeline componentIllustration of Timeline component in dark mode

    Timeline

  • Advanced Data

    Illustration of DataGrid componentIllustration of DataGrid component in dark mode

    DataGrid

    Illustration of BulkActions componentIllustration of BulkActions component in dark mode

    BulkActions

    Illustration of Filters componentIllustration of Filters component in dark mode

    Filters

    Illustration of Kanban componentIllustration of Kanban component in dark mode

    Kanban

  • Visualization

    Illustration of AreaChart componentIllustration of AreaChart component in dark mode

    AreaChart

    Illustration of BarChart componentIllustration of BarChart component in dark mode

    BarChart

    Illustration of LineChart componentIllustration of LineChart component in dark mode

    LineChart

    Illustration of Sparkline componentIllustration of Sparkline component in dark mode

    Sparkline

  • Feedback

    Illustration of Banner componentIllustration of Banner component in dark mode

    Banner

    Illustration of NProgress componentIllustration of NProgress component in dark mode

    NProgress

    Illustration of Snackbar componentIllustration of Snackbar component in dark mode

    Snackbar

    Illustration of LoadingOverlay componentIllustration of LoadingOverlay component in dark mode

    LoadingOverlay

  • Overlay

    Illustration of ContextMenu componentIllustration of ContextMenu component in dark mode

    ContextMenu

    Illustration of ModalsManager componentIllustration of ModalsManager component in dark mode

    Modals manager

    Illustration of FormDialog componentIllustration of FormDialog component in dark mode

    FormDialog

  • Engagement

    Illustration of Beacon componentIllustration of Beacon component in dark mode

    Beacon

    Illustration of BenefitsModal componentIllustration of BenefitsModal component in dark mode

    Benefits Modal

    Illustration of Tour componentIllustration of Tour component in dark mode

    Tour

  • Web3

    Illustration of Web3Address componentIllustration of Web3Address component in dark mode

    Web3Address

  • Utilities

    Illustration of ErrorBoundary componentIllustration of ErrorBoundary component in dark mode

    ErrorBoundary

    Illustration of FeatureFlags componentIllustration of FeatureFlags component in dark mode

    Feature Flags

    Illustration of ResizeBox componentIllustration of ResizeBox component in dark mode

    ResizeBox

Was this helpful?