Components

All components and hooks provided by React Suite.


Layout

Container
  • <Container>
  • <Header>
  • <Footer>
  • <Content>
  • <Sidebar>
Divider
  • <Divider>
FlexboxGrid
  • <FlexboxGrid>
  • <FlexboxGrid.Item>
Grid
  • <Grid>
  • <Row>
  • <Col>
Stack
  • <Stack>
  • <Stack.Item>
  • <HStack>
  • <VStack>

Buttons

Button
  • <Button>
IconButton
  • <IconButton>
ButtonGroup
  • <ButtonGroup>
  • <ButtonToolbar>

Status

Badge
  • <Badge>
Loader
  • <Loader>
Message
  • <Message>
Notification
  • <Notification>
Progress
  • <Progress.Line>
  • <Progress.Circle>
Placeholder
  • <Placeholder.Graph>
  • <Placeholder.Grid>
  • <Placeholder.Paragraph>
Toaster
  • useToaster

Typography

Heading
  • <Heading>
Supported from version 5.58.0
Highlight
  • <Highlight>
Supported from version 5.61.0
Text
  • <Text>
Supported from version 5.58.0

Overlays

Drawer
  • <Drawer>
  • <Drawer.Header>
  • <Drawer.Body>
  • <Drawer.Footer>
Dropdown
  • <Dropdown>
  • <Dropdown.Item>
  • <Dropdown.Menu>
Modal
  • <Modal>
  • <Modal.Header>
  • <Modal.Body>
  • <Modal.Footer>
Popover
  • <Popover>
Tooltip
  • <Tooltip>
Affix
  • <Affix>
Breadcrumb
  • <Breadcrumb>
  • <Breadcrumb.Item>
Nav
  • <Nav>
  • <Nav.Item>
  • <Nav.Menu>
Navbar
  • <Navbar>
  • <Navbar.Brand>
Sidenav
  • <Sidenav>
  • <Sidenav.Header>
  • <Sidenav.Body>
Steps
  • <Steps>
  • <Steps.Item>
Pagination
  • <Pagination>

Media and icons

Avatar
  • <Avatar>
  • <AvatarGroup>
Icon
  • <Icon>

Form

Form
  • <Form>
  • <Form.Group>
  • <Form.Control>
  • <Form.ControlLabel>
  • <Form.HelpText>
  • <Form.ErrorMessage>
Form Validation
  • <Form>
  • <Form.Control>
  • Schema

Data Entry

AutoComplete
  • <AutoComplete>
Cascader
  • <Cascader>
CascadeTree
  • <CascadeTree>
Supported from version 5.56.0
CheckPicker
  • <CheckPicker>
CheckTreePicker
  • <CheckTreePicker>
CheckTree
  • <CheckTree>
Checkbox
  • <Checkbox>
  • <CheckboxGroup>
Input
  • <Input>
  • <InputGroup>
  • <InputGroup.Button>
  • <InputGroup.Addon>
  • <MaskedInput>
InputNumber
  • <InputNumber>
InputPicker
  • <InputPicker>
InlineEdit
  • <InlineEdit>
Supported from version 5.54.0
MultiCascader
  • <MultiCascader>
MultiCascadeTree
  • <MultiCascadeTree>
Supported from version 5.56.0
Radio
  • <Radio>
  • <RadioGroup>
RadioTile
  • <RadioTile>
  • <RadioTileGroup>
Supported from version 5.35.0
Rate
  • <Rate>
SelectPicker
  • <SelectPicker>
Slider
  • <Slider>
  • <RangeSlider>
TagPicker
  • <TagPicker>
TagInput
  • <TagInput>
Toggle
  • <Toggle>
TreePicker
  • <TreePicker>
Tree
  • <Tree>
Uploader
  • <Uploader>

Date and Time

Calendar
  • <Calendar>
DateInput
  • <DateInput>
Supported from version 5.48.0
DatePicker
  • <DatePicker>
DateRangeInput
  • <DateRangeInput>
Supported from version 5.49.0
DateRangePicker
  • <DateRangePicker>
TimePicker
  • <TimePicker>
Supported from version 5.72.0
TimeRangePicker
  • <TimeRangePicker>
Supported from version 5.72.0

Data Grid

Table
  • <Table>
  • <Table.Column>
  • <Table.ColumnGroup>
  • <Table.HeaderCell>
  • <Table.Cell>

Data Display

Carousel
  • <Carousel>
List
  • <List>
  • <List.Item>
Tag
  • <Tag>
Timeline
  • <Timeline>
  • <Timeline.Item>
Panel
  • <Panel>
  • <PanelGroup>

Disclosure

Accordion
  • <Accordion>
  • <Accordion.Item>
Supported from version 5.52.0
Tabs
  • <Tabs>
  • <Tabs.Tab>
Supported from version 5.53.0
VisuallyHidden
  • <VisuallyHidden>
Supported from version 5.52.0

Utilities

Animation
  • <Animation.Transition>
  • <Animation.Fade>
  • <Animation.Bounce>
  • <Animation.Slide>
  • <Animation.Collapse>
CustomProvider
  • CustomProvider
DOMHelper
  • DOMHelper
Whisper
  • <Whisper>
useMediaQuery
  • useMediaQuery
Unstable 🧪
useBreakpointValue
  • useBreakpointValue
Unstable 🧪
Supported from version 5.63.0

Can't find the component you want? Request to add new components

Vercel banner