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';

A simple primary alert—check it out!

A simple secondary alert—check it out!

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Danger Will Robinson! This is a dismissible alert!

Holy guacamole! Notice how the text/UI have high contrast?

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

Property API

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

import { Alert } from 'react-bootstrap';

<Form.Control
  as={TextareaAutosize}
  placeholder="Try typing something..."
/>

Property API

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

import TextareaAutosize from 'react-textarea-autosize';

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.

<Avatar size="xxl">
  <Avatar.Image
    className="rounded-circle"
    src="/img/avatars/profiles/avatar-1.jpg"
    alt="Dianna Smiley"
  />
</Avatar>

<Avatar size="xl">
  <Avatar.Image
    className="rounded-circle"
    src="/img/avatars/profiles/avatar-1.jpg"
    alt="Dianna Smiley"
  />
</Avatar>

<Avatar size="lg">
  <Avatar.Image
    className="rounded-circle"
    src="/img/avatars/profiles/avatar-1.jpg"
    alt="Dianna Smiley"
  />
</Avatar>

<Avatar>
  <Avatar.Image
    className="rounded-circle"
    src="/img/avatars/profiles/avatar-1.jpg"
    alt="Dianna Smiley"
  />
</Avatar>

<Avatar size="sm">
  <Avatar.Image
    className="rounded-circle"
    src="/img/avatars/profiles/avatar-1.jpg"
    alt="Dianna Smiley"
  />
</Avatar>

<Avatar size="xs">
  <Avatar.Image
    className="rounded-circle"
    src="/img/avatars/profiles/avatar-1.jpg"
    alt="Dianna Smiley"
  />
</Avatar>

Status Indicator

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

<Avatar status="offline">
  <Avatar.Image
    className="rounded-circle"
    src="/img/avatars/profiles/avatar-1.jpg"
    alt="Dianna Smiley"
  />
</Avatar>

<Avatar status="online">
  <Avatar.Image
    className="rounded-circle"
    src="/img/avatars/profiles/avatar-1.jpg"
    alt="Dianna Smiley"
  />
</Avatar>

Shape

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

<Avatar>
  <Avatar.Image
    className="rounded"
    src="/img/avatars/profiles/avatar-1.jpg"
    alt="Dianna Smiley"
  />
</Avatar>

<Avatar>
  <Avatar.Image
    className="rounded-circle"
    src="/img/avatars/profiles/avatar-1.jpg"
    alt="Dianna Smiley"
  />
</Avatar>

Shape

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

<Avatar ratio="4by3">
  <Avatar.Image
    className="rounded"
    src="/img/avatars/projects/project-1.jpg"
    alt="Launchday"
  />
</Avatar>

Initials

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

<Avatar size="xxl">
  <Avatar.Title className="rounded-circle">CF</Avatar.Title>
</Avatar>

<Avatar size="xl">
  <Avatar.Title className="rounded-circle">CF</Avatar.Title>
</Avatar>

<Avatar size="lg">
  <Avatar.Title className="rounded-circle">CF</Avatar.Title>
</Avatar>

<Avatar >
  <Avatar.Title className="rounded-circle">CF</Avatar.Title>
</Avatar>

<Avatar size="sm">
  <Avatar.Title className="rounded-circle">CF</Avatar.Title>
</Avatar>

<Avatar size="xs">
  <Avatar.Title className="rounded-circle">CF</Avatar.Title>
</Avatar>

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.

<Avatar.Group>
  <Avatar>
    <Avatar.Image
      className="rounded-circle"
      src="/img/avatars/profiles/avatar-1.jpg"
      alt="Dianna Smiley"
    />
  </Avatar>
  <Avatar>
    <Avatar.Image
      className="rounded-circle"
      src="/img/avatars/profiles/avatar-1.jpg"
      alt="Dianna Smiley"
    />
  </Avatar>
  <Avatar>
    <Avatar.Image
      className="rounded-circle"
      src="/img/avatars/profiles/avatar-1.jpg"
      alt="Dianna Smiley"
    />
  </Avatar>
  <Avatar>
    <Avatar.Title className="rounded-circle">CF</Avatar.Title>
  </Avatar>
</Avatar.Group>

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

Property	Value
as	`div \| tag`
ratio	`undefined \| "4by3"`
size	`undefined \| "xs" \| "sm" \| "lg" \| "xl" \| "xxl"`
status	`undefined \| "online" \| "offline"`

import { Avatar } from '../components'; // Avatar.Group

Property	Value
as	`div \| tag`

import { Avatar } from '../components'; // Avatar.Image

Property	Value
as	`img \| tag`

import { Avatar } from '../components'; // Avatar.Title

Property	Value
as	`div \| tag`

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

