Accordion

Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Property API

Please see the official React Bootstrap documentation for a full list of options.

import { Accordion } from 'react-bootstrap';

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.


Property API

Please see the official React Bootstrap documentation for a full list of options.

import { Alert } from 'react-bootstrap';

Autosize

Drop-in replacement for the textarea component which automatically resizes textarea as content changes.


Property API

Please see the official plugin documentation for the detailed props API.

import TextareaAutosize from 'react-textarea-autosize';

Avatars Dashkit only

Create and group avatars of different sizes and shapes with a single component.

Sizing

Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.

Dianna Smiley
Dianna Smiley
Dianna Smiley
Dianna Smiley
Dianna Smiley
Dianna Smiley

Status Indicator

Add an online or offline status indicator to show user's availability.

Dianna Smiley
Dianna Smiley
Dianna Smiley
Dianna Smiley
Dianna Smiley
Dianna Smiley

Shape

Change the shape of an avatar with the default Bootstrap image classes.

Dianna Smiley
Dianna Smiley
Dianna Smiley
Dianna Smiley
Dianna Smiley
Dianna Smiley

Shape

Change the shape of an avatar with the default Bootstrap image classes.

Launchday
Launchday
Launchday
Launchday

Initials

You won't always have an image for every user, so easily use initials instead.

CF
CF
CF
CF
CF
CF

Groups

Easily group avatars of any size, shape and content with a single component. Each avatar can also use an <a> to link to the corresponding profile.

Dianna Smiley
Dianna Smiley
Dianna Smiley
CF
Dianna Smiley
Dianna Smiley
Dianna Smiley
CF
Dianna Smiley
Dianna Smiley
Dianna Smiley
CF

Property API

Below you can find the detailed props API for the Avatar, Avatar.Image, Avatar.Title, and Avatar.Group components.

import { Avatar } from '../components'; // Avatar
PropertyValue
asdiv | tag
ratioundefined | "4by3"
sizeundefined | "xs" | "sm" | "lg" | "xl" | "xxl"
statusundefined | "online" | "offline"
import { Avatar } from '../components'; // Avatar.Group
PropertyValue
asdiv | tag
import { Avatar } from '../components'; // Avatar.Image
PropertyValue
asimg | tag
import { Avatar } from '../components'; // Avatar.Title
PropertyValue
asdiv | tag

Badges

A small count and labeling component.

Primary Secondary Success Danger Warning Info Light Dark Primary Secondary Success Danger Warning Info Light Dark

Soft Dashkit only

Creates a soft variant of a corresponding contextual badge variation. These can be used exactly like Bootstrap's core badges, including modifying classes like .rounded-pill, as an <a> itself, or inside of <button> or <a> elements.

Primary Secondary Success Info Warning Danger

Property API

Please see the official React Bootstrap documentation for the detailed props API.

import { Badge } from 'react-bootstrap';

Button group

Group a series of buttons together on a single line with the button group, and super-power them with JavaScript.


Property API

Please see the official React Bootstrap documentation for the detailed props API.

import { ButtonGroup, ButtonToolbar } from 'react-bootstrap';

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.


White Dashkit only

Creates a white variation of a button since Bootstrap's native "light" variant doesn't work well over light backgrounds.


Rounded circle Dashkit only

Useful for single character or emoji buttons, you can turn any button into a circle using the .btn-rounded-circle modifier.


Icon Dashkit only

A combination of the standard button component and a feather icon.


Property API

Please see the official React Bootstrap documentation for the detailed props API.

import { Button, ToggleButton, ToggleButtonGroup } from 'react-bootstrap';

Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.


Card header Dashkit only

Easily create a card header of a fixed height and populate it with text, buttons, or a navigation.

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugiat dolorem, expedita rem. Quis natus officiis asperiores rem ipsum, dolore cumque voluptatum iste vel alias, recusandae culpa hic pariatur quos.


Card header navigation Dashkit only

Use the default Bootstrap grid and the Card.Nav component to easily add a perfectly aligned navigation inside a card header.

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugiat dolorem, expedita rem. Quis natus officiis asperiores rem ipsum, dolore cumque voluptatum iste vel alias, recusandae culpa hic pariatur quos.


