Build vertically collapsing accordions in combination with the
Collapse component.
{/* basic */}
Example
Click the accordions below to expand/collapse the accordion
content.
{/* accordion started */}
Accordion Item #1This is the accordion body of item 1.{' '}
It is hidden by default, until the collapse plugin
adds the appropriate classes that we use to style each
element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions.
You can modify any of this with custom CSS or
overriding our default variables. It's also worth
noting that just about any HTML can go within the{' '}
<Accordion.Item> →{' '}
<Accordion.Body> though the
transition does limit overflow.
Accordion Item #2This is the accordion body of item 2.{' '}
It is hidden by default, until the collapse plugin
adds the appropriate classes that we use to style each
element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions.
You can modify any of this with custom CSS or
overriding our default variables. It's also worth
noting that just about any HTML can go within the{' '}
<Accordion.Item> →{' '}
<Accordion.Body> though the
transition does limit overflow.
Accordion Item #3This is the accordion body of item 3.{' '}
It is hidden by default, until the collapse plugin
adds the appropriate classes that we use to style each
element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions.
You can modify any of this with custom CSS or
overriding our default variables. It's also worth
noting that just about any HTML can go within the{' '}
<Accordion.Item> →{' '}
<Accordion.Body> though the
transition does limit overflow.
{/* end of accordion started */}
{/* end of basic */}
{/* basic */}
Flush
Add flush to remove the default background-color,
some borders, and some rounded corners to render accordions
edge-to-edge with their parent container.
{/* accordion started */}
Accordion Item #1This is the accordion body of item 1.{' '}
It is hidden by default, until the collapse plugin
adds the appropriate classes that we use to style each
element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions.
You can modify any of this with custom CSS or
overriding our default variables. It's also worth
noting that just about any HTML can go within the{' '}
<Accordion.Item> →{' '}
<Accordion.Body> though the
transition does limit overflow.
Accordion Item #2This is the accordion body of item 2.{' '}
It is hidden by default, until the collapse plugin
adds the appropriate classes that we use to style each
element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions.
You can modify any of this with custom CSS or
overriding our default variables. It's also worth
noting that just about any HTML can go within the{' '}
<Accordion.Item> →{' '}
<Accordion.Body> though the
transition does limit overflow.
Accordion Item #3This is the accordion body of item 3.{' '}
It is hidden by default, until the collapse plugin
adds the appropriate classes that we use to style each
element. These classes control the overall appearance,
as well as the showing and hiding via CSS transitions.
You can modify any of this with custom CSS or
overriding our default variables. It's also worth
noting that just about any HTML can go within the{' '}
<Accordion.Item> →{' '}
<Accordion.Body> though the
transition does limit overflow.
{/* end of accordion started */}
{/* end of basic */}
);
};
export default Accordions;
================================================
FILE: app/(dashboard)/components/alerts/page.js
================================================
'use client'
// import node module libraries
import { Fragment, useState } from 'react';
import { Col, Row, Card, Alert, Button, Nav, Tab, Container } from 'react-bootstrap';
import {
ExclamationCircleFill,
CheckCircleFill,
ExclamationTriangleFill
} from 'react-bootstrap-icons';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
SimpleAlert,
LinkAlert,
AdditionalAlert,
AlertWithIcon,
DismissingAlert
} from 'data/code/AlertsCode';
const Alerts = () => {
const AlertDismissible = () => {
const [show, setShow] = useState(true);
if (show) {
return (
setShow(false)} dismissible>
Holy guacamole!You should check in on
some of those fields below.
);
}
return ;
};
return (
Alerts
Provide contextual feedback messages for typical user actions
with the handful of available and flexible alert messages.
{/* simple alert */}
Simple Alert
Alerts are available for any length of text, as well as an
optional dismiss button. For proper styling, use one of the eight{' '}
variants.
This is a primary alert—check it out!
This is a secondary alert—check it out!
This is a success alert—check it out!
This is a danger alert—check it out!
This is a warning alert—check it out!
This is a info alert—check it out!
This is a light alert—check it out!
This is a dark alert—check it out!
{/* end of simple alert */}
{/* link alert */}
Link Alert
For links, use the </Alert.Link> component
to provide matching colored links within any alert.
This is a primary alert with{' '}
an example link. Give it
a click if you like.
This is a secondary alert with{' '}
an example link. Give it
a click if you like.
This is a success alert with{' '}
an example link. Give it
a click if you like.
This is a danger alert with{' '}
an example link. Give it
a click if you like.
This is a warning alert with{' '}
an example link. Give it
a click if you like.
This is a info alert with{' '}
an example link. Give it
a click if you like.
This is a light alert with{' '}
an example link. Give it
a click if you like.
This is a dark alert with{' '}
an example link. Give it
a click if you like.
{/* end of link alert */}
{/* additional content */}
Additional content
Alerts can also contain additional HTML elements like headings,
paragraphs and dividers.
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.
{/* end of additional content */}
{/* icons */}
Icons
Similarly, you can use{' '}
(React) Bootstrap Icons
{' '}
to create alerts with icons. Depending on your icons and content,
you may want to add more utilities or custom styles.
An example alert with an icon
An example success alert with an icon
An example warning alert with an icon
An example danger alert with an icon
{/* end of icons */}
{/* icons */}
Dismissing
Add the dismissible prop to add a functioning dismiss
button to the Alert.
Documentation and examples for badges, our small count and
labeling component.
{/* Contextual badges */}
Contextual badges
Add any of the below mentioned modifier classes to change the
appearance of a badge.
primary
secondary
success
danger
warning
info
light
dark
{/* end of Contextual badges */}
{/* Pill badges */}
Pill badges
Use the pill modifier to make badges more rounded
(with a larger border-radius and additional horizontal padding).
primary
secondary
success
danger
warning
info
light
dark
{/* end of Pill badges */}
{/* simple badge */}
Simple Badge
Badges scale to match the size of the immediate parent element by
using relative font sizing and em units.
{' '}
Example heading New
{' '}
Example heading New
{' '}
Example heading New{' '}
{' '}
Example heading New
{' '}
Example heading New{' '}
{' '}
Example heading New
{/* end of simple badge */}
{/* badge with button */}
Badge with Button
Badges can be used as part of links or buttons to provide a
counter.
{/* end of badge with button */}
);
};
export default Badges;
================================================
FILE: app/(dashboard)/components/breadcrumbs/page.js
================================================
'use client'
// import node module libraries
import { Col, Row, Card, Breadcrumb, Nav, Tab, Container } from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import { BasicBreadcrumb } from 'data/code/BreadcrumbCode';
const Breadcrumbs = () => {
return (
Breadcrumb
Indicate the current page’s location within a navigational
hierarchy that automatically adds separators via CSS.
Basic example
Add active prop to active{' '}
Breadcrumb.Item . Do not set both active{' '}
and href attributes. active overrides{' '}
href and span element is rendered
instead of a.
Group a series of buttons together on a single line with the
button group.
{/* basic example */}
Basic example
Wrap a series of <Button>s in a{' '}
<ButtonGroup>.
{/* end of basic example */}
{/* groups of links */}
These classes can also be added to groups of links with{' '}
href, as an alternative to the navigation components.
{/* end of groups of links */}
{/* mixed styles */}
Mixed Styles
{/* end of mixed styles */}
{/* mixed outline styles */}
Outline Styles
{/* end of mixed outline styles */}
{/* checkbox and radio button groups */}
Checkbox and radio button groups
Combine button-like checkbox and radio toggle buttons into a
seamless looking button group.
Checkbox 1
Checkbox 2
Checkbox 3
Radio 1
Radio 2
Radio 3
{/* end of checkbox and radio button groups */}
{/* button toolbar */}
Button toolbar
Combine sets of <ButtonGroup>s into a{' '}
<ButtonToolbar> for more complex components.
Use utility classes as needed to space out groups, buttons, and
more.
{' '}
{/* end of button toolbar */}
{/* button sizing */}
Sizing
Instead of applying button sizing props to every button in a
group, just add size prop to the{' '}
<ButtonGroup>.
{/* end of button sizing */}
{/* button nesting */}
Button Nesting
You can place other button types within the{' '}
<ButtonGroup> like{' '}
<DropdownButton>s.
Dropdown link
Dropdown link
{/* end of button nesting */}
{/* button vertical variation */}
Vertical variation
Make a set of buttons appear vertically stacked rather than
horizontally, by adding vertical to the{' '}
<ButtonGroup>.{' '}
Split button dropdowns are not supported here.
Dropdown link
Dropdown link
Dropdown link
Dropdown link
Dropdown link
Dropdown link
{/* end of button vertical variation */}
);
};
export default ButtonGroups;
================================================
FILE: app/(dashboard)/components/buttons/page.js
================================================
'use client'
// import node module libraries
import { Fragment } from 'react';
import {
Col,
Row,
Button,
Card,
Spinner,
ToggleButton,
ToggleButtonGroup,
Nav,
Tab,
Container
} from 'react-bootstrap';
import { ShoppingBag } from 'react-feather';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
RegularButtonCode,
ButtonTagsCode,
OutlineButtonsCode,
ButtonSizesCode,
BlockButtonCode,
ResponsiveButtonCode,
BlockButtonWidthCode,
ButtonAlignmentCode,
ButtonIconsCode,
ButtonIcons2Code,
ButtonIconsSizeCode,
ActiveStateCode,
DisabledStateCode,
ToggleStatesCode
} from 'data/code/ButtonsCode';
const Buttons = () => {
return (
Buttons
Custom button styles for actions in forms, dialogs, and more
with support for multiple sizes, states, and more.
{/* regular button */}
Regular Button
Use any of the available button style types to quickly create a
styled button. Just modify the variant prop.
{/* end of regular button */}
{/* button tags */}
Button tags
Normally <Button> components will render a HTML{' '}
<button> element. However you can render
whatever you'd like, adding a href prop will
automatically render an <a/> element. You can
use the as prop to render whatever your heart
desires. React Bootstrap will take care of the proper ARIA roles
for you.
{/* end of button tags */}
{/* outline buttons */}
Outline buttons
For a lighter touch, Buttons also come in outline-*{' '}
variants with no background color.
{/* end of outline buttons */}
{/* sizes */}
Sizes
Fancy larger or smaller buttons? Add size="lg" or size="sm" for additional sizes.
{/* end of sizes */}
{/* block buttons */}
Block buttons
Create responsive stacks of full-width, “block buttons” like those
in Bootstrap 4 with a mix of our display and gap utilities.
{/* end of block buttons */}
{/* block buttons responsive variation */}
Here we create a responsive variation, starting with vertically
stacked buttons until the md breakpoint, where{' '}
.d-md-block replaces the .d-grid class,
thus nullifying the gap-2 utility. Resize your browser
to see that change.
{/* end of block buttons responsive variation*/}
{/* adjust the width of your block buttons */}
You can adjust the width of your block buttons with grid column
width classes. For example, for a half-width “block button”, use{' '}
md={6}. Center it horizontally with{' '}
.mx-auto, too.
{/* end of adjust the width of your block buttons */}
{/* alignment of buttons when horizontal */}
Additional utilities can be used to adjust the alignment of buttons
when horizontal. Here we’ve taken our previous responsive example
and added some flex utilities and a margin utility on the button to
right align the buttons when they’re no longer stacked.
{/* end of alignment of buttons when horizontal */}
{/* button icons */}
Button icons
A contained button with an icon.
{/* end of button icons */}
{/* button icons */}
With fixed width and height.
{' '}
{/* end of button icons */}
{/* button icons sizes*/}
Also available in all button sizes.
{/* end of button icons sizes */}
{/* active state */}
Active state
To set a button's active state simply set the component's active prop.
{/* end of active state */}
{/* disabled state */}
Disabled state
Make buttons look inactive by adding the disabled{' '}
prop to.
{/* end of disabled state */}
{/* toggle state */}
Toggle states
Buttons can also be used to style checkbox and{' '}
radio form elements. This is helpful when you want a
toggle button that works neatly inside an HTML form.
Toggle button
Active toggle button
Disabled toggle button
{/* end of toggle state */}
);
};
export default Buttons;
================================================
FILE: app/(dashboard)/components/cards/page.js
================================================
'use client'
// import node module libraries
import { Fragment } from 'react';
import {
Col,
Row,
Card,
Button,
ListGroup,
ListGroupItem,
Nav,
Tab,
Container
} from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
BasicCardCode,
CardBodyCode,
TitlesTextLinksCode,
ListGroups1Code,
ListGroups2Code,
CardImagesCode,
KitchenSinkCode,
HeaderFooterCode,
HeaderFooterCode2,
TextAlignmentCode,
ImagesTopBottomCode,
ImageOverlaysCode
} from 'data/code/CardsCode';
const Cards = () => {
return (
Cards
Geek's cards provide a flexible and extensible content container
with multiple variants and options.
{/* card */}
Basic Example
Below is an example of a basic card with mixed content and a fixed
width.
Card Title
Some quick example text to build on the card title and
make up the bulk of the card's content.
{/* end of card */}
{/* content-types */}
Card Body
Use <Card.Body> to pad content inside a{' '}
<Card>.
This is some text within a card body.
{/* end of content-types */}
{/* Titles, text, and links */}
Titles, text, and links
Using <Card.Title>,{' '}
<Card.Subtitle>, and{' '}
<Card.Text> inside the{' '}
<Card.Body> will line them up nicely.{' '}
<Card.Link>s are used to line up links next to
each other.
{' '}
<Card.Text> outputs <p> tags
around the content, so you can use multiple{' '}
<Card.Text>s to create separate paragraphs.
{/* Code started */}
Card Title
Card Subtitle
Some quick example text to build on the card title and
make up the bulk of the card's content.
Card LinkAnother Link
{/* end of code */}
{/* end of Titles, text, and links */}
{/* List Groups */}
List Groups
Create lists of content in a card with a flush list group.
{/* Code started */}
Cras justo odioDapibus ac facilisis inVestibulum at eros
{/* end of code */}
FeaturedCras justo odioDapibus ac facilisis inVestibulum at eros
{/* end of List Groups */}
{/* image */}
Images
<Card.Img> with variant="top"{' '}
places an image to the top of the card. With{' '}
<Card.Text>, text can be added to the card.
Text within <Card.Text> can also be styled with
the standard HTML tags.
Some quick example text to build on the card title and
make up the bulk of the card's content.
{/* end of image */}
{/* kitchen-sink */}
Kitchen sink
Mix and match multiple content types to create the card you need,
or throw everything in there. Shown below are image styles,
blocks, text styles, and a list group—all wrapped in a fixed-width
card.
Card Title
Some quick example text to build on the card title and
make up the bulk of the card's content.
Cras justo odioDapibus ac facilisis inVestibulum at erosCard LinkAnother Link
{/* end of kitchen-sink */}
{/* header-footer */}
FeaturedSpecial title treatment
With supporting text below as a natural lead-in to
additional content.
FeaturedSpecial title treatment
With supporting text below as a natural lead-in to
additional content.
2 days ago
{/* end of header-footer */}
{/* text-alignment */}
Text alignment
You can quickly change the text alignment of any card—in its
entirety or specific parts—with our text align classes.
{/* code started */}
Special title treatment
With supporting text below as a natural lead-in to
additional content.
Special title treatment
With supporting text below as a natural lead-in to
additional content.
Special title treatment
With supporting text below as a natural lead-in to
additional content.
{/* end of code */}
{/* end of text-alignment */}
{/* images */}
Images
Cards include a few options for working with images. Choose from
appending “image caps” at either end of a card, overlaying images
with card content, or simply embedding the image in a card.
Image caps
Similar to headers and footers, cards can include top and bottom
“image caps”—images at the top or bottom of a card.
{/* Code started */}
Card title
This is a wider card with supporting text below as a
natural lead-in to additional content. This content is
a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a
natural lead-in to additional content. This content is
a little bit longer.
Last updated 3 mins ago
{/* end of code */}
{/* end of images */}
{/* image-overlays */}
Image overlays
Turn an image into a card background and overlay your card’s text.
Depending on the image, you may or may not need additional styles
or utilities.
{/* Code start */}
Card title
This is a wider card with supporting text below as a
natural lead-in to additional content. This content is
a little bit longer.
Last updated 3 mins ago
{/* end of code */}
{/* end of image-overlays */}
);
};
export default Cards;
================================================
FILE: app/(dashboard)/components/carousels/page.js
================================================
'use client'
// import node module libraries
import { Fragment, useState } from 'react';
import { Col, Row, Card, Carousel, Image, Nav, Tab, Container } from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
SlidesOnlyCode,
WithControlCode,
WithIndicatorsCode,
WithCaptionCode,
CrossfadeCode,
IndividualCode,
DarkVariantCode
} from 'data/code/CarouselsCode';
const Carousels = () => {
const [index, setIndex] = useState(0);
const handleSelect = (selectedIndex, e) => {
setIndex(selectedIndex);
};
return (
Carousel
A slideshow component for cycling through elements—images or
slides of text—like a carousel.
{/* slide only */}
Slides only
Here’s a carousel with slides only. Note the presence of the{' '}
.d-block and{' '}
.w-100 on carousel
images to prevent browser default image alignment.
{/* code started */}
{/* end of code */}
{/* end of slide only */}
{/* with controls */}
With Control
Adding in the previous and next controls:
{/* code started */}
{/* end of code */}
{/* end of with controls */}
{/* with indicators */}
With indicators
You can also add the indicators to the carousel, alongside the
controls, too.
{/* code started */}
{/* end of code */}
{/* end of with indicators */}
{/* with caption */}
With caption
Add captions to your slides easily with the{' '}
<Carousel.Caption> within any{' '}
<Carousel.Item>.
{/* code started */}
First slide label
Nulla vitae elit libero, a pharetra augue mollis
interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing
elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl
consectetur.
{/* end of code */}
{/* end of with caption */}
{/* crossfade */}
Crossfade
Add the fade prop to your carousel to animate slides
with a fade transition instead of a slide.
{/* code started */}
{/* end of code */}
{/* end of crossfade */}
{/* individual */}
Individual
You can specify individual intervals for each carousel item via
the interval prop.
{/* code started */}
{/* end of code */}
{/* end of individual */}
{/* dark variant */}
Dark Variant
Add variant="dark" to the Carousel for
darker controls, indicators, and captions.
{/* code started */}
First slide label
Nulla vitae elit libero, a pharetra augue mollis
interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing
elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl
consectetur.
{/* end of code */}
{/* end of dark variant */}
);
};
export default Carousels;
================================================
FILE: app/(dashboard)/components/close-button/page.js
================================================
'use client'
// import node module libraries
import { Fragment } from 'react';
import { Col, Row, Card, CloseButton, Nav, Tab, Container } from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
GenericCloseButtonCode,
DisabledStateCode,
WhiteVariantCode
} from 'data/code/CloseCode';
const CloseButtons = () => {
return (
Close Buttons
A generic close button for dismissing content like modals and
alerts.
{/* generic close button */}
Examples
Provide an option to dismiss or close a component with{' '}
<CloseButton>.
{/* end of generic close button */}
{/* Disabled state */}
Disabled state
Bootstrap adds relevant styling to a disabled close button to
prevent user interactions.
{/* end of Disabled state*/}
{/* White variant */}
White variant
Change the default dark color to white using{' '}
variant="white".
Add a collapse toggle animation to an element or component.
{/* Collapses */}
Anim pariatur cliche reprehenderit, enim eiusmod high
life accusamus terry richardson ad squid. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident.
{/* end of Collapses */}
{/* Fade Collapses */}
Fade
Add a fade animation to a child element or component.
Anim pariatur cliche reprehenderit, enim eiusmod high
life accusamus terry richardson ad squid. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident.
Toggle contextual overlays for displaying lists of links and
more with the Bootstrap dropdown plugin.
{/* basic */}
Basic
The basic Dropdown is composed of a wrapping Dropdown{' '}
and inner <DropdownMenu>, and{' '}
<DropdownToggle>. By default the{' '}
<DropdownToggle> will render a Button component
and accepts all the same props.
{/* code started */}
Dropdown Button
Action
Another action
Something else
{/* end of code */}
{/* end of basic */}
{/* split button */}
Split Button
Similarly, You create a split dropdown by combining the Dropdown
components with another Button and a ButtonGroup.
{/* code started */}
ActionAnother actionSomething else
{/* end of code */}
{/* end of split button */}
{/* options */}
Options
The best part is you can do this with any button variant, too:
{/* code started */}
{[
'Primary',
'Secondary',
'Success',
'Info',
'Warning',
'Danger'
].map((variant) => (
Action
Another action
{' '}
Something else
Separated link
))}
{/* end of code */}
{/* end of options */}
{/* sizing */}
Sizing
Button dropdowns work with buttons of all sizes, including default
and split dropdown buttons.
{/* code started */}
{[DropdownButton, SplitButton].map((DropdownType, idx) => (
Action
Another action
Something else here
Separated link
))}
{[DropdownButton, SplitButton].map((DropdownType, idx) => (
Action
Another action
Something else here
Separated link
))}
{/* end of code */}
{/* end of sizing */}
{/* directions */}
Directions
Trigger dropdown menus above, below, left, or to the right of
their toggle elements, with the drop prop.
{/* code started */}
{['up', 'down', 'start', 'end'].map((direction) => (
Action
Another action
Something else here
Separated link
))}
{['up', 'down', 'start', 'end'].map((direction) => (
Action
Another action
Something else here
Separated link
))}
{/* end of code */}
{/* end of directions */}
{/* alignment */}
Menu Alignment
By default, a dropdown menu is aligned to the left, but you can
switch it by passing align="end" to a{' '}
<Dropdown>, <DropdownButton>
, or <SplitButton>.
{/* code started */}
Action
Another action
Something else here
Separated link
Action
Another action
Something else here
Separated link
{/* end of code */}
{/* end of alignment */}
{/* responsive men alignment */}
Responsive Menu Alignment
If you want to use responsive menu alignment, pass an object
containing a breakpoint to the align prop on the{' '}
<DropdownMenu>,{' '}
<DropdownButton>, or{' '}
<SplitButton>. You can specify start or end for
the various breakpoints.
{/* code started */}
Action
Another action
Something else here
Separated link
{/* end of code */}
{/* responsive men alignment */}
{/* code started */}
Action
Another action
Something else here
Separated link
{/* end of code */}
{/* end of responsive men alignment */}
{/* menu-content */}
Menu content
Header
Add a header to label sections of actions in any dropdown menu.
{/* code started */}
Dropdown headerAnother action
Something else here
{/* end of code */}
{/* end of menu-content */}
{/* dividers */}
Dividers
Separate groups of related menu items with a divider.
{/* code started */}
ActionAnother action
Something else here
Separated link
{/* end of code */}
{/* end of dividers */}
{/* forms */}
Forms
Put a form within a dropdown menu, or make it into a dropdown
menu, and use margin or padding utilities to give it the negative
space you require.
{/* code started */}
{hasMounted &&
}
New around here? Sign upForgot password?
{/* end of code */}
{/* end of forms */}
{/* */}
{/* code started */}
{hasMounted &&
}
{/* end of code */}
{/* end of */}
);
};
export default Dropdowns;
================================================
FILE: app/(dashboard)/components/list-group/page.js
================================================
'use client'
// import node module libraries
import { Fragment } from 'react';
import {
Col,
Row,
Card,
ListGroup,
Badge,
Image,
Tab,
Nav,
Container
} from 'react-bootstrap';
import { PlayCircle, Award, Calendar, Video, Clock } from 'react-feather';
// import sub custom components
import DotBadge from 'components/bootstrap/DotBadge';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
BasicListgroupCode,
ActiveItemCode,
DisabledItemsCode,
LinksButtonsCode,
ListButtonCode,
FlushListgroupCode,
HorizontalListgroupCode,
HorizontalListgroupCode2,
ContextualClassesCode,
WithBadgesCode,
CustomContentCode,
WithIconCode,
GroupWithIconCode
} from 'data/code/ListgroupsCode';
const Listgroups = () => {
function alertClicked() {
alert('You clicked a ListGroupItem');
}
return (
Listgroup
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.
{/* basic example */}
Basic list
The most basic list group is an unordered list with list items and
the proper classes. Build upon it with the options that follow, or
with your own CSS as needed.
{/* code started */}
Cras justo odioDapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros
{/* end of code */}
{/* end of basic example */}
{/* active items */}
Active Item
Set the active prop to indicate the list groups
current active selection.
{/* code started */}
Cras justo odioDapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros
{/* end of code */}
{/* end of active items */}
{/* disabled items */}
Disabled Items
Set the disabled prop to prevent actions on a{' '}
<ListGroup.Item>. For elements that aren't
naturally disable-able (like anchors) onClick{' '}
handlers are added that call preventDefault to mimick
disabled behavior.
{/* code started */}
Cras justo odioDapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros
{/* end of code */}
{/* end of disabled items */}
{/* links-and-buttons */}
Links and buttons
Use href and action props to create{' '}
actionable list group items with hover, disabled, and
active states.
{/* code started */}
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
{/* end of code */}
{/* end of links-and-buttons */}
{/* List button */}
With onClick function parameter, list group will
create <button>s, you can also make use of the{' '}
disabled and active attributes.
{/* code started */}
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
{/* end of code */}
{/* end of List button */}
{/* flush */}
Flush
Add the flush variant to remove outer borders and
rounded corners to render list group items edge-to-edge in a
parent container such as a Card.
{/* code started */}
Cras justo odioDapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros
{/* end of code */}
{/* end of flush */}
{/* horizontal */}
Horizontal
Use the horizontal prop to make the ListGroup render
horizontally. Currently{' '}
horizontal list groups cannot be combined with flush list
groups.
{/* code started */}
Cras justo odioDapibus ac facilisis inMorbi leo risus
{/* end of code */}
{/* end of horizontal */}
{/* horizontal */}
ProTip: Want equal-width list group items when
horizontal? Add .flex-fill to each list group item.
{/* code started */}
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
{/* end of code */}
{/* end of horizontal */}
{/* contextual-classes */}
Contextual classes
Use contextual variants on{' '}
<ListGroup.Item>s to style them with a stateful
background and color.
{/* code started */}
Dapibus ac facilisis in
This is a Primary list group item
This is a Secondary list group item
This is a Success list group item
This is a Danger list group item
This is a Warning list group item
This is a Info list group item
This is a Light list group item
This is a Dark list group item
{/* end of code */}
{/* end of contextual-classes */}
{/* with-badges */}
With badges
Add <Badge> to any list group item to show
unread counts, activity, and more with the help of some utilities.
{/* code started */}
Cras justo odio 14{' '}
Dapibus ac facilisis in 2
Morbi leo risus 1
{/* end of code */}
{/* end of with-badges */}
{/* custom-content */}
Custom content
Add nearly any HTML within, even for linked list groups like the
one below, with the help of flexbox utilities.
{/* code started */}
List group item heading
3 days ago
Donec id elit non mi porta gravida at eget metus.
Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.
List group item heading
3 days ago
Donec id elit non mi porta gravida at eget metus.
Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.
List group item heading
3 days ago
Donec id elit non mi porta gravida at eget metus.
Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.
{/* end of code */}
{/* end of custom-content */}
{/* with icon */}
List Group with Icon
{/* code started */}
12 hours video
Certificate
12 Article
Watch Offline
Lifetime access
{/* end of code */}
{/* end of with icon */}
{/* List group with icon */}
Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
`;
function MyVerticallyCenteredModal(props) {
return (
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
);
}
const [modalShow, setModalShow] = useState(false);
return (
Modal
Add dialogs to your site for lightboxes, user notifications, or
completely custom content.
{/* modal-example */}
Modal components
Below is a static modal dialog (without the
positioning) to demonstrate the look and feel of the Modal.
{/* code started */}
Modal title
Modal body text goes here.
{/* end of code */}
{/* end of modal-example */}
{/* live-demo */}
Live Demo
A modal with header, body, and set of actions in the footer. Use{' '}
<Modal> in combination with other components to
show or hide your Modal. The
<Modal> Component comes with a few convenient
"sub components": <Modal.Header>,
<Modal.Title>, <Modal.Body>,
and <Modal.Footer>, which you can use to build
the Modal content.
Toggle a working modal demo by clicking the button below. It will
slide down and fade in from the top of the page.
{/* code started */}
Modal title
Woohoo, you're reading this text in a modal!
{/* end of code */}
{/* end of live-demo */}
{/* scrolling-long-content */}
Scrolling long content
When modals become too long for the user’s viewport or device,
they scroll independent of the page itself. Try the demo below to
see what we mean.
{/* code started */}
setScrollShow(false)}
>
Modal title
{/* end of code */}
{/* end of scrolling-long-content */}
{/* scrolling-long-content */}
You can also create a scrollable modal that allows scroll the
modal body by adding .modal-dialog-scrollable to
.modal-dialog and style in{' '}
<Model.Body>.
{/* code started */}
setScrollShow2(false)}
>
Modal title
{/* end of code */}
{/* end of scrolling-long-content */}
{/* vertically-centered */}
Vertically centered
You can vertically center a modal by passing the{' '}
"centered" prop.
{/* code started */}
setModalShow(false)}
/>
{/* end of code */}
{/* end of vertically-centered */}
{/* optional-sizes */}
Optional sizes
You can specify a bootstrap large or small modal by using the{' '}
"size" prop.{' '}
{/* code started */}
{' '}
{' '}
setSmShow(false)}
aria-labelledby="example-modal-sizes-title-sm"
>
Small modal
... setLgShow(false)}
aria-labelledby="example-modal-sizes-title-lg"
>
Extra large modal
... setMdShow(false)}
aria-labelledby="example-modal-sizes-title-lg"
>
Large modal
...
{/* end of code */}
{/* end of optional-sizes */}
);
};
export default Modals;
================================================
FILE: app/(dashboard)/components/navbar/page.js
================================================
'use client'
// import node module libraries
import { Fragment } from 'react';
import {
Col,
Row,
Card,
Navbar,
NavDropdown,
Nav,
Image,
Tab,
Container
} from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import data files
import {
DefaultNavbar,
BrandNavbar,
ColorSchemesCode
} from 'data/code/NavbarsCode';
const Navbars = () => {
return (
Navbar
A powerful, responsive navigation header, the navbar. Includes
support for branding, navigation, and more.
{/* default-navbar */}
Default Navbar
{/* end of default-navbar */}
{/* brand-navbar */}
A simple flexible branding component. Images are supported but
will likely require custom styling to work well.
{/* end of brand-navbar */}
{/* Color schemes */}
Color schemes
Theming the navbar has never been easier thanks to the combination
of theming classes and background-color utilities. Choose from{' '}
variant="light" for use with light background colors,
or variant="dark" for dark background colors. Then,
customize with the bg prop or any custom css!
{' '}
{' '}
{/* end of Color schemes */}
);
};
export default Navbars;
================================================
FILE: app/(dashboard)/components/navs/page.js
================================================
'use client'
// import node module libraries
import { Fragment } from 'react';
import { Col, Row, Card, Nav, Tabs, Tab, Container } from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
MenuNavCode,
MenuNavFlexCode,
AlignmentCenterCode,
AlignmentRightCode,
VerticalFlexCode,
VerticalULLICode,
TabsNavCode,
PillsNavsCode,
FillPillsULLICode,
FillPillsLinkCode,
FillPillsJustifyCode,
NavsFlexUtilitiesCode,
NavsTabsCode,
NavsTabsPillsCode,
VerticalPillsCode
} from 'data/code/NavsCode';
const Navs = () => {
return (
Navs
Documentation and examples for how to use Bootstrap’s included
navigation components.
{/* base-nav */}
Menu nav
Navigation bits in Bootstrap all share a general Nav{' '}
component and styles. Swap variants to switch between
each style.
The base Nav component is built with flexbox and
provide a strong foundation for building all types of navigation
components.
{/* code started */}
{/* end of code */}
{/* end of base-nav */}
{/* base-nav */}
<Nav> markup is very flexible and styling is
controlled via classes so you can use whatever elements you like
to build your navs. By default
<Nav> and <Nav.Item> both
render <div>s instead of
<ul> and <li> elements
respectively. This because it's possible (and common) to leave off
the <Nav.Item>'s and render a{' '}
<Nav.Link> directly, which would create invalid
markup by default (ul < a).
{/* code started */}
{/* end of code */}
{/* end of base-nav */}
{/* available-styles */}
Available styles
Change the style of <Nav>s component with
modifiers and utilities. Mix and match as needed, or build your
own.
Horizontal alignment
You can control the the direction and orientation of the Nav by
making use of the{' '}
flexbox layout
{' '}
utility classes. By default, navs are left-aligned, but that is
easily changed to center or right-aligned.
Centered with .justify-content-center:
{/* code started */}
{/* end of code */}
{/* end of available-styles */}
{/* right-aligned */}
Right-aligned with .justify-content-end:
{/* code started */}
{/* end of code */}
{/* end of right-aligned */}
{/* vertical */}
Vertical
Create stacked navs by changing the flex item direction with the{' '}
.flex-column class, or your own css. You can even use
the responsive versions to stack in some viewports but not others
( e.g. .flex-sm-column ).
{/* code started */}
{/* end of code */}
{/* end of vertical */}
{/* vertical-nav-second */}
As always, vertical navigation is possible without{' '}
<ul>s, too.
{/* code started */}
{/* end of code */}
{/* end of vertical-nav-second */}
{/* tabs */}
Tabs
Visually represent nav items as "tabs". This style pairs nicely
with tabbable regions created by our Tab components.
Note: creating a vertical nav (
.flex-column) with tabs styling is unsupported by
Bootstrap's default stylesheet.
{/* code started */}
{/* end of code */}
{/* end of tabs */}
{/* pills */}
Pills
An alternative visual with variant="pills" prop
{/* code started */}
{/* end of code */}
{/* end of pills */}
{/* fill-and-justify */}
Fill and justify
Force the contents of your nav to extend the full available width.
To proportionately fill the space use fill. Notice
that the nav is the entire width but each nav item is a different
size.
{/* code started */}
{/* end of code */}
{/* end of fill-and-justify */}
{/* Nav justify second */}
When using a <Nav> based navigation without{' '}
as prop, it will generate anchors in{' '}
<div>.
{/* code started */}
{/* end of code */}
{/* end of Nav justify second */}
{/* Nav justify third */}
If you want each NavItem to be the same size use{' '}
justify.
{/* code started */}
{/* end of code */}
{/* end of Nav justify third */}
{/* working-with-flex-utilities */}
Working with flex utilities
If you need responsive nav variations, consider using a series of
flexbox utilities. While more verbose, these utilities offer
greater customization across responsive breakpoints. In the
example below, our nav will be stacked on the lowest breakpoint,
then adapt to a horizontal layout that fills the available width
starting from the small breakpoint.
{/* code started */}
{/* end of code */}
{/* end of working-with-flex-utilities */}
{/* JavaScript behavior */}
JavaScript behavior ( Tabs )
Create dynamic tabbed interfaces, as described in the{' '}
WAI ARIA Authoring Practices
. Tabs is a higher-level component for quickly
creating a Nav matched with a set of{' '}
TabPanes.
{/* code started */}
Home Tab - Consequat occaecat ullamco
amet non eiusmod nostrud dolore irure incididunt est
duis anim sunt officia. Fugiat velit proident aliquip
nisi incididunt nostrud exercitation proident est nisi.
Irure magna elit commodo anim ex veniam culpa eiusmod id
nostrud sit cupidatat in veniam ad. Eiusmod consequat eu
adipisicing minim anim aliquip cupidatat culpa excepteur
quis. Occaecat sit eu exercitation irure Lorem
incididunt nostrud.
Profile Tab - Consequat occaecat
ullamco amet non eiusmod nostrud dolore irure incididunt
est duis anim sunt officia. Fugiat velit proident
aliquip nisi incididunt nostrud exercitation proident
est nisi. Irure magna elit commodo anim ex veniam culpa
eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod
consequat eu adipisicing minim anim aliquip cupidatat
culpa excepteur quis. Occaecat sit eu exercitation irure
Lorem incididunt nostrud.
Contact Tab - Consequat occaecat
ullamco amet non eiusmod nostrud dolore irure incididunt
est duis anim sunt officia. Fugiat velit proident
aliquip nisi incididunt nostrud exercitation proident
est nisi. Irure magna elit commodo anim ex veniam culpa
eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod
consequat eu adipisicing minim anim aliquip cupidatat
culpa excepteur quis. Occaecat sit eu exercitation irure
Lorem incididunt nostrud.
{/* end of code */}
{/* end of JavaScript behavior */}
{/* javascript behavior pills */}
The tabs plugin also works with pills.
{/* code started */}
Home Tab - Consequat occaecat ullamco
amet non eiusmod nostrud dolore irure incididunt est
duis anim sunt officia. Fugiat velit proident aliquip
nisi incididunt nostrud exercitation proident est nisi.
Irure magna elit commodo anim ex veniam culpa eiusmod id
nostrud sit cupidatat in veniam ad. Eiusmod consequat eu
adipisicing minim anim aliquip cupidatat culpa excepteur
quis. Occaecat sit eu exercitation irure Lorem
incididunt nostrud.
Profile Tab - Consequat occaecat
ullamco amet non eiusmod nostrud dolore irure incididunt
est duis anim sunt officia. Fugiat velit proident
aliquip nisi incididunt nostrud exercitation proident
est nisi. Irure magna elit commodo anim ex veniam culpa
eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod
consequat eu adipisicing minim anim aliquip cupidatat
culpa excepteur quis. Occaecat sit eu exercitation irure
Lorem incididunt nostrud.
Contact Tab - Consequat occaecat
ullamco amet non eiusmod nostrud dolore irure incididunt
est duis anim sunt officia. Fugiat velit proident
aliquip nisi incididunt nostrud exercitation proident
est nisi. Irure magna elit commodo anim ex veniam culpa
eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod
consequat eu adipisicing minim anim aliquip cupidatat
culpa excepteur quis. Occaecat sit eu exercitation irure
Lorem incididunt nostrud.
{/* end of code */}
{/* end of javascript behavior pills */}
{/* vertical pills */}
And with vertical pills.
{/* code started */}
Home Tab - Consequat occaecat
ullamco amet non eiusmod nostrud dolore irure
incididunt est duis anim sunt officia. Fugiat
velit proident aliquip nisi incididunt nostrud
exercitation proident est nisi. Irure magna elit
commodo anim ex veniam culpa eiusmod id nostrud
sit cupidatat in veniam ad. Eiusmod consequat eu
adipisicing minim anim aliquip cupidatat culpa
excepteur quis. Occaecat sit eu exercitation irure
Lorem incididunt nostrud.
Profile Tab - Consequat occaecat
ullamco amet non eiusmod nostrud dolore irure
incididunt est duis anim sunt officia. Fugiat
velit proident aliquip nisi incididunt nostrud
exercitation proident est nisi. Irure magna elit
commodo anim ex veniam culpa eiusmod id nostrud
sit cupidatat in veniam ad. Eiusmod consequat eu
adipisicing minim anim aliquip cupidatat culpa
excepteur quis. Occaecat sit eu exercitation irure
Lorem incididunt nostrud.
Messages Tab - Consequat occaecat
ullamco amet non eiusmod nostrud dolore irure
incididunt est duis anim sunt officia. Fugiat
velit proident aliquip nisi incididunt nostrud
exercitation proident est nisi. Irure magna elit
commodo anim ex veniam culpa eiusmod id nostrud
sit cupidatat in veniam ad. Eiusmod consequat eu
adipisicing minim anim aliquip cupidatat culpa
excepteur quis. Occaecat sit eu exercitation irure
Lorem incididunt nostrud.
Settings Tab - Consequat occaecat
ullamco amet non eiusmod nostrud dolore irure
incididunt est duis anim sunt officia. Fugiat
velit proident aliquip nisi incididunt nostrud
exercitation proident est nisi. Irure magna elit
commodo anim ex veniam culpa eiusmod id nostrud
sit cupidatat in veniam ad. Eiusmod consequat eu
adipisicing minim anim aliquip cupidatat culpa
excepteur quis. Occaecat sit eu exercitation irure
Lorem incididunt nostrud.
{/* end of code */}
{/* end of vertical pills */}
);
};
export default Navs;
================================================
FILE: app/(dashboard)/components/offcanvas/page.js
================================================
'use client'
// import node module libraries
import { Fragment, useState } from 'react';
import {
Col,
Row,
Card,
Button,
Nav,
Tab,
Offcanvas,
ListGroup,
Container
} from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
OffcanvasBasicCode,
OffCanvasPlacementCode,
OffCanvasBackdropCode
} from 'data/code/OffcanvasCode';
const BSOffcanvas = () => {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const options = [
{
name: 'Enable backdrop (default)',
scroll: false,
backdrop: true
},
{
name: 'Disable backdrop',
scroll: false,
backdrop: false
},
{
name: 'Enable body scrolling',
scroll: true,
backdrop: false
},
{
name: 'Enable both scrolling & backdrop',
scroll: true,
backdrop: true
}
];
function OffCanvasPlacement({ name, ...props }) {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
Offcanvas
Some text as placeholder. In real life you can have the elements you
have chosen. Like, text, images, lists, etc.
);
}
function OffCanvasBackdrop({ name, ...props }) {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const toggleShow = () => setShow((s) => !s);
return (
Offcanvas
Some text as placeholder. In real life you can have the elements you
have chosen. Like, text, images, lists, etc.
);
}
return (
Offcanvas
Build hidden sidebars into your project for navigation, shopping
carts, and more.
{/* basic */}
Basic
Offcanvas includes support for a header with a close button and an
optional body class for some initial padding.
{/* basic offcanvas code started */}
Offcanvas
Some text as placeholder. In real life you can have the
elements you have chosen. Like, text, images, lists,
etc.
{/* end of basic offcanvas code */}
{/* end of basic */}
{/* placement */}
Placement
Offcanvas supports a few different placements:
start places offcanvas on the left of the viewport
end places offcanvas on the right of the viewport
top places offcanvas on the top of the viewport
bottom places offcanvas on the bottom of the
viewport
{/* placement code started */}
{['start', 'end', 'top', 'bottom'].map((placement, idx) => (
))}
{/* end of placement code */}
{/* end of placement */}
{/* backdrop */}
Backdrop
Scrolling the <body> element is disabled when
an offcanvas and its backdrop are visible. Use the{' '}
scroll prop to toggle <body>{' '}
scrolling and the backdrop prop to toggle the
backdrop.
Overlay is the fundamental component for positioning and
controlling tooltip visibility. It's a wrapper around Popper.js,
that adds support for transitions, and visibility toggling.
{/* basic */}
Basic
Overlays consist of at least two elements, the "overlay", the
element to be positioned, as well as a "target", the element the
overlay is positioned in relation to. You can also also have an
"arrow" element, like the tooltips and popovers, but that is
optional.
)}
{/* end of basic offcanvas code */}
{/* end of basic */}
{/* overlay-trigger */}
OverlayTrigger
Since the above pattern is pretty common, but verbose, we've
included <OverlayTrigger> component to help
with common use-cases. It even has functionality to delayed show
or hides, and a few different "trigger" events you can mix and
match.
{/* basic offcanvas code started */}
{/* end of basic offcanvas code */}
{/* end of overlay-trigger */}
{/* trigger behavior */}
Customizing trigger behavior
For more advanced behaviors <OverlayTrigger>{' '}
accepts a function child that passes in the injected{' '}
ref and event handlers that correspond to the
configured trigger prop.
{/* trigger behavior code started */}
Check out this avatar
}
>
{({ ref, ...triggerHandler }) => (
)}
{/* end of trigger behavior code */}
{/* end of trigger behavior */}
);
};
export default Overlays;
================================================
FILE: app/(dashboard)/components/pagination/page.js
================================================
'use client'
// import node module libraries
import { Fragment } from 'react';
import Link from 'next/link';
import { Col, Row, Card, Pagination, Nav, Tab, Container } from 'react-bootstrap';
import {
ChevronsLeft,
ChevronLeft,
ChevronRight,
ChevronsRight
} from 'react-feather';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
DefaultPaginationCode,
PaginationWithIconsCode,
DisabledActiveCode,
PaginationSizingCode,
PaginationSizingSmallCode,
AlignmentCode,
JustifyContentEndCode
} from 'data/code/PaginationsCode';
const Paginations = () => {
return (
Pagination
Documentation and examples for showing pagination to indicate a
series of related content exists across multiple pages.
{/* default-pagination */}
Default Pagination
We use a large block of connected links for our pagination, making
links hard to miss and easily scalable—all while providing large
hit areas. Pagination is built with list HTML elements so screen
readers can announce the number of available links. Use a wrapping{' '}
<Pagination> component to identify it as a
navigation section to screen readers and other assistive
technologies.
Previous{1}{2}{3}Next
{/* end of default-pagination */}
{/* working-with-icons */}
Working with icons
Looking to use an icon or symbol in place of text for some
pagination links? Use <Pagination.First>,{' '}
<Pagination.Prev> ,{' '}
<Pagination.Next> and{' '}
<Pagination.Last> tags .
{1}{2}{3}
{/* end of working-with-icons */}
{/* disabled-and-active-states */}
Disabled and active states
Pagination links are customizable for different circumstances. Use{' '}
disabled prop for links that appear un-clickable and{' '}
active prop to indicate the current page.
Previous{1}{2}{3}Next
{/* end of disabled-and-active-states */}
{/* sizing */}
Sizing
Fancy larger or smaller pagination? Add size="lg" or{' '}
size="sm" for additional sizes.
{1}{2}{3}
{/* end of sizing */}
{/* sizing-small */}
{1}{2}{3}
{/* end of sizing-small */}
{/* alignment */}
Alignment
Change the alignment of pagination components with{' '}
flexbox utilities
.
Centered-aligned with .justify-content-center:
Previous{1}{2}{3}Next
{/* end of alignment */}
{/* justify-content-end */}
Right-aligned with .justify-content-end:
Previous{1}{2}{3}Next
{/* end of justify-content-end */}
);
};
export default Paginations;
================================================
FILE: app/(dashboard)/components/popovers/page.js
================================================
'use client'
// import node module libraries
import { Fragment } from 'react';
import {
Col,
Row,
Card,
OverlayTrigger,
Popover,
Button,
Nav,
Tab,
Container
} from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
DefaultPopoverCode,
FourDirectionsCode,
DismissableCode
} from 'data/code/PopoversCode';
const Popovers = () => {
return (
Popover
Documentation and examples for adding Bootstrap popovers, like
those found in iOS, to any element on your site.
{/* default-popover */}
Default Popovers
Popover title
And here's some amazing content. It's very engaging.
Right?
}
>
{/* end of default-popover */}
{/* four-direction */}
Four directions
Four options are available: top, right, bottom, and left aligned.
{['top', 'right', 'bottom', 'left'].map((placement) => (
{`Popover ${placement}`}Holy guacamole! Check this info.
}
>
))}
{/* end of four-direction */}
{/* dismiss on next click */}
Dismiss on next click
Use the trigger="focus" trigger to dismiss popovers
on the user’s next click of a different element than the toggle
element.
Popover title
And here's some amazing content. It's very engaging.
Right?
}
>
{/* end of dismiss on next click */}
);
};
export default Popovers;
================================================
FILE: app/(dashboard)/components/progress/page.js
================================================
'use client'
// import node module libraries
import { Fragment } from 'react';
import { Card, Col, Row, ProgressBar, Tab, Nav, Container } from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
DefaultProgressCode,
ProgressLabelsCode,
ProgressHeightCode,
ProgressBackgroundsCode,
MultipleBarsCode,
StripedCode,
AnimatedCode
} from 'data/code/ProgressCode';
const Progress = () => {
return (
Progress
Documentation and examples for using Bootstrap custom progress
bars featuring support for stacked bars, animated backgrounds,
and text labels.
{/* default-progress */}
How it works
Default progress bar.
{/* code started */}
{/* end of code */}
{/* end of default-progress */}
{/* highlighter-rouge */}
Labels
Add a label prop to show a visible percentage. For
low percentages, consider adding a min-width to ensure the label's
text is fully visible.
{/* code started */}
{/* end of code */}
{/* end of highlighter-rouge */}
{/* height */}
Height
We only set a height value on the{' '}
<ProgressBar>, so if you change that value the
inner progress-bar will automatically resize
accordingly.
{/* code started */}
{/* end of code */}
{/* end of height */}
{/* backgrounds */}
Backgrounds
Progress bars use some of the same button and alert classes like{' '}
variant for consistent styles.
{/* code started */}
{/* end of code */}
{/* end of backgrounds */}
{/* multiple-bars */}
Multiple bars
Nest <ProgressBar>s to stack them.
{/* code started */}
{/* end of code */}
{/* end of multiple-bars */}
{/* striped */}
Striped
Uses a gradient to create a striped effect. Not available in IE8.
You can apply using striped prop.{' '}
{/* code started */}
{/* end of code */}
{/* end of striped */}
{/* animated-stripes */}
Animated stripes
Add animated prop to animate the stripes right to
left. Not available in IE9 and below.
{/* code started */}
{/* end of code */}
{/* end of animated-stripes */}
);
};
export default Progress;
================================================
FILE: app/(dashboard)/components/spinners/page.js
================================================
'use client'
// import node module libraries
import { Fragment } from 'react';
import { Col, Row, Card, Spinner, Button, Nav, Tab, Container } from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
BorderSpinnerCode,
SpinnersColorsCode,
GrowingSpinnerCode,
GrowColorsCode,
AlignmentCode,
PlacementCenterCode,
PlacementLoadingCode,
FloatsCode,
TextAlignCode,
SizeSpinnersCode,
StyleCSSCode,
ButtonsCode,
Buttons2Code
} from 'data/code/SpinnersCode';
const Spinners = () => {
return (
Spinners
Indicate the loading state of a component or page with Bootstrap
spinners, built entirely with HTML, CSS, and no JavaScript.
{/* border-spinner */}
Border spinner
Use the border spinners for a lightweight loading indicator. Set{' '}
animation="border" to use it.
{/* code started */}
Loading...
{/* end of code */}
{/* end of border-spinner */}
{/* colors */}
Colors
All standard visual variants are available for border spinner
animation styles by setting the variant property.
Alternatively spinners can be custom sized with the{' '}
style property, or custom CSS classes.
{/* code started */}
{/* end of code */}
{/* end of colors */}
{/* growing-spinner */}
Growing spinner
Set animation="grow" to use it.
{/* code started */}
{/* end of code */}
{/* end of growing-spinner */}
{/* text color utilities */}
All standard visual variants are available for growing spinner
animation styles by setting the variant property.
Alternatively spinners can be custom sized with the{' '}
style property, or custom CSS classes.
{/* code started */}
{/* end of code */}
{/* end of text color utilities */}
{/* alignment */}
Alignment
Spinners in Bootstrap are built with rems,{' '}
variant prop etc... This means they can easily be
resized, recolored, and quickly aligned.
Margin
Use margin utilities like .m-5 for
easy spacing.
{/* code started */}
Loading...
{/* end of code */}
{/* end of alignment */}
{/* placement */}
Placement
Use flexbox utilities, float utilities,
or text alignment utilities to place spinners exactly
where you need them in any situation.
Flex
{/* code started */}
Loading...
{/* end of code */}
{/* end of placement */}
{/* placement 2 */}
{/* code started */}
Loading...Loading...
{/* end of code */}
{/* end of placement 2 */}
{/* floats */}
Floats
{/* code started */}
Loading...
{/* end of code */}
{/* end of floats */}
{/* text-align */}
Text align
{/* code started */}
Loading...
{/* end of code */}
{/* end of text-align */}
{/* size */}
Size
Add size="sm" to make a smaller spinner that can
quickly be used within other components.
{/* code started */}
{/* end of code */}
{/* end of size */}
{/* use custom CSS or inline styles */}
Or, use custom CSS or inline styles to change the dimensions as
needed.
{/* code started */}
{/* end of code */}
{/* end of use custom CSS or inline styles */}
{/* buttons */}
Buttons
Like the original Bootstrap spinners, these can also be used with
buttons. To use this component out-of-the-box it is recommended
you change the element type to span by configuring
the as property when using spinners inside buttons.
{/* code started */}
{/* end of code */}
{/* end of buttons */}
{/* buttons 2 */}
{/* code started */}
{/* end of code */}
{/* end of buttons 2 */}
);
};
export default Spinners;
================================================
FILE: app/(dashboard)/components/tables/page.js
================================================
'use client'
// import node module libraries
import { Fragment } from 'react';
import { Col, Row, Card, Table, Nav, Tab, Container } from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import {
BasicTableCode,
DarkTableCode,
TableHeadCode,
StripedTableCode,
TableVariantCode,
BorderedTableCode,
BorderlessTableCode,
HoverableRowsCode,
SmallTableCode,
ContextualClassesCode,
ResponsiveTableCode
} from 'data/code/TablesCode';
const Tables = () => {
return (
Tables
Documentation and examples for opt-in styling of tables (given
their prevalent use in JavaScript plugins) with Bootstrap.
{/* */}
Examples
{/* code started */}
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
{/* end of code */}
{/* end of */}
{/* dark table */}
Use variant="dark" to invert the colors of the table
and get light text on a dark background.
{/* code started */}
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
{/* end of code */}
{/* end of dark table */}
{/* */}
Table head options
Similar to tables and dark tables, use the modifier classes{' '}
.table-light or .table-dark to make{' '}
<thead>s appear light or dark gray.
{/* code started */}
#
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
{/* end of code */}
{/* end of */}
{/* striped-rows */}
Striped rows
Use the striped prop to customise the table.
{/* code started */}
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
{/* end of code */}
{/* end of striped-rows */}
{/* striped-rows bg */}
Use variant prop to table variants:
{/* code started */}
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
{/* end of code */}
{/* end of striped-rows bg */}
{/* bordered-table */}
Bordered table
Add bordered prop for borders on all sides of the
table and cells.
{/* code started */}
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
{/* end of code */}
{/* end of bordered-table */}
{/* borderless-table */}
Borderless table
{/* code started */}
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
{/* end of code */}
{/* end of borderless-table */}
{/* hoverable-rows */}
Hoverable rows
Add hover prop to enable a hover state on table rows
within a <tbody>.
{/* code started */}
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
{/* end of code */}
{/* end of hoverable-rows */}
{/* small-table */}
Small table
Add .table-sm to make tables more compact by cutting
cell padding in half.
{/* code started */}
#
First
Last
Handle
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
{/* end of code */}
{/* end of small-table */}
{/* contextual-classes */}
Variants
Use contextual classes to color table rows or individual cells.
{/* code started */}
Class
Heading
Heading
Active
Cell
Cell
Default
Cell
Cell
Primary
Cell
Cell
Secondary
Cell
Cell
Success
Cell
Cell
Danger
Cell
Cell
Warning
Cell
Cell
Info
Cell
Cell
Light
Cell
Cell
Dark
Cell
Cell
{/* end of code */}
{/* end of contextual-classes */}
{/* responsive-tables */}
Responsive tables
Responsive tables allow tables to be scrolled horizontally with
ease.
Across every breakpoint, use responsive for horizontally scrolling
tables. Responsive tables are wrapped automatically in a{' '}
div.
Use responsive="sm", responsive="md",{' '}
responsive="lg", or responsive="xl" as
needed to create responsive tables up to a particular breakpoint.
From that breakpoint and up, the table will behave normally and
not scroll horizontally.
Push notifications to your visitors with a toast, a lightweight
and easily customizable alert message.
{/* basic */}
Basic
To encourage extensible and predictable toasts, we recommend a
header and body. Toast headers use display: flex, allowing easy
alignment of content thanks to our margin and flexbox utilities.
Toasts are as flexible as you need and have very little required
markup. At a minimum, we require a single element to contain
your “toasted” content and strongly encourage a dismiss button.
{/* code started */}
Bootstrap
11 mins ago
Hello, world! This is a toast message.
{/* end of code */}
{/* end of basic */}
{/* translucent */}
Translucent
{/* code started */}
Bootstrap
just now
See? Just like this.
{/* end of code */}
{/* end of translucent */}
{/* stacking */}
Stacking
When you have multiple toasts, we default to vertically stacking
them in a readable manner.
{/* code started */}
Bootstrap
just now
See? Just like this.Bootstrap
2 seconds ago
Heads up, toasts will stack automatically
{/* end of code */}
{/* end of stacking */}
{/* placement */}
Placement
Place toasts with custom CSS as you need them. The top right is
often used for notifications, as is the top middle.
Bootstrap
11 mins ago
Hello, world! This is a toast message.
{/* end of code */}
{/* end of placement */}
{/* placement */}
For systems that generate more notifications, consider using a
wrapping element so they can easily stack.
{/* code started */}
Bootstrap
just now
See? Just like this.Bootstrap
2 seconds ago
Heads up, toasts will stack automatically
{/* end of code */}
{/* end of placement */}
{/* placement */}
You can also get fancy with flexbox utilities to align toasts
horizontally and/or vertically.
{/* code started */}
Bootstrap
11 mins ago
Hello, world! This is a toast message.
{/* end of code */}
{/* end of placement */}
{/* dismissible */}
Dismissible
{/* code started */}
Bootstrap
just now
See? Just like this.
Bootstrap
2 seconds ago
Heads up, toasts will stack automatically
{/* end of code */}
{/* end of dismissible */}
);
};
export default Toasts;
================================================
FILE: app/(dashboard)/components/tooltips/page.js
================================================
'use client'
// import node module libraries
import { Fragment } from 'react';
import {
Col,
Row,
Card,
OverlayTrigger,
Tooltip,
Button,
Nav,
Tab,
Container
} from 'react-bootstrap';
// import widget/custom components
import { HighlightCode } from 'widgets';
// import react code data file
import { BasicTooltip } from 'data/code/TooltipsCode';
const Tooltips = () => {
return (
Tooltips
Documentation and examples for adding custom Bootstrap tooltips.
A tooltip component for a more stylish alternative to that
anchor tag title attribute.
{/* tooltips */}
Examples
Hover over the buttons below to see the four tooltips directions:
top, right, bottom, and left. You can pass the{' '}
Overlay injected props directly to the Tooltip
component.
{['top', 'right', 'bottom', 'left'].map((placement) => (
Tooltip on {placement}.
}
>
))}
{/* end of tooltips */}
);
};
export default Tooltips;
================================================
FILE: app/(dashboard)/documentation/page.js
================================================
'use client'
import Link from 'next/link';
// import node module libraries
import { Card, Col, Row, Container } from 'react-bootstrap';
const Documentation = () => {
return (
Dash UI NextJS
Welcome to the Dash UI NextJS version of the original Dash UI theme.
Getting Started
A professional Dash UI NextJS Kit that comes with plenty of
ready-to-use components that will help you to build more
beautiful application (web app).
Dash UI Kit is built with the most popular front-end framework{' '}
ReactJS Bootstrap
{' '}
with react-scripts.
This doc will guide you to understand how Dash UI-NextJS theme is
organized, basics of how to customize, and how to compile from
the source code if you want.
Running in Local environment
This project is scaffolded using npx create-next-app@latest.
Requirements Node.js
Before proceeding you'll need to have the latest stable{' '}
{' '}
nodejs.
{' '}
Install Node.js or already have it installed on
your machine move to next step.
{' '}
Install Dash UI NextJS
Open the dashui-free-nextjs-admin-template directory with your cmd
or terminal. Open the project folder and install its
dependencies.{' '}
cd dashui-free-nextjs-admin-template{' '}
npm install{' '}
This command will download all the necessary dependencies
for dash UI in the node_modules directory.
Start
Run npm run dev or yarn dev or pnpm dev to start the development server on http://localhost:3000
Edit pages/index.js and see the updated result in your browser
npm run dev
Creating a Production Build.
Production build of your app.
Run npm run build command in your project
directory to make the Production build app.
npm run build
This output is generated inside the .next folder:
npm run start
Once you execute above command, the production build run
locally at http://localhost:3000.
API Demo:
Here is an API demo using fetch , click here
File Structure:
Inside the zip-file you'll find the following directories and
files. Both compiled and minified distrubution files, as well as
the source files are included in the package.
{/* About Me */}
{/* Projects Contributions */}
{/* Recent From Blog */}
{/* My Team */}
{/* Activity Feed */}
)
}
export default Profile
================================================
FILE: app/(dashboard)/pages/settings/page.js
================================================
'use client'
// import node module libraries
import { Container } from 'react-bootstrap';
// import widget as custom components
import { PageHeading } from 'widgets'
// import sub components
import { Notifications, DeleteAccount, GeneralSetting, EmailSetting, Preferences } from 'sub-components'
const Settings = () => {
return (
{/* Page Heading */}
{/* General Settings */}
{/* Email Settings */}
{/* // DONE ... */}
{/* Settings for Preferences */}
{/* // DONE ... */}
{/* Settings for Notifications */}
{/* */}
{/* Delete Your Account */}
)
}
export default Settings
================================================
FILE: app/layout.js
================================================
// import theme style scss file
import Link from 'next/link';
import 'styles/theme.scss';
export const metadata = {
title: 'Dash UI - Next.Js Admin Dashboard Template',
description: 'Dash UI - Next JS admin dashboard template is free and available on GitHub. Create your stunning web apps with our Free Next js template. An open-source admin dashboard built using the new router, server components, and everything new in Next.js 13.',
keywords: 'Dash UI, Next.js 13, Admin dashboard, admin template, web apps, bootstrap 5, admin theme'
}
export default function RootLayout({ children }) {
return (
{children}
{' '} Buy Now
)
}
================================================
FILE: app/not-found.js
================================================
'use client'
// import node module libraries
import { Col, Row, Image, Container } from 'react-bootstrap';
import Link from 'next/link';
// import hooks
import useMounted from 'hooks/useMounted';
import { Fragment } from 'react';
const NotFound = () => {
const hasMounted = useMounted();
return (
{hasMounted &&
Oops! the page not found.
Or simply leverage the expertise of our consultation
team.
Go Home
}
);
};
export default NotFound;
================================================
FILE: components/CopyToClipboardButton.js
================================================
import React, { useState } from 'react';
const CopyToClipboardButton = ({ textToCopy }) => {
const [copied, setCopied] = useState(false);
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(textToCopy);
setCopied(true);
setTimeout(() => setCopied(false), 2000); // Reset 'copied' state after 2 seconds
} catch (err) {
console.error('Failed to copy text: ', err);
// Handle error, e.g., show an error message to the user
}
};
return (
);
};
export default CopyToClipboardButton;
================================================
FILE: components/bootstrap/DotBadge.js
================================================
'use client'
/***************************
Component : DotBadge
****************************
Availalble Parameters
bg : Optional ( default = primary ), possible bg options are, primary, light-primary, secondary, light-secondary etc...
*/
// import node module libraries
import React from 'react';
import PropTypes from 'prop-types';
import { Badge } from 'react-bootstrap';
const DotBadge = (props = {
bg: 'light-primary',
className:'me-2'
}) => {
return (
{props.children}
);
};
DotBadge.propTypes = {
bg: PropTypes.string,
className: PropTypes.string
};
export default DotBadge;
================================================
FILE: data/Notification.js
================================================
const Notification = [
{
id: 1,
sender: 'Rishi Chopra',
message: `Mauris blandit erat id nunc blandit, ac eleifend dolor pretium.`
},
{
id: 2,
sender: 'Neha Kannned',
message: `Proin at elit vel est condimentum elementum id in ante. Maecenas et sapien metus.`
},
{
id: 3,
sender: 'Nirmala Chauhan',
message: `Morbi maximus urna lobortis elit sollicitudin sollicitudieget elit vel pretium.`
},
{
id: 4,
sender: 'Sina Ray',
message: `Sed aliquam augue sit amet mauris volutpat hendrerit sed nunc eu diam.`
}
];
export default Notification;
================================================
FILE: data/code/AccordionCode.js
================================================
export const AccordionBasicCode = `
Accordion Item #1This is the accordion body of item 1. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go within the <Accordion.Item> → <Accordion.Body> though the transition does limit overflow.
Accordion Item #2This is the accordion body of item 2. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go within the <Accordion.Item> → <Accordion.Body> though the transition does limit overflow.
Accordion Item #3This is the accordion body of item 3. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go within the <Accordion.Item> → <Accordion.Body> though the transition does limit overflow.
`.trim();
export const AccordionFlushCode = `
Accordion Item #1This is the accordion body of item 1. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go within the <Accordion.Item> → <Accordion.Body> though the transition does limit overflow.
Accordion Item #2This is the accordion body of item 2. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go within the <Accordion.Item> → <Accordion.Body> though the transition does limit overflow.
Accordion Item #3This is the accordion body of item 3. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element.
These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.
It's also worth noting that just about any HTML can go within the <Accordion.Item> → <Accordion.Body> though the transition does limit overflow.
`.trim();
export const AccordionCode = [AccordionBasicCode, AccordionFlushCode];
export default AccordionCode;
================================================
FILE: data/code/AlertsCode.js
================================================
export const SimpleAlert = `
This is a primary alert—check it out!This is a secondary alert—check it out!This is a success alert—check it out!This is a danger alert—check it out!This is a warning alert—check it out!This is a info alert—check it out!This is a light alert—check it out!This is a dark alert—check it out!
`.trim();
export const LinkAlert = `
This is a primary alert with an example link. Give it a click if you like.
This is a secondary alert with an example link. Give it a click if you like.
This is a success alert with an example link. Give it a click if you like.
This is a danger alert with an example link. Give it a click if you like.
This is a warning alert with an example link. Give it a click if you like.
This is a info alert with an example link. Give it a click if you like.
This is a light alert with an example link. Give it a click if you like.
This is a dark alert with an example link. Give it a click if you like.
`.trim();
export const AdditionalAlert = `
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.
`.trim();
export const AlertWithIcon = `
// import below bootstrap icons from react-bootstrap-icons library before using those
import { ExclamationCircleFill, CheckCircleFill, ExclamationTriangleFill } from 'react-bootstrap-icons';
An example alert with an iconAn example success alert with an iconAn example warning alert with an iconAn example danger alert with an icon
`.trim();
export const DismissingAlert = `
const AlertDismissible = () => {
const [show, setShow] = useState(true);
if (show) {
return (
setShow(false)} dismissible>
Holy guacamole!You should check in on some of those fields below.
);
}
return ;
}
render();
`.trim();
export const AlertsCode = [
SimpleAlert,
LinkAlert,
AdditionalAlert,
AlertWithIcon,
DismissingAlert
];
export default AlertsCode;
================================================
FILE: data/code/BadgesCode.js
================================================
export const SimpleBadgeCode = `
`.trim();
export const ButtonIconsCode = `
`.trim();
export const ButtonIcons2Code = `
`.trim();
export const ButtonIconsSizeCode = `
`.trim();
export const ActiveStateCode = `
`.trim();
export const DisabledStateCode = `
`.trim();
export const ToggleStatesCode = `
Toggle buttonActive toggle buttonDisabled toggle button
`.trim();
export const ButtonsCode = [
RegularButtonCode,
ButtonTagsCode,
OutlineButtonsCode,
ButtonSizesCode,
BlockButtonCode,
ResponsiveButtonCode,
BlockButtonWidthCode,
ButtonAlignmentCode,
ButtonIconsCode,
ButtonIcons2Code,
ButtonIconsSizeCode,
ActiveStateCode,
DisabledStateCode,
ToggleStatesCode
];
export default ButtonsCode;
================================================
FILE: data/code/CardsCode.js
================================================
export const BasicCardCode = `
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
`.trim();
export const CardBodyCode = `
This is some text within a card body.
`.trim();
export const TitlesTextLinksCode = `
Card TitleCard Subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card LinkAnother Link
`.trim();
export const ListGroups1Code = `
Cras justo odioDapibus ac facilisis inVestibulum at eros
`.trim();
export const ListGroups2Code = `
FeaturedCras justo odioDapibus ac facilisis inVestibulum at eros
`.trim();
export const CardImagesCode = `
Some quick example text to build on the card title and make up the bulk of the card's content.
`.trim();
export const KitchenSinkCode = `
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Cras justo odioDapibus ac facilisis inVestibulum at erosCard LinkAnother Link
`.trim();
export const HeaderFooterCode = `
FeaturedSpecial title treatment
With supporting text below as a natural lead-in to additional content.
`.trim();
export const HeaderFooterCode2 = `
FeaturedSpecial title treatment
With supporting text below as a natural lead-in to additional content.
2 days ago
`.trim();
export const TextAlignmentCode = `
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
`.trim();
export const ImagesTopBottomCode = `
Card title
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Last updated 3 mins ago
`.trim();
export const ImageOverlaysCode = `
Card title
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
Last updated 3 mins ago
`.trim();
export const CardsCode = [
BasicCardCode,
CardBodyCode,
TitlesTextLinksCode,
ListGroups1Code,
ListGroups2Code,
CardImagesCode,
KitchenSinkCode,
HeaderFooterCode,
HeaderFooterCode2,
TextAlignmentCode,
ImagesTopBottomCode,
ImageOverlaysCode
];
export default CardsCode;
================================================
FILE: data/code/CarouselsCode.js
================================================
export const SlidesOnlyCode = `
`.trim();
export const WithControlCode = `
`.trim();
export const WithIndicatorsCode = `
`.trim();
export const WithCaptionCode = `
function ControlledCarousel() {
const [index, setIndex] = useState(0);
const handleSelect = (selectedIndex, e) => {
setIndex(selectedIndex);
};
return (
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred nesciunt sapiente ea proident.
`.trim();
export const MenuAlignmentCode = `
Action
Another action
Something else here
Separated link
Action
Another action
Something else here
Separated link
`.trim();
export const ResponsiveMenuAlignmentCode1 = `
ActionAnother actionSomething else hereSeparated link
`.trim();
export const ResponsiveMenuAlignmentCode2 = `
ActionAnother actionSomething else hereSeparated link
`.trim();
export const MenuContentCode = `
Dropdown headerAnother actionSomething else here
`.trim();
export const DividersCode = `
ActionAnother actionSomething else hereSeparated link
`.trim();
export const FormsCode1 = `
New around here? Sign upForgot password?
`.trim();
export const FormsCode2 = `
`.trim();
export const DropdownsCode = [
BasicDropdownCode,
SplitDropdownCode,
DropdownVariantCode,
DropdownSizingCode,
DirectionsCode,
MenuAlignmentCode,
ResponsiveMenuAlignmentCode1,
ResponsiveMenuAlignmentCode2,
MenuContentCode,
DividersCode,
FormsCode1,
FormsCode2
];
export default DropdownsCode;
================================================
FILE: data/code/ListgroupsCode.js
================================================
export const BasicListgroupCode = `
Cras justo odioDapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros
`.trim();
export const ActiveItemCode = `
Cras justo odioDapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros
`.trim();
export const DisabledItemsCode = `
Cras justo odioDapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros
`.trim();
export const LinksButtonsCode = `
Cras justo odioDapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros
`.trim();
export const ListButtonCode = `
Cras justo odioDapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros
`.trim();
export const FlushListgroupCode = `
Cras justo odioDapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros
`.trim();
export const HorizontalListgroupCode = `
Cras justo odioDapibus ac facilisis inMorbi leo risus
`.trim();
export const HorizontalListgroupCode2 = `
Cras justo odioDapibus ac facilisis inMorbi leo risus
`.trim();
export const ContextualClassesCode = `
Dapibus ac facilisis inThis is a Primary list group itemThis is a Secondary list group itemThis is a Success list group itemThis is a Danger list group itemThis is a Warning list group itemThis is a Info list group itemThis is a Light list group itemThis is a Dark list group item
`.trim();
export const WithBadgesCode = `
Cras justo odio 14Dapibus ac facilisis in 2Morbi leo risus 1
`.trim();
export const CustomContentCode = `
List group item heading
3 days ago
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.
List group item heading
3 days ago
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.
List group item heading
3 days ago
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.
`.trim();
export const WithIconCode = `
12 hours video
Certificate
12 Article
Watch Offline
Lifetime access
`.trim();
export const GroupWithIconCode = `
// Below import is required to use DotBadge custom component
// import DotBadge from './DotBadge';
Post ID
Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
\`
return (
setScrollShow(false)} >
Modal title
)
}
`.trim();
export const VerticallyCenteredCode = `
const Modals = () => {
function MyVerticallyCenteredModal(props) {
return (
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
);
}
const [modalShow, setModalShow] = React.useState(false);
return (
setModalShow(false)} />
)
}
`.trim();
export const TooltipsPopoversCode = `
const Modals = () => {
const [popoverTipShow , setpopoverTipShow] = useState(false);
return (
setpopoverTipShow(false)}>
Modal title
Popover in a modal
This{' '}
Popover title
Popover body content is set in this attribute.
)}>
triggers a popover on click.
Tooltips in a modal
Tooltip
}>
This Link
and
Tooltip
}>
That Link
have tooltips on hover.
)
}
`.trim();
export const OptionalSizesCode = `
const Modals = () => {
const [smShow, setSmShow] = useState(false);
const [mdShow, setMdShow] = useState(false);
const [lgShow, setLgShow] = useState(false);
return (
{' '}
{' '}
setSmShow(false)} aria-labelledby="example-modal-sizes-title-sm" >
Small modal
... setLgShow(false)} aria-labelledby="example-modal-sizes-title-lg" >
Extra large modal
... setMdShow(false)} aria-labelledby="example-modal-sizes-title-lg" >
Large modal
...
)
}
`.trim();
export const ModalsCode = [
SampleExamplesCode,
LiveDemoCode,
LongContentCode,
ScrollableModalCode,
VerticallyCenteredCode,
TooltipsPopoversCode,
OptionalSizesCode
];
export default ModalsCode;
================================================
FILE: data/code/NavbarsCode.js
================================================
export const DefaultNavbar = `
`.trim();
export const BrandNavbar = `
`.trim();
export const ColorSchemesCode = `
`.trim();
export const NavbarsCode = [DefaultNavbar, BrandNavbar, ColorSchemesCode];
export default NavbarsCode;
================================================
FILE: data/code/NavsCode.js
================================================
export const MenuNavCode = `
`.trim();
export const MenuNavFlexCode = `
`.trim();
export const AlignmentCenterCode = `
`.trim();
export const AlignmentRightCode = `
`.trim();
export const VerticalFlexCode = `
`.trim();
export const VerticalULLICode = `
`.trim();
export const TabsNavCode = `
`.trim();
export const PillsNavsCode = `
`.trim();
export const FillPillsULLICode = `
`.trim();
export const FillPillsLinkCode = `
`.trim();
export const FillPillsJustifyCode = `
`.trim();
export const NavsFlexUtilitiesCode = `
`.trim();
export const NavsTabsCode = `
Home Tab - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia.
Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex
veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip
cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Profile Tab - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia.
Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex
veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip
cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Contact Tab - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia.
Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex
veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip
cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
`.trim();
export const NavsTabsPillsCode = `
Home Tab - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia.
Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex
veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip
cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Profile Tab - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia.
Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex
veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip
cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Contact Tab - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia.
Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex
veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip
cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
`.trim();
export const VerticalPillsCode = `
Home Tab - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia.
Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex
veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip
cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Profile Tab - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia.
Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex
veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip
cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Messages Tab - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia.
Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex
veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip
cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Settings Tab - Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia.
Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex
veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip
cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
`.trim();
export const NavsCode = [
MenuNavCode,
MenuNavFlexCode,
AlignmentCenterCode,
AlignmentRightCode,
VerticalFlexCode,
VerticalULLICode,
TabsNavCode,
PillsNavsCode,
FillPillsULLICode,
FillPillsLinkCode,
FillPillsJustifyCode,
NavsFlexUtilitiesCode,
NavsTabsCode,
NavsTabsPillsCode,
VerticalPillsCode
];
export default NavsCode;
================================================
FILE: data/code/OffcanvasCode.js
================================================
export const OffcanvasBasicCode = `
const BSOffCanvas = () => {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
Offcanvas
Some text as placeholder. In real life you can have the elements you
have chosen. Like, text, images, lists, etc.
);
}
export default BSOffCanvas;
`.trim();
export const OffCanvasPlacementCode = `
const BSOffCanvas = () => {
function OffCanvasPlacement({ name, ...props }) {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
Offcanvas
Some text as placeholder. In real life you can have the elements you
have chosen. Like, text, images, lists, etc.
);
}
return (
{['start', 'end', 'top', 'bottom'].map((placement, idx) => (
))}
);
}
export default BSOffCanvas;
`.trim();
export const OffCanvasBackdropCode = `
const BSOffCanvas = () => {
const options = [
{
name: 'Enable backdrop (default)',
scroll: false,
backdrop: true,
},
{
name: 'Disable backdrop',
scroll: false,
backdrop: false,
},
{
name: 'Enable body scrolling',
scroll: true,
backdrop: false,
},
{
name: 'Enable both scrolling & backdrop',
scroll: true,
backdrop: true,
},
];
function OffCanvasBackdrop({ name, ...props }) {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const toggleShow = () => setShow((s) => !s);
return (
<>
Offcanvas
Some text as placeholder. In real life you can have the elements you
have chosen. Like, text, images, lists, etc.
);
}
return (
{options.map((props, idx) => (
))}
);
}
export default BSOffCanvas;
`.trim();
export const OffcanvasCode = [
OffcanvasBasicCode,
OffCanvasPlacementCode,
OffCanvasBackdropCode
];
export default OffcanvasCode;
================================================
FILE: data/code/OverlaysCode.js
================================================
export const OverlayBasicCode = `
const Overlays = () => {
const [show, setShow] = useState(false);
const target = useRef(null);
return (
{({ placement, arrowProps, show: _show, popper, ...props }) => (
)
}
export default Charts
================================================
FILE: sub-components/dashboard/Teams.js
================================================
// import node module libraries
import React from "react";
import Link from 'next/link';
import { Card, Table, Dropdown, Image } from 'react-bootstrap';
import { MoreVertical } from 'react-feather';
// import required data files
import TeamsData from "data/dashboard/TeamsData";
const Teams = () => {
const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
( {
e.preventDefault();
onClick(e);
}}
className="text-muted text-primary-hover">
{children}
)
));
CustomToggle.displayName = 'CustomToggle';
const ActionMenu = () => {
return (
Action
Another action
Something else here
);
};
return (
Teams
Name
Role
Last Activity
{TeamsData.map((item, index) => {
return (
{item.name}
{item.email}
{item.role}
{item.lastActivity}
)
})}
)
}
export default Teams
================================================
FILE: sub-components/index.js
================================================
/**
* The folder sub-components contains sub component of all the pages,
* so here you will find folder names which are listed in root pages.
*/
// sub components for /pages/dashboard
import ActiveProjects from 'sub-components/dashboard/ActiveProjects';
import TasksPerformance from 'sub-components/dashboard/TasksPerformance';
import Teams from 'sub-components/dashboard/Teams';
// sub components for /pages/profile
import AboutMe from 'sub-components/profile/AboutMe';
import ActivityFeed from 'sub-components/profile/ActivityFeed';
import MyTeam from 'sub-components/profile/MyTeam';
import ProfileHeader from 'sub-components/profile/ProfileHeader';
import ProjectsContributions from 'sub-components/profile/ProjectsContributions';
import RecentFromBlog from 'sub-components/profile/RecentFromBlog';
// sub components for /pages/billing
import CurrentPlan from 'sub-components/billing/CurrentPlan';
import BillingAddress from 'sub-components/billing/BillingAddress';
// sub components for /pages/settings
import DeleteAccount from 'sub-components/settings/DeleteAccount';
import EmailSetting from 'sub-components/settings/EmailSetting';
import GeneralSetting from 'sub-components/settings/GeneralSetting';
import Notifications from 'sub-components/settings/Notifications';
import Preferences from 'sub-components/settings/Preferences';
export {
ActiveProjects,
TasksPerformance,
Teams,
AboutMe,
ActivityFeed,
MyTeam,
ProfileHeader,
ProjectsContributions,
RecentFromBlog,
CurrentPlan,
BillingAddress,
DeleteAccount,
EmailSetting,
GeneralSetting,
Notifications,
Preferences
};
================================================
FILE: sub-components/profile/AboutMe.js
================================================
// import node module libraries
import { Col, Row, Card } from 'react-bootstrap';
const AboutMe = () => {
return (
{/* card */}
{/* card body */}
{/* card title */}
About MeBio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen disse var ius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen disse var ius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Delete any and all content you have, such as articles, comments, your reading list or chat messages. Allow your username to become available to anyone.
Delete Account
Feel free to contact with any dashui@example.com questions.