brand

Layout

Choose your preferred layout


Navigation

Menu comes in two modes: dark & light


Top Nav

Choose your liked color mode


Scrollable Header
brand brand

Border

Additive

Use border utilities to add an element’s borders. Choose from all borders or one at a time.

Class Values
class="border" Add border to all sides of an element
class="border-[value]" top / bottom / left / right
Subtractive

Subtractive border utilities will remove border completely or one at a time.

Class Values
class="border-0" Remove border from all sides of an element
class="border-[value]" top-0 / bottom-0 / left-0 / right-0
Border color

Change the border color using utilities built on our theme colors.

Class Values
class="border border-[value]" primary / success / warning / danger / info / light / dark / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke / light-10 / light-15 / light-20 / light-30 / light-40 / light-50 / light-60 / light-70 / light-80 / light-90 / dark-20 / dark-40 / dark-60 / dark-80 / dark-100
Border Radius

Add classes to an element to easily round its corners. Single side or all sides at a time.

Class Values
class="border rounded" Set a default border radius of 4px to an element
class="border rounded-[value]" 0 / 1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9 / 10 / 15 / 20 / 25 / 30 / 35 / 40 / 45 / 50
class="border rounded-[value]" top / bottom / left / right / top-left / top-right / bottom-left / bottom-right
Border Sizes

Change the thickness of a border on the fly using below border size utilities.

Class Values
class="border" Default value is set to 1
class="border border-[value]" 2 / 3 / 4 / 5
HR

HR utitlities are available in different colors & different thickness sizes.




















HR Size



Class Values
class="hr-[value]" primary / secondary / info / warning / danger / success / light / light-10 / light-20 / light-30 / dark / dark-20 / dark-40
class="hr-soft-[value]" primary / secondary / info / warning / danger / success
class="hr-[value]" 2 / 3