This is navbar

Styled Components

Styles

Components

Icons

Themes

Logos

Animations

Containers

Text

Buttons

Inputs

Image

Animated Container

Column Containers

CenterAlignedColumnContainer

Used for centering child elements vertically and horizontally, commonly elements buttons, icon containers, etc.

Center aligned column container

FlexStartCenterAlignedColumnContainer

Commonly used for card and page layouts. Also can be used for dropdowns, modals, etc.

Flex start center aligned column container

FlexStartColumnContainer

Commonly used for list items, same can be achieved using flexStartCenterAlignedColumnContainer

Flex start column container

OverflowColumnContainer

Mostly used for overflowing page layouts, name is too long, will be changed in future.

Overflow flex start center aligned column container

Row Containers

CenterAlignedRowContainer

Used for centering child elements vertically and horizontally, commonly elements buttons, icon containers, etc.

Center aligned row container

FlexStartCenterAlignedRowContainer

Commonly used for card and page layouts. Also can be used for dropdowns, modals, etc.

Flex end center aligned row container

FlexEndCenterAlignedRowContainer

Commonly used for card and page layouts. Also can be used for dropdowns, modals, etc.

Flex end center aligned row container

SpaceBetweenRowContainer

Commonly used for card and page layouts. Also can be used for dropdowns, modals, etc.

Space between row container

OverflowRowContainer

Mostly used for overflowing page layouts, name is too long, will be changed in future.

Overflow flex start center aligned row container

WrappedFlexStart CenterAlignedColumnContainer

Mostly used for overflowing page layouts, name is too long, will be changed in future.

Overflow flex start center aligned row container

Defaults

padding

spaces.small

margin

spaces.small

borderRadius

radii.small

border

borders.small

backgroundColor

colors.background

color

colors.text

Div Properties

spacing

margin

margin

margin-block

marginBlock

margin-bottom

marginBottom

margin-inline

marginInline

margin-left

marginLeft

margin-right

marginRight

margin-top

marginTop

padding

padding

padding-block

paddingBlock

padding-bottom

paddingBottom

padding-inline

paddingInline

padding-left

paddingLeft

padding-right

paddingRight

padding-top

paddingTop

borders

border

border

border-radius

borderRadius

border-bottom

borderBottom

border-bottom-left-radius

borderBottomLeftRadius

border-bottom-right-radius

borderBottomRightRadius

border-bottom-style

borderBottomStyle

border-image

borderImage

border-image-outset

borderImageOutset

border-image-repeat

borderImageRepeat

border-image-slice

borderImageSlice

border-image-source

borderImageSource

border-image-width

borderImageWidth

border-left

borderLeft

backgrounds

background

background

background-attachment

backgroundAttachment

background-clip

backgroundClip

background-color

backgroundColor

background-image

backgroundImage

background-origin

backgroundOrigin

background-position

backgroundPosition

background-repeat

backgroundRepeat

background-size

backgroundSize

text

color

color

font

font

font-family

fontFamily

font-size

fontSize

font-style

fontStyle

font-variant

fontVariant

font-weight

fontWeight

letter-spacing

letterSpacing

line-height

lineHeight

text-align

textAlign

text-decoration

textDecoration

text-indent

textIndent

text-overflow

textOverflow

text-shadow

textShadow

text-transform

textTransform

white-space

whiteSpace

word-spacing

wordSpacing

word-wrap

wordWrap

layout

display

display

height

height

max-height

maxHeight

max-width

maxWidth

min-height

minHeight

min-width

minWidth

overflow

overflow

overflow-x

overflowX

overflow-y

overflowY

visibility

visibility

width

width

positioning

bottom

bottom

top

top

left

left

right

right

position

position

z-index

zIndex

flexbox

align-content

alignContent

align-items

alignItems

align-self

alignSelf

flex

flex

flex-basis

flexBasis

flex-direction

flexDirection

flex-flow

flexFlow

flex-grow

flexGrow

flex-shrink

flexShrink

flex-wrap

flexWrap

justify-content

justifyContent

justify-items

justifyItems

justify-self

justifySelf

order

order

grid

grid

grid

grid-area

gridArea

grid-auto-columns

gridAutoColumns

grid-auto-flow

gridAutoFlow

grid-auto-rows

gridAutoRows

grid-column

gridColumn

grid-column-end

gridColumnEnd

grid-column-gap

gridColumnGap

grid-column-start

gridColumnStart

grid-gap

gridGap

grid-row

gridRow

grid-row-end

gridRowEnd

grid-row-gap

gridRowGap

grid-row-start

gridRowStart

grid-template

gridTemplate

grid-template-areas

gridTemplateAreas

grid-template-columns

gridTemplateColumns

grid-template-rows

gridTemplateRows

transform

transform

cssTransform

transform-origin

transformOrigin

transform-style

transformStyle

backface-visibility

backfaceVisibility

perspective

perspective

perspective-origin

perspectiveOrigin

transitions

transition

cssTransition

transition-delay

transitionDelay

transition-duration

transitionDuration

transition-property

transitionProperty

transition-timing-function

transitionTimingFunction

animation

animation

animation

animation-delay

animationDelay

animation-direction

animationDirection

animation-duration

animationDuration

animation-fill-mode

animationFillMode

animation-iteration-count

animationIterationCount

scroll

scroll-behavior

scrollBehavior

scroll-snap-type

scrollSnapType

scroll-snap-destination

scrollSnapDestination

scroll-snap-coordinate

scrollSnapCoordinate

scroll-snap-points-x

scrollSnapPointsX

scroll-snap-points-y

scrollSnapPointsY

scroll-snap-destination

scrollSnapDestination

scroll-snap-type-x

scrollSnapTypeX

scroll-snap-type-y

scrollSnapTypeY

scroll-padding

scrollPadding

scroll-padding-top

scrollPaddingTop

scroll-padding-right

scrollPaddingRight

scroll-padding-bottom

scrollPaddingBottom

scroll-padding-left

scrollPaddingLeft

filters

filter

filter

backdrop-filter

backdropFilter

effects

box-shadow

boxShadow

opacity

opacity

mix-blend-mode

mixBlendMode

isolation

isolation

interactivity

cursor

cursor

pointer-events

pointerEvents

user-select

userSelect

resize

resize

appearance

appearance

outline

outline

outline-offset

outlineOffset

will-change

willChange