Inactive Dashkit only

Merge your card into a background with the .card-inactive modifier.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis fugiat dolorem, expedita rem. Quis natus officiis asperiores rem ipsum, dolore cumque voluptatum iste vel alias, recusandae culpa hic pariatur quos.


Fill Dashkit only New

Make a card fill the whole available space to fit the height of a neighboring card with a .card-fill modifier.

Traffic Channels

Direct
Organic
Referral
Weekly Sales
$24,500+3.5%
Orders Placed
763.5
Conversion Rate
84.5%
Avg. Value
$85.5
<Card className="card-fill">
  <Card.Body>...</Card.Body>
</Card>

<Card className="card-fill-sm">
  <Card.Body>...</Card.Body>
</Card>

<Card className="card-fill-md">
  <Card.Body>...</Card.Body>
</Card>

<Card className="card-fill-lg">
  <Card.Body>...</Card.Body>
</Card>

<Card className="card-fill-xl">
  <Card.Body>...</Card.Body>
</Card>

Adjust Dashkit onlyNew

Make a card vertically shrink (with a scrollbar) to match the height of its neighboring card with a .card-adjust modifier.

Recent Activity

View all
Launchday 1.4.0 update email sent

Sent to all 1,851 subscribers over a 24 hour period.

2m ago
New project "Goodkit" created

Looks like there might be a new theme soon.

2h ago
Dashkit 1.5.0 was deployed

A successful to deploy to production was executed.

2m ago
"Update Dependencies" branch was created

This branch was created off of the "master" branch.

2m ago

Scratchpad Checklist

23 Archived
<div className="card-adjust">
  <Card>...</Card>
</div>

<div className="card-adjust-sm">
  <Card>...</Card>
</div>

<div className="card-adjust-md">
  <Card>...</Card>
</div>

<div className="card-adjust-lg">
  <Card>...</Card>
</div>

<div className="card-adjust-xl">
  <Card>...</Card>
</div>

Property API

Please see the official React Bootstrap documentation for the detailed props API.

import { Card, CardGroup } from 'react-bootstrap';

Charts Dashkit only Plugin

Create beautiful charts with a simple, but powerful and flexible JavaScript Chart.js plugin.

Line

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.


Bar

A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.


Doughnut

Excellent at showing the relational proportions between data.

Direct
Organic
Referral

Sparkline

A simple little line chart with disabled interactions.


Toggle chart data

Easily toggle hidden datasets with useState hook.

Conversions

