`<Basic>` Component

<Basic> is a simple box layout component with built-in variants: sizes, themes, gradient, outlined, mild, and nude.

Installing `<Basic>` Component

There are 2 ways to install <Basic> component into your react app project:

Install the Specific Package of <Basic> Component
Install the Whole Reusable-UI Component Pack, including the <Basic> Component

Variant Properties

The alternative appearances of the <Basic> layout without changing the <Basic>'s functionality.

`size` Property

Defines the alternative size of the <Basic>.

The possible values are:

undefined
'sm'
'md'
'lg'

Here the preview:

A <Basic> with sm size

A <Basic> with md size

A <Basic> with lg size

Show code

`theme` Property

Defines the contextual theme of the <Basic>.

The possible values are:

undefined
'primary'
'secondary'
'success'
'info'
'warning'
'danger'
'light'
'dark'

Here the preview:

A <Basic> with primary theme

A <Basic> with secondary theme

A <Basic> with success theme

A <Basic> with info theme

A <Basic> with warning theme

A <Basic> with danger theme

A <Basic> with light theme

A <Basic> with dark theme

Show code

`gradient` Property

Activates a 3D mode of the <Basic>.

The possible values are:

undefined
'inherit'
true
false

Here the preview:

A <Basic> with gradient mode

A <Basic> with gradient mode

A <Basic> with gradient mode

A <Basic> with gradient mode

A <Basic> with gradient mode

A <Basic> with gradient mode

A <Basic> with gradient mode

A <Basic> with gradient mode

Show code

`outlined` Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <Basic>.

The possible values are:

undefined
'inherit'
true
false

Here the preview:

A <Basic> with outlined mode

A <Basic> with outlined mode

A <Basic> with outlined mode

A <Basic> with outlined mode

A <Basic> with outlined mode

A <Basic> with outlined mode

A <Basic> with outlined mode

A <Basic> with outlined mode

Show code

`mild` Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <Basic>.

The possible values are:

undefined
'inherit'
true
false

Here the preview:

A <Basic> with mild mode

A <Basic> with mild mode

A <Basic> with mild mode

A <Basic> with mild mode

A <Basic> with mild mode

A <Basic> with mild mode

A <Basic> with mild mode

A <Basic> with mild mode

Show code

`nude` Property

Activates an nude mode (background-less, padding-less, and border-less) of the <Basic>.

The possible values are:

undefined
true
false

Here the preview:

A <Basic> with nude mode

A <Basic> with nude mode

A <Basic> with nude mode

A <Basic> with nude mode

A <Basic> with nude mode

A <Basic> with nude mode

A <Basic> with nude mode

A <Basic> with nude mode

Show code

Inherited Properties

Because <Basic> is made from <Generic>, so all properties from <Generic> are inherited.

You can see the documentation of <Generic> here.

Variables

There are several variables of <Basic> you can customize. Changing the variables affects all <Basic> instance and other components that depend on <Basic>.

Here the exposed variables:

Backgrounds, Foregrounds, Borders, & Rings
Animations
Spacings
Typos

The example of accessing, modifying, & adding variables:

Show code