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
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 settingsSection
Split content into multiple easily scannable sections.
Toolbar
A container for grouping a set of controls, like buttons, toggles or menus.
Navigation
Web3
Address
Display Web3 addresses in a more readable format.
Forms
Form
Create fully functional React forms with just a few lines of code.
1Information
2Account
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.
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.
DividerDivider
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.
RARenata AlinkFounderOut for lunchPersona
A component that represents a person and their status.
GthenDCommand
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 selectedBulkActions
A set of actions to perform on one or more selected items.
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.
Loading...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
AssignCloseMenuDialog
A list of menu options inside a modal dialog.
Edit
FormDialog
A modal dialog that renders a form.
EditRemoveResponsiveMenu
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?