###### Navigation

Menu comes in two modes: dark & light

###### Top Nav

Choose your liked color mode

###### Scrollable Header

#### 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