Subtle Dashkit only

Creates a subtle 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

<Badge bg={null} text="bg-primary-subtle">Primary</Badge>
<Badge bg={null} text="bg-secondary-subtle">Secondary</Badge>
<Badge bg={null} text="bg-success-subtle">Success</Badge>
<Badge bg={null} text="bg-info-subtle">Info</Badge>
<Badge bg={null} text="bg-warning-subtle">Warning</Badge>
<Badge bg={null} text="bg-danger-subtle">Danger</Badge>

Property API

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

import { Badge } from 'react-bootstrap';

Property API

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

import { Breadcrumb } from 'react-bootstrap';

Property API

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

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

Active Radio Radio

White Dashkit only

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

<Button variant="white">Button white</Button>

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.

<Button variant="white" className="btn-rounded-circle" size="sm">
  +
</Button>

<Button variant="white" className="btn-rounded-circle">
  +
</Button>

<Button variant="white" className="btn-rounded-circle" size="lg">
  +
</Button>

Icon Dashkit only

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

<Button variant="white">
  <FeatherIcon icon="bookmark" size="1em" />
</Button>

<Button>
  <FeatherIcon icon="bookmark" size="1em" />
</Button>

<Button variant="white" className="btn-rounded-circle">
  <FeatherIcon icon="star" size="1em" />
</Button>

<Button className="btn-rounded-circle">
  <FeatherIcon icon="star" size="1em" />
</Button>

Property API

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

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

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>
  <Card.Header>
    <h4 className="card-header-title">Card title</h4>
  </Card.Header>
</Card>

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

Active

Link

<Card>
  <Card.Header>
    <h4 className="card-header-title">Card title</h4>
    <Nav variant="tabs" className="nav-tabs-sm">
      <Nav.Item>
        <Nav.Link active>Active</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link>Link</Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link>Link</Nav.Link>
      </Nav.Item>
    </Nav>
  </Card.Header>
</Card>

Inactive Dashkit only

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

<Card className="card-inactive">
  <Card.Body>
    <Card.Text>
      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.Text>
  </Card.Body>
</Card>

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

All

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

Delete the old mess in functions files.

Refactor the core social sharing modules.

Create the release notes for the new pages so customers get psyched.

Send Dianna those meeting notes.

Share the documentation for the new unified API.

Clean up the Figma file with all of the avatars, buttons, and other components.

<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';

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.

const labels = [
  'Jan',
  'Feb',
  'Mar',
  'Apr',
  'May',
  'Jun',
  'Jul',
  'Aug',
  'Sep',
  'Oct',
  'Nov',
  'Dec',
];

const dataset = [{
  data: [0, 10, 5, 15, 10, 20, 15, 25, 20, 30, 25, 40],
}];

const options = {
  scales: {
    y: {
      type: 'linear',
      ticks: {
        callback: function (value) {
          return '$' + value + 'k';
        },
      },
    },
  },
};

<Chart>
  <Line
    data={{
      labels: labels,
      datasets: datasets,
    }}
    options={options}
  />
</Chart>

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.

const labels = [
  'Jan',
  'Feb',
  'Mar',
  'Apr',
  'May',
  'Jun',
  'Jul',
  'Aug',
  'Sep',
  'Oct',
  'Nov',
  'Dec',
];

const datasets = [
  {
    data: [25, 20, 30, 22, 17, 10, 18, 26, 28, 26, 20, 32],
  },
];

const options = {
  scales: {
    y: {
      ticks: {
        callback: function (value) {
          return '$' + value + 'k';
        },
      },
    },
  },
};

<Chart>
  <Bar
    data={{
      labels: labels,
      datasets: datasets,
    }}
    options={options}
  />
</Chart>

Doughnut

Excellent at showing the relational proportions between data.

Direct

Organic

Referral

const labels = ['Direct', 'Organic', 'Referral'];

const datasets = [
  {
    data: [60, 25, 15],
    backgroundColor: ['#2C7BE5', '#A6C5F7', '#D2DDEC'],
  },
];

const options = {
  tooltips: {
    callbacks: {
      afterLabel: function () {
        return '%';
      },
    },
  },
};

<Chart>
  <Doughnut
      data={{
        labels: labels,
        datasets: datasets,
      }}
      options={options}
    />
</Chart>

<ChartLegend
  data={{
    labels: labels,
    datasets: datasets,
  }}
/>

Sparkline

A simple little line chart with disabled interactions.

const data = {
  labels: new Array(12).fill('Label'),
  datasets: [
    {
      data: [0, 15, 10, 25, 30, 15, 40, 50, 80, 60, 55, 65],
    },
  ],
};