Last year comparision:
export default function AnalyticsConversions({ ...props }{
  const [hidden, setHidden] = useState(true);

  const labels = [
    'Oct 1',
    'Oct 2',
    'Oct 3',
    'Oct 4',
    'Oct 5',
    'Oct 6',
    'Oct 7',
    'Oct 8',
    'Oct 9',
    'Oct 10',
    'Oct 11',
    'Oct 12',
  ];

  const datasets = [
    {
      label: '2020',
      data: [25, 20, 30, 22, 17, 10, 18, 26, 28, 26, 20, 32],
    },
    {
      label: '2019',
      data: [15, 10, 20, 12, 7, 0, 8, 16, 18, 16, 10, 22],
      backgroundColor: '#d2ddec',
      hidden: hidden,
    },
  ];

  const options = {
    scales: {
      y: {
        ticks: {
          callback: function (val) {
            return val + '%';
          },
        },
      },
    },
  };

  return (
    <Card {...props}>
      <Card.Header>
        <h4 className="card-header-title">Conversions</h4>
        <span className="text-muted me-3">Last year comparision:</span>
        <Form.Check type="switch" id="cardToggle" onChange={(e) => setHidden(e.target.checked ? false : true)} />
      </Card.Header>
      <Card.Body>
        <Chart>
          <Bar data={{ labels: labels, datasets: datasets }} options={options} />
        </Chart>
      </Card.Body>
    </Card>
  );
}
export default function AnalyticsConversions({ ...props }{
  const [hidden, setHidden] = useState(true);

  const labels = [
    'Oct 1',
    'Oct 2',
    'Oct 3',
    'Oct 4',
    'Oct 5',
    'Oct 6',
    'Oct 7',
    'Oct 8',
    'Oct 9',
    'Oct 10',
    'Oct 11',
    'Oct 12',
  ];

  const datasets = [
    {
      label: '2020',
      data: [25, 20, 30, 22, 17, 10, 18, 26, 28, 26, 20, 32],
    },
    {
      label: '2019',
      data: [15, 10, 20, 12, 7, 0, 8, 16, 18, 16, 10, 22],
      backgroundColor: '#d2ddec',
      hidden: hidden,
    },
  ];

  const options = {
    scales: {
      y: {
        ticks: {
          callback: function (val) {
            return val + '%';
          },
        },
      },
    },
  };

  return (
    <Card {...props}>
      <Card.Header>
        <h4 className="card-header-title">Conversions</h4>
        <span className="text-muted me-3">Last year comparision:</span>
        <Form.Check type="switch" id="cardToggle" onChange={(e) => setHidden(e.target.checked ? false : true)} />
      </Card.Header>
      <Card.Body>
        <Chart>
          <Bar data={{ labels: labels, datasets: datasets }} options={options} />
        </Chart>
      </Card.Body>
    </Card>
  );
}

Property API

Below you can find the extended props API for the Chart, ChartLegend, and ChartLegendItem components. Please see the official plugin documentation for the detailed props API.

import { Chart } from '../components/vendor';
PropertyValue
layoutundefined | "appended" | "sparkline"
sizeundefined | "sm"
import { ChartLegend } from '../components/vendor';
import { Bar, Doughnut, Line } from 'react-chartjs-2';

Checklist Dashkit only New

Sortable checklist component powered by react-beautiful-dnd.


Property API

Below you can find the detailed props API for the CheckList, and Checklist.Item components.

import { Checklist } from '../components'; // Checklist
PropertyValue
asdiv | tag
import { Checklist } from '../components'; // Checklist.Item
PropertyValue
asdiv | tag

Forms

Dashkit React supports all of Bootstrap's default form styling in addition to a handful of new input types and features.


Floating labels

Enable floating labels with Bootstrap’s textual form fields.


Switch

Replaces a standard checkbox input with a toggle switch.


Validation

Indicate invalid and valid form fields with isValid and isInvalid properties.

Looks good!
Looks good!
Please provide a valid city.
Please provide a valid state.
You must agree before submitting.

Rounded Dashkit only

Round form control corners with the .form-control-rounded modifier.


Flush Dashkit only

Remove vertical padding and borders from a form control with the .form-control-flush modifier.


Auto Dashkit only

Remove vertical padding and set form control's height to auto with the .form-control-auto modifier.


Input group merge Dashkit only

A slightly modified version of the default input groups that always keeps icons as a part of the form control.


Property API

Please see the official React Bootstrap documentation for the detailed props API.

import { FloatingLabel, Form, InputGroup } from 'react-bootstrap';

Date picker Dashkit only Plugin

A simple yet powerful datepicker powered by the react-flatpickr.


Property API

Please see the official plugin documentation for the detailed props API.

import { Flatpickr } from '../components/vendor';

Input masking Dashkit only Plugin

Mask your form controls depending on the context with the react-number-format plugin.


Property API

Please see the official plugin documentation for the detailed props API.

import NumberFormat from 'react-number-format';

Rich text editor Dashkit only Plugin

Powerful WYSIWYG text editor powered by ReactQuill.


Property API

Please see the official plugin documentation for the detailed props API.

import { Quill } from '../components/vendor';

Drag and drop Dashkit only Plugin

Drag and drop file uploads with image previews powered by react-dropzone.


Property API

Please see the official plugin documentation for the detailed props API.

import { Dropzone } from '../components/vendor';

Select Dashkit only Plugin

A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support.


Property API

Please see the official plugin documentation for the detailed props API.

import { Select } from '../components/vendor';

Icons Dashkit only

Simply beautiful icons powered by the Feather Icon React.


Property API

Please see the official plugin documentation for the detailed props API.

import FeatherIcon from 'feather-icons-react';

Kanban Dashkit only

Kanban board powered by react-beautiful-dnd.

Create the release notes for the new pages so customers are aware.

Jun 9

Ab Hadley

Create the release notes for the new pages so customers are aware.

Jun 9

Ab Hadley

Rows Dashkit only

Vertical variation of the kanban board.

Create the release notes for the new pages so customers are aware.

Jun 9

Ab Hadley
Create the release notes for the new pages so customers are aware.

Jun 9

Ab Hadley

Property API

Below you can find the extended props API for the Kanban.AddForm, Kanban.Category, and Kanban.Item components. Please see the official plugin documentation for the detailed props API.

import { Kanban } from '../components'; // Kanban.AddForm
PropertyValue
asform | tag
import { Kanban } from '../components'; // Kanban.Category
PropertyValue
asdiv | tag
import { Kanban } from '../components'; // Kanban.Item
PropertyValue
asdiv | tag
draggingfalse | true

List group

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Morbi leo risus 1
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Morbi leo risus 1

List group large Dashkit only

Increase the vertical padding of list group items with the list-group-lg modifier.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

List group focus Dashkit only

Changes the color of the .text-focus elements to $primary on ListGroup.Item focus event. Useful for clickable ListGroup.Item elements when navigating with a keyboard.


Timeline/activity Dashkit only New

Turn a list group into a timeline/activity list by adding the .list-group-activity modifier and/or modified avatars.

Notification Timeline

View all
Launchday 1.4.0 update email sent

Sent to all 1,851 subscribers over a 24 hour period

2m ago
Launchday 1.4.0 update email sent

Sent to all 1,851 subscribers over a 24 hour period

2m ago
Launchday 1.4.0 update email sent

Sent to all 1,851 subscribers over a 24 hour period

2m ago

Notification Timeline

View all
Launchday Update email sent to 1,851 subscribers over a 24 hour period for maximum open and reply rates.
2m ago
Launchday Update email sent to 1,851 subscribers over a 24 hour period for maximum open and reply rates.
2m ago
Launchday Update email sent to 1,851 subscribers over a 24 hour period for maximum open and reply rates.
2m ago

Property API

Please see the official React Bootstrap documentation for the detailed props API.

import { ListGroup } from 'react-bootstrap';

React Table Dashkit only

Create searchable, sortable, and filterable lists and tables with the simple but powerful react-table plugin.

Add a member

Miyah Myles

Miyah Myles

Online

Ryu Duke

Ryu Duke

Online

Glen Rouse

Glen Rouse

Busy


Property API

Please see the official plugin documentation for the detailed props API.

import { useGlobalFilter, usePagination, useTable } from 'react-table';

Map Dashkit only

To enable the Mapbox map on your website, you'll need a Mapbox access token. Mapbox uses access tokens to associate API requests with your account. You can create a new access token on your Access Tokens page or programmatically using the Mapbox Tokens API. Once a new access token is created, please replace the original access token at components/vendor/map.js with the new one.


Property API

Please see the official plugin documentation for the detailed props API.

import { Map } from '../components/vendor';

Modals

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.


Property API

Please see the official React Bootstrap documentation for the detailed props API.

import { Modal } from 'react-bootstrap';

Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.


Property API

Please see the official React Bootstrap documentation for the detailed props API.

import { Offcanvas } from 'react-bootstrap';

Page headers Dashkit only

The page header component that can be easily extended with other Bootstrap and Dashkit components.

Basic

The basic page header with a preheading and a heading.

Members

Dianna Smiley


Button

The basic page header extended with a button.

Members

Dianna Smiley


Nav

The basic page header extended with a tabbed navigation.

Members

Dianna Smiley


Button + nav

The basic page header extended with a button and a tabbed navigation.

Members

Dianna Smiley


Avatar + nav

The basic page header extended with an avatar group and a tabbed navigation.

...
Projects

Homepage Redesign

Dianna SmileyAb HadleyAdolfo HessDaniela Dewitt

Cover image

A complex page header variation with an image, avatar and other optional components.

...
Dianna Smiley
Members

Dianna Smiley


Chart

A complex page header variation with a tabbed navigation and a chart.


Property API

Below you can find the detailed props API for the Header, Header.AvatarTop, Header.Body, Header.Footer, Header.ImageTop, Header.Pretitle, Header.Subtitle, Header.Tabs, and Header.Title components.

import { Header } from '../components'; // Header
PropertyValue
asdiv | tag
import { Header } from '../components'; // Header.AvatarTop
import { Header } from '../components'; // Header.Body
PropertyValue
asdiv | tag
import { Header } from '../components'; // Header.Footer
PropertyValue
asdiv | tag
import { Header } from '../components'; // ImageTop
PropertyValue
asimg | tag
import { Header } from '../components'; // Header.Pretitle
PropertyValue
ash6 | tag
import { Header } from '../components'; // Header.Subtitle
PropertyValue
asp | tag
import { Header } from '../components'; // Header.Tabs
import { Header } from '../components'; // Header.Title
PropertyValue
ash1 | tag

Placeholders

Use loading placeholders for your components or pages to indicate something may still be loading.


Property API

Please see the official React Bootstrap documentation for the detailed props API.

import { Placeholder } from 'react-bootstrap';

Popovers


Property API

Please see the official React Bootstrap documentation for the detailed props API.

import { Popover } from 'react-bootstrap';

Progress


Small Dashkit only

The progress bar component with its bar height decreased.


Property API

Please see the official React Bootstrap documentation for the detailed props API.

import { ProgressBar } from 'react-bootstrap';

Spinners

Indicate the loading state of a component or page with Bootstrap spinners.


Card

Use spinners within cards to indicate its content is currently loading.


Property API

Please see the official React Bootstrap documentation for the detailed props API.

import { Spinner } from 'react-bootstrap';

Tables

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

No wrap Dashkit only

Prevents table cell content from wrapping to another line.

#FirstLastHandleDecription
1MarkOtto@mdoLorem ipsum dolor sit amet, consectetur adipisicing elit.
2JacobThornton@fatLorem ipsum dolor sit amet, consectetur adipisicing elit.
3Larrythe Bird@twitterLorem ipsum dolor sit amet, consectetur adipisicing elit.

Property API

Please see the official React Bootstrap documentation for the detailed props API.

import { Table } from 'react-bootstrap';

Sorting Dashkit only Plugin

Create searchable, sortable, and filterable lists and tables with the simple but powerful react-table plugin.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Property API

Please see the official plugin documentation for the detailed props API.

import { useGlobalFilter, usePagination, useTable } from 'react-table';

Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.


Property API

Please see the official React Bootstrap documentation for the detailed props API.

import { Toast } from 'react-bootstrap';

Tooltips


Property API

Please see the official React Bootstrap documentation for the detailed props API.

import { Tooltip } from 'react-bootstrap';

Typography

Dashkit makes use of the Cerebri Sans webfont for both headings and body content.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.

Link example

Utilities

Please visit the official Bootstrap documentation for a full list of utilities. Additionally, the following utilities have been added:

Backgrounds Dashkit Only

  • .bg-fixed-bottom to fix the background image at the bottom of the .main container at the feed page.
  • .bg-cover to set the background-image size of an element to cover.
  • .bg-vibrant to apply a background image with a vibrant gradient for the sidebar.
  • .bg-lighter to set the backgroud color to the value of the $lighter SCSS variable.
<div className="bg-fixed-bottom" style="background-image: url(...);">
  ...
</div>

<div className="bg-cover" style="background-image: url(...);">
  ...
</div>

<Navbar
  color="dark"
  expand="md"
  orientation="vertical"
  className="bg-vibrant"
>
  ...
</Navbar>

<div className="bg-lighter">...</div>

Sizing Dashkit Only

  • .vw-100 to change the width of an element to 100vw.
  • .vh-100 to change the height of an element to 100vh.
<div className="vw-100 vh-100">...</div>

Borders Dashkit Only

  • .border-2(3, 4, 5), .border-top-2(3, 4, 5), .border-end-2(3, 4, 5), .border-bottom-2(3, 4, 5), .border-start-2(3, 4, 5) to increase the width of a border.
<div className="border border-2 border-white">...</div>

Lift Dashkit Only

  • .lift(-lg) to visually lift an element on hover and focus.
<Button color="white" className="lift">
  Hover to lift
</Button>

<Button color="white" className="lift lift-lg">
  Hover to lift
</Button>

Type Dashkit Only

  • .text-decoration-underline to set the text decoration property to underline.
<a className="text-decoration-underline" href="#!">...</a>