const options = {
  scales: {
    y: {
      display: false,
    },
    x: {
      display: false,
    },
  },
  elements: {
    line: {
      borderWidth: 2,
      borderColor: '#D2DDEC',
    },
    point: {
      hoverRadius: 0,
    },
  },
  plugins: {
    tooltip: {
      external: () => false,
    },
  },
};

<Chart sparkline>
  <Line data={data} options={options} />
</Chart>

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-body-secondary 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>
  );
}

Sales

All

Direct

Organic

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-body-secondary 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';

Property	Value
layout	`undefined \| "appended" \| "sparkline"`
size	`undefined \| "sm"`

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

import { Bar, Doughnut, Line } from 'react-chartjs-2';

Delete the old mess in functions files.

Refactor the core social sharing modules.

Create the release notes for the new pages so customers get psyched.

Send Dianna those meeting notes.

Share the documentation for the new unified API.

Clean up the Figma file with all of the avatars, buttons, and other components.

export default function Tasks() {
  const [data, setData] = useState([
    {
      id: 'task-1',
      content: 'Delete the old mess in functions files.',
    },
  ]);

  function onDragEnd(result) {
    const newData = [...data];
    const { destination, source } = result;

    if (!destination || destination.index === source.index) {
      return;
    }

    newData.splice(source.index, 1);
    newData.splice(destination.index, 0, data[source.index]);

    setData(newData);
  }

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="tasks">
        {(provided) => (
          <Checklist ref={provided.innerRef} {...provided.droppableProps}>
            {data.map((item, index) => (
              <Draggable draggableId={item.id} key={item.id} index={index}>
                {(provided) => (
                  <Checklist.Item ref={provided.innerRef} {...provided.draggableProps}>
                    <Form.Check type="checkbox" id={item.id}>
                      <Form.Check.Input type="checkbox" className="me-3" />
                      <Form.Check.Label {...provided.dragHandleProps}>{item.content}</Form.Check.Label>
                    </Form.Check>
                  </Checklist.Item>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </Checklist>
        )}
      </Droppable>
    </DragDropContext>
  );
}

Property API

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

import { Checklist } from '../components'; // Checklist

Property	Value
as	`div \| tag`

import { Checklist } from '../components'; // Checklist.Item

Property	Value
as	`div \| tag`

Dropdown ellipsis Dashkit only

Creates a compact dropdown toggler with a Feather icon.

Latest orders

<Dropdown align="end">
  <Dropdown.Toggle as="span" className="dropdown-ellipses" role="button">
    <FeatherIcon icon="more-vertical" size="17" />
  </Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item href="#!">Action</Dropdown.Item>
    <Dropdown.Item href="#!">Another action</Dropdown.Item>
    <Dropdown.Item href="#!">Something else here</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

Dropdown card Dashkit only

Turns the default Bootstrap dropdown menu into a fully functional Card component. The height of the <Card.Body> container will be limited and a scrolling bar will appear once this height is exceeded.

<Dropdown>
  <Dropdown.Toggle>Card dropdown</Dropdown.Toggle>
  <Dropdown.Menu>
    <Card.Body>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae rem autem impedit ad odio,
      enim tempore possimus non minus quod dignissimos ipsum eveniet odit, ratione molestiae, velit a dolorem!
    </Card.Body>
  </Dropdown.Menu>
</Dropdown>

Property API

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

import { Dropdown } from 'react-bootstrap';

Floating labels

Enable floating labels with Bootstrap’s textual form fields.

Email address

Password

Switch

Replaces a standard checkbox input with a toggle switch.

Default switch checkbox input

Validation

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

Rounded Dashkit only

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

<Form.Control className="form-control-rounded" placeholder="Form control rounded" />

Flush Dashkit only

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

<Form.Control className="form-control-flush" placeholder="Form control flush" />

Auto Dashkit only

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

<Form.Control className="form-control-flush form-control-auto" " placeholder="Form control auto" />

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.

<InputGroup className="input-group-merge input-group-reverse mb-3">
  <Form.Control placeholder="Input group reverse" />
  <InputGroup.Text>
    <FeatherIcon icon="eye" size="1em" />
  </InputGroup.Text>
</InputGroup>

<InputGroup className="input-group-merge mb-3">
  <Form.Control placeholder="Input group appended" />
  <InputGroup.Text>
    <FeatherIcon icon="lock" size="1em" />
  </InputGroup.Text>
</InputGroup>

<InputGroup className="input-group-merge input-group-reverse mb-3">
  <Form.Control isValid={true} placeholder="Input group reverse" />
  <InputGroup.Text>
    <FeatherIcon icon="eye" size="1em" />
  </InputGroup.Text>
</InputGroup>

<InputGroup className="input-group-merge">
  <Form.Control isInvalid={true} placeholder="Input group appended" />
  <InputGroup.Text>
    <FeatherIcon icon="lock" size="1em" />
  </InputGroup.Text>
</InputGroup>

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.

<Form.Control as={Flatpickr} placeholder="Flatpickr example" />
<Form.Control as={Flatpickr} options={{ mode: 'range' }} placeholder="Flatpickr range example" />

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.

<Form.Control
  as={NumericFormat}
  placeholder="$0.00"
  prefix="$"
  thousandSeparator
/>

<Form.Control
  as={PatternFormat}
  format="(###)###-####"
  mask="_"
  placeholder="(___)___-____"
/>

<Form.Control
  as={PatternFormat}
  format="##/##/####"
  mask="_"
  placeholder="__/__/____"
/>

Property API

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

import { NumericFormat, PatternFormat } from 'react-number-format';

Rich text editor Dashkit only Plugin

Powerful WYSIWYG text editor powered by ReactQuill.

<Quill />

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.

Drop files here to upload

<Dropzone
  accept="image/*"
  onDrop={(acceptedFiles) => console.log(acceptedFiles)}
/>

<Dropzone
  multiple
  onDrop={(acceptedFiles) => console.log(acceptedFiles)}
/>

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.

<Select
  options={[
    { value: 'a', label: 'My first option' },
    { value: 'b', label: 'Another option' },
    { value: 'c', label: 'Third option is here' },
  ]}
  placeholder={null}
/>

<Select
  options={[
    {
      imgSrc: '/img/avatars/profiles/avatar-1.jpg',
      label: 'Dianna Smiley',
      value: 'Dianna Smiley',
    },
    {
      imgSrc: '/img/avatars/profiles/avatar-2.jpg',
      value: 'Ab Hadley',
      label: 'Ab Hadley',
    },
    {
      imgSrc: '/img/avatars/profiles/avatar-3.jpg',
      value: 'Adolfo Hess',
      label: 'Adolfo Hess',
    },
    {
      imgSrc: '/img/avatars/profiles/avatar-4.jpg',
      value: 'Daniela Dewitt',
      label: 'Daniela Dewitt',
    },
  ]}
  placeholder={null}
/>

<Select
  isMulti
  options={[
    { value: 'a', label: 'CSS' },
    { value: 'b', label: 'HTML' },
    { value: 'c', label: 'JavaScript' },
    { value: 'd', label: 'Bootstrap' },
  ]}
  placeholder={null}
/>

<Select
  isMulti
  options={[
    { value: 'a', label: 'CSS' },
    { value: 'b', label: 'HTML' },
    { value: 'c', label: 'JavaScript' },
    { value: 'd', label: 'Bootstrap' },
  ]}
  placeholder={null}
  size="lg"
/>

<Select
  options={[
    { value: 'a', label: 'My first option' },
    { value: 'b', label: 'Another option' },
    { value: 'c', label: 'Third option is here' },
  ]}
  placeholder={null}
  size="sm"
/>

<Select
  className="is-valid"
  isMulti
  options={[
    { value: 'a', label: 'CSS' },
    { value: 'b', label: 'HTML' },
    { value: 'c', label: 'JavaScript' },
    { value: 'd', label: 'Bootstrap' },
  ]}
  placeholder={null}
/>

<Select
  className="is-invalid"
  options={[
    { value: 'a', label: 'My first option' },
    { value: 'b', label: 'Another option' },
    { value: 'c', label: 'Third option is here' },
  ]}
  placeholder={null}
/>

Property API

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

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

<FeatherIcon icon="activity" size="1em" />

Property API

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

import FeatherIcon from 'feather-icons-react';

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

Jun 9

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

Jun 9

export default function Kanban() {
  const [data, setData] = useState({...});
  const onDragEnd(result) {...};

  return (
    <div className="container-fluid kanban-container">
      <Row>
        <DragDropContext onDragEnd={onDragEnd}>
          {data.columnOrder.map((columnId, index) => {
            const column = data.columns[columnId];

            return (
              <Col xs={12} key={index}>
                <Card>
                  <Card.Body>
                    <Droppable droppableId={columnId}>
                      {(provided) => (
                        <Kanban.Category
                          ref={provided.innerRef}
                          {...provided.droppableProps}
                        >
                          {column.itemIds.map((itemId, index) => {
                            const item = data.items[itemId];

                            return (
                              <Draggable
                                draggableId={item.id}
                                key={item.id}
                                index={index}
                              >
                                {(provided, snapshot) => (
                                  <Kanban.Item
                                    dragging={snapshot.isDragging}
                                    dropped={snapshot.isDropAnimating}
                                    ref={provided.innerRef}
                                    {...provided.draggableProps}
                                    {...provided.dragHandleProps}
                                  >
                                    ...
                                  </Kanban.Item>
                                )}
                              </Draggable>
                            );
                          })}
                          {provided.placeholder}
                        </Kanban.Category>
                      )}
                    </Droppable>
                  </Card.Body>
                </Card>
              </Col>
            );
          })}
        </DragDropContext>
      </Row>
    </div>
  )
}

Rows Dashkit only

Vertical variation of the kanban board.

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

Jun 9

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

Jun 9

export default function Kanban() {
  const [data, setData] = useState({...});
  const onDragEnd(result) {...};

  return (
    <ListGroup className="list-group-flush list-group-lg">
      <DragDropContext onDragEnd={onDragEnd}>
        {data.columnOrder.map((columnId, index) => {
          const column = data.columns[columnId];

          return (
            <ListGroup.Item key={index}>
              <Droppable droppableId={columnId}>
                {(provided) => (
                  <Kanban.Category
                    ref={provided.innerRef}
                    {...provided.droppableProps}
                  >
                    {column.itemIds.map((itemId, index) => {
                      const item = data.items[itemId];

                      return (
                        <Draggable
                          draggableId={item.id}
                          key={item.id}
                          index={index}
                        >
                          {(provided, snapshot) => (
                            <Kanban.Item
                              ref={provided.innerRef}
                              {...provided.draggableProps}
                              {...provided.dragHandleProps}
                            >
                              ...
                            </Kanban.Item>
                          )}
                        </Draggable>
                      );
                    })}
                    {provided.placeholder}
                  </Kanban.Category>
                )}
              </Droppable>
            </ListGroup.Item>
          );
        })}
      </DragDropContext>
    </ListGroup>
  )
}

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

Property	Value
as	`form \| tag`

import { Kanban } from '../components'; // Kanban.Category

Property	Value
as	`div \| tag`

import { Kanban } from '../components'; // Kanban.Item

Property	Value
as	`div \| tag`
dragging	`false \| true`

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

<ListGroup className="list-group-lg">
  <ListGroup.Item active>Cras justo odio</ListGroup.Item>
  <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
  <ListGroup.Item>Morbi leo risus</ListGroup.Item>
  <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
  <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
</ListGroup>

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.

Airbnb

Updated 2hr ago

Medium Corporation

Updated 2hr ago

Homepage Redesign

Updated 4hr ago

<ListGroup className="list-group-focus">
  <ListGroup.Item href="#!" action>
    <h4 className="text-body text-focus mb-1">Item title</h4>
    <p className="mb-0">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti, eius
      quae, sint fugit obcaecati reprehenderit reiciendis soluta ab adipisci
      harum dolore beatae, nihil eaque architecto quas quasi aspernatur natus
      atque.
    </p>
  </ListGroup.Item>
</ListGroup>

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

<ListGroup className="list-group-flush list-group-activity my-n3">
  <ListGroup.Item>
    <Row>
      <Col xs="auto">
        <Avatar size="sm">
          <Avatar.Title className="rounded-circle bg-primary-subtle fs-lg text-primary">
            <FeatherIcon icon="mail" size="1em" />
          </Avatar.Title>
        </Avatar>
      </Col>
      <Col className="ms-n2">
        <h5 className="mb-1">Launchday 1.4.0 update email sent</h5>
        <p className="small text-gray-700 mb-0">
          Sent to all 1,851 subscribers over a 24 hour period
        </p>
        <small className="text-body-secondary">2m ago</small>
      </Col>
    </Row>
  </ListGroup.Item>
</ListGroup>

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

<ListGroup className="list-group-flush my-n3">
  <ListGroup.Item>
    <Row>
      <Col xs="auto">
        <Avatar size="sm">
          <Avatar.Title className="rounded-circle bg-primary-subtle fs-lg text-primary">
            <FeatherIcon icon="mail" size="1em" />
          </Avatar.Title>
        </Avatar>
      </Col>
      <Col className="ms-n2">
        <div className="small">
          <strong>Launchday Update email sent</strong> to 1,851
          subscribers over a 24 hour period for maximum open and reply
          rates.
        </div>
        <small className="text-body-secondary">2m ago</small>
      </Col>
    </Row>
  </ListGroup.Item>
</ListGroup>

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

● Online

Ryu Duke

● Online

Glen Rouse

● Busy

1(current)
2

export default function List() {
  const data = useMemo(
    () => [
      {
        itemA: '...',
        itemB: '...',
        itemC: '...',
      },
    ], []
  );

  const columns = useMemo(
    () => [
      {
        accessor: 'itemA',
      },
      {
        accessor: 'itemB',
      },
      {
        accessor: 'itemC',
      },
    ], []
  );

  const {
    gotoPage,
    page,
    pageOptions,
    prepareRow,
    setGlobalFilter,
    state: { pageIndex },
  } = useTable(
    {
      columns,
      data,
      initialState: { pageSize: 3 },
    },
    useGlobalFilter,
    usePagination
  );

  return (
    <>
      <Form.Control
        type="search"
        onChange={(e) =>
          setGlobalFilter(e.target.value ? e.target.value : undefined)
        }
      />

      <ListGroup layout="flush" className="my-n3">
        {page.map((row, i) => {
          prepareRow(row);
          const [itemA, itemB, itemC] = row.cells.map((cell) => cell.value);

          return (
            <ListGroup.Item {...row.getRowProps()}>
              <div className="row">
                <div className="col">{itemA}</div>
                <div className="col">{itemB}</div>
                <div className="col">{itemC}</div>
              </div>
            </ListGroup.Item>
          );
        })}
      </ListGroup>

      <Pagination>
        {pageOptions.map((option, index) => (
          <Pagination.Item
            key={index}
            active={option === pageIndex}
            onClick={() => gotoPage(option)}
          >
            {option + 1}
          </Pagination.Item>
        ))}
      </Pagination>
    </>
  );
}

Property API

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

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

Property API

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

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

Property API

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

import { Modal } from 'react-bootstrap';

Vertical Dashkit only

Creates a vertical variation of the Navbar component. The markup for everything else remains the same as the default Navbar!

<Navbar expand="md" className="navbar-vertical">
  ...
</Navbar>

Property API

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

import { Navbar } from 'react-bootstrap';

Small Nav Tabs Dashkit only

Creates a small variation of the nav component – this is especially useful for putting in Card.Header to act as tabs.

Active

Link

<Nav variant="tabs" className="nav-tabs-sm">
  <Nav.Item>
    <Nav.Link href="#!" active>
      Active
    </Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link href="#!">Link</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link href="#!">Link</Nav.Link>
  </Nav.Item>
</Nav>

Horz. Overscroll Dashkit only

Creates a horizontally scrollable variation of the nav component. Items do not get stacked if they don't fit the viewport. Instead, they stay on the same line and become scrollable in the x axes.

Active

Link

<Nav variant="tabs" className="nav-tabs-sm nav-overflow">
  <Nav.Item>
    <Nav.Link href="#!" active>
      Active
    </Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link href="#!">Link</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link href="#!">Link</Nav.Link>
  </Nav.Item>
</Nav>

Property API

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

import { Nav } from 'react-bootstrap';

Property API

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

import { Offcanvas } from 'react-bootstrap';

Basic

The basic page header with a preheading and a heading.

<Header>
  <Header.Body>
    <Header.Pretitle>Members</Header.Pretitle>
    <Header.Title>Dianna Smiley</Header.Title>
  </Header.Body>
</Header>

Button

The basic page header extended with a button.

<Header>
  <Header.Body>
    <Row className="align-items-center">
      <Col>
        <Header.Pretitle>Members</Header.Pretitle>
        <Header.Title>Dianna Smiley</Header.Title>
      </Col>
      <Col xs="auto">
        <Button>Subscribe</Button>
      </Col>
    </Row>
  </Header.Body>
</Header>

Nav

The basic page header extended with a tabbed navigation.

<Header>
  <Header.Body>
    <Row className="align-items-end">
      <Col>
        <Header.Pretitle>Members</Header.Pretitle>
        <Header.Title>Dianna Smiley</Header.Title>
      </Col>
      <Col xs="auto">
        <Header.Tabs>
          <Nav.Item>
            <Nav.Link href="#!" active>
              Daily
            </Nav.Link>
          </Nav.Item>
          <Nav.Item>
            <Nav.Link href="#!">Weekly</Nav.Link>
          </Nav.Item>
          <Nav.Item>
            <Nav.Link href="#!">Monthly</Nav.Link>
          </Nav.Item>
        </Header.Tabs>
      </Col>
    </Row>
  </Header.Body>
</Header>

Button + nav

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

<Header>
  <Header.Body>
    <Row className="align-items-end">
      <Col>
        <Header.Pretitle>Members</Header.Pretitle>
        <Header.Title>Dianna Smiley</Header.Title>
      </Col>
      <Col xs="auto">
        <Button>Subscribe</Button>
      </Col>
    </Row>
    <Row>
      <Col xs={12}>
        <Header.Tabs>
          <Nav.Item>
            <Nav.Link href="#!" active>
              Daily
            </Nav.Link>
          </Nav.Item>
          <Nav.Item>
            <Nav.Link href="#!">Weekly</Nav.Link>
          </Nav.Item>
          <Nav.Item>
            <Nav.Link href="#!">Monthly</Nav.Link>
          </Nav.Item>
        </Header.Tabs>
      </Col>
    </Row>
  </Header.Body>
</Header>

Avatar + nav

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

<Header>
  <Container fluid>
    <Header.Body>
      <Row className="align-items-center">
        <Col xs="auto">
          <Avatar ratio="4by3" size="lg">
            <Avatar.Image src="/img/avatars/projects/project-1.jpg" className="rounded" alt="..." />
          </Avatar>
        </Col>
        <Col className="ms-n3 ms-md-n2">
          <Header.Pretitle>Projects</Header.Pretitle>
          <Header.Title>Homepage Redesign</Header.Title>
        </Col>
        <Col xs={12} md="auto" className="mt-3 mt-md-0">
          <Avatar.Group>
            <Avatar as={Link} href="/profile-posts">
              <OverlayTrigger overlay={<Tooltip>Dianna Smiley</Tooltip>}>
                <Avatar.Image src="/img/avatars/profiles/avatar-1.jpg" alt="Dianna Smiley" className="rounded-circle" />
              </OverlayTrigger>
            </Avatar>
            ...
          </Avatar.Group>
          <Button className="btn-rounded-circle lift ms-1" variant="white" size="lg" onClick={() => setModalVisible(true)2}>
            +
          </Button>
        </Col>
      </Row>
      <Row className="align-items-center">
        <Col>
          <Header.Tabs className="nav-overflow">
            <Nav.Item>
              <Nav.Link as={Link} href="/project-overview" active={router.pathname === '/project-overview'2}>
                Overview
              </Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link as={Link} href="/project-files" active={router.pathname === '/project-files'2}>
                Files
              </Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link as={Link} href="/project-reports" active={router.pathname === '/project-reports'2}>
                Reports
              </Nav.Link>
            </Nav.Item>
          </Header.Tabs>
        </Col>
      </Row>
    </Header.Body>
  </Container>
</Header>

Cover image

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

<Header>
  <Header.ImageTop src="/img/covers/profile-cover-1.jpg" alt="Dianna Smiley" />
  <Container fluid>
    <Header.Body className="mt-n5 mt-md-n6">
      <Row className="align-items-end">
        <Col xs="auto">
          <Header.AvatarTop size="xxl">
            <Avatar.Image
              alt="Dianna Smiley"
              className="rounded-circle border border-4 border-card"
              src="/img/avatars/profiles/avatar-1.jpg"
            />
          </Header.AvatarTop>
        </Col>
        <Col className="mb-3 ms-n3 ms-md-n2">
          <Header.Pretitle>Members</Header.Pretitle>
          <Header.Title>Dianna Smiley</Header.Title>
        </Col>
        <Col xs={12} md="auto" className="mt-2 mt-md-0 mb-md-3">
          <Button className="d-block d-md-inline-block">Subscribe</Button>
        </Col>
      </Row>
      <Row className="align-items-center">
        <Col>
          <Header.Tabs variant="tabs" className="nav-overflow">
            <Nav.Item>
              <Nav.Link href="/profile-posts">Posts</Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link href="/profile-groups" active>
                Groups
              </Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link href="/profile-projects">Projects</Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link href="/profile-files">Files</Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link href="/profile-subscribers">Subscribers</Nav.Link>
            </Nav.Item>
          </Header.Tabs>
        </Col>
      </Row>
    </Header.Body>
  </Container>
</Header>

Chart

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

<Header className="bg-dark pb-5">
  <Container fluid>
    <Header.Body>
      <Row className="align-items-end">
        <Col>
          <Header.Pretitle as="h6" className="text-secondary">
            Annual
          </Header.Pretitle>
          <Header.Title as="h1" className="text-white">
            Audience
          </Header.Title>
        </Col>
        <Col xs="auto">
          <Header.Tabs>
            <Nav.Item>
              <Nav.Link className="text-center" role="button" active>
                <Header.Pretitle className="text-secondary">Customers</Header.Pretitle>
                <h3 className="text-white mb-0">73.2k</h3>
              </Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link className="text-center" role="button">
                <Header.Pretitle className="text-secondary">Sessions</Header.Pretitle>
                <h3 className="text-white mb-0">92.1k</h3>
              </Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link className="text-center" role="button">
                <Header.Pretitle className="text-secondary">Conversion</Header.Pretitle>
                <h3 className="text-white mb-0">50.2%</h3>
              </Nav.Link>
            </Nav.Item>
          </Header.Tabs>
        </Col>
      </Row>
    </Header.Body>
    <Header.Footer>
      <Chart>
        <Line />
      </Chart>
    </Header.Footer>
  </Container>
</Header>

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

Property	Value
as	`div \| tag`

import { Header } from '../components'; // Header.AvatarTop

import { Header } from '../components'; // Header.Body

Property	Value
as	`div \| tag`

import { Header } from '../components'; // Header.Footer

Property	Value
as	`div \| tag`

import { Header } from '../components'; // ImageTop

Property	Value
as	`img \| tag`

import { Header } from '../components'; // Header.Pretitle

Property	Value
as	`h6 \| tag`

import { Header } from '../components'; // Header.Subtitle

Property	Value
as	`p \| tag`

import { Header } from '../components'; // Header.Tabs

import { Header } from '../components'; // Header.Title

Property	Value
as	`h1 \| tag`

Property API

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

import { Pagination } from 'react-bootstrap';

Property API

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

import { Placeholder } from 'react-bootstrap';

Property API

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

import { Popover } from 'react-bootstrap';

Small Dashkit only

The progress bar component with its bar height decreased.

<ProgressBar className="progress-sm" />

Property API

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

import { ProgressBar } from 'react-bootstrap';

Card

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

<Card>
  <Card.Body className="text-center">
    <Spinner animation="border" />
  </Card.Body>
</Card>

Property API

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

import { Spinner } from 'react-bootstrap';

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

No wrap Dashkit only

Prevents table cell content from wrapping to another line.

#	First	Last	Handle	Decription
1	Mark	Otto	@mdo	Lorem ipsum dolor sit amet, consectetur adipisicing elit.
2	Jacob	Thornton	@fat	Lorem ipsum dolor sit amet, consectetur adipisicing elit.
3	Larry	the Bird	@twitter	Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  <Table size="sm" className="table-nowrap">
    ...
  </Table>

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.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

export default function Tables() {
  const data = useMemo(
    () => [
      {
        id: 1,
        first: 'Mark',
        last: 'Otto',
        handle: '@mdo',
      },
      {
        id: 2,
        first: 'Jacob',
        last: 'Thornton',
        handle: '@fat',
      },
      {
        id: 3,
        first: 'Larry',
        last: 'the Bird',
        handle: '@twitter',
      },
    ],
    []
  );

  const columns = useMemo(
    () => [
      {
        Header: '#',
        accessor: 'id',
      },
      {
        Header: 'First',
        accessor: 'first',
      },
      {
        Header: 'Last',
        accessor: 'last',
      },
      {
        Header: 'Handle',
        accessor: 'handle',
      },
    ],
    []
  );

  const { getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
    { columns, data },
    useSortBy
  );

  return (
    <Table size="sm" className="table-nowrap" responsive>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th
                {...column.getHeaderProps(
                  column.getSortByToggleProps({
                    className: column.canSort && 'is-sortable',
                  })
                )}
              >
                {column.render('Header')}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return (
                  <td
                    {...cell.getCellProps({
                      className: cell.column.className,
                    })}
                  >
                    {cell.render('Cell')}
                  </td>
                );
              })}
            </tr>
          );
        })}
      </tbody>
    </Table>
  )
}

Property API

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

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

Hello, world! This is a toast message.

Property API

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

import { Toast } from 'react-bootstrap';

Property API

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

import { Tooltip } from 'react-bootstrap';

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

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>

Accordion

Accordion Item #1

Accordion Item #2

Property API

Alerts

Property API

Autosize

Property API

Avatars Dashkit only

Sizing

Status Indicator

Shape

Shape

Initials

Groups

Property API

Badges

Subtle Dashkit only

Property API

Breadcrumb

Property API

Button group

Property API

Buttons

White Dashkit only

Rounded circle Dashkit only

Icon Dashkit only

Property API

Cards

Card title

Card header Dashkit only

Card title

Card header navigation Dashkit only

Card title

Inactive Dashkit only

Fill Dashkit only New

Traffic Channels

Weekly Sales

Orders Placed

Conversion Rate

Avg. Value

Adjust Dashkit onlyNew

Recent Activity

Launchday 1.4.0 update email sent

New project "Goodkit" created

Dashkit 1.5.0 was deployed

"Update Dependencies" branch was created

Scratchpad Checklist

Property API

Charts Dashkit only Plugin

Line

Bar

Doughnut

Sparkline

Toggle chart data

Conversions

Sales

Property API

Checklist Dashkit only New

Property API

Dropdowns

Dropdown ellipsis Dashkit only

Latest orders

Dropdown card Dashkit only

Property API

Forms

Floating labels

Switch

Validation

Rounded Dashkit only

Flush Dashkit only

Auto Dashkit only

Input group merge Dashkit only

Property API

Date picker Dashkit only Plugin

Property API

Input masking Dashkit only Plugin

Property API

Rich text editor Dashkit only Plugin

Property API