nui-React (Next UI - React) is a customizable react UI tool
npm install @nui-react/tree-viewbash
npm i @nui-react/tree-view
`
`bash
pnpm add @nui-react/tree-view
`
`bash
yarn add @nui-react/tree-view
`
Usage/Examples
`javascript
import {
TreeView,
TreeItem,
TreeItemContainer,
TreeBadge,
} from "@nui-react/tree-view";
function App() {
return (
this is a react Tree View component
);
}
`
!@nui-react/tree-view Sample UI
Components
| Prop | Type | Description | Value |
| :--------- | :---------- | :------------ | :------------------------------------------------ |
| header | string | Required. | text |
| children | ReactNode | Optional. | , |
| theme | string | Optional. | dark or light. _(Default is dark)_ |
| Prop | Type | Description | Value |
| :--------- | :---------- | :------------ | :---------------------------------------------------------- |
| children | ReactNode | Required. | , or _any ReactNode_ |
| Prop | Type | Description | Value |
| :--------------- | :---------- | :------------ | :-------------------------------------------------------- |
| title | string | Required. | text |
| children | ReactNode | Optional. | , or _any ReactNode_ |
| direction | string | Optional. | col or row. _(Default is row)_ |
| bgGradientSize | number | Optional. | any number between 0-100 _(Default is 100)_ |
| titleWidth | number | Optional. | any number between 10-100 |
| Prop | Type | Description | Value |
| :---------- | :---------- | :------------ | :------------------------------------------------ |
| header | string | Required. | text |
| children | ReactNode | Required. | _any ReactNode_ |
| expanded | boolean | Optional. | true or false. _(Default is false)_ |
| logo | string | Optional. | image URL or react image component |
| subHeader | string | Optional. | text |
| desc | string | Optional. | text |
| link | string | Optional. | URL |
| sublink | string | Optional. | URL |
| descLink | string | Optional. | URL |
| Prop | Type | Description | Value |
| :----------------- | :------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------- |
| header | string | Required. | text |
| logo | string | Optional. | image URL or react image component |
| subHeader | string | Optional. | text |
| desc | string | Optional. | text |
| link | string | Optional. | URL |
| sublink | string | Optional. | URL |
| descLink | string | Optional. | URL |
| headerVarient | string | Optional. | h1, h2, h3, h4, h5, h6 or p. _(Default is h1)_ |
| subHeaderVarient | string | Optional. | h1, h2, h3, h4, h5, h6 or p. _(Default is h4)_ |
| descVarient | string | Optional. | h1, h2, h3, h4, h5, h6 or p. _(Default is p)_ |
| headerColor | string | Optional. | white, black, primary, secondary, success, error, info , warning or mute. _(Default is primary)_ |
| subHeaderColor | string | Optional. | white, black, primary, secondary, success, error, info , warning or mute. _(Default is white)_ |
| descColor | string | Optional. | white, black, primary, secondary, success, error, info , warning or mute . _(Default is mute)_ |
| Prop | Type | Description | Value |
| :---------- | :------- | :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------- |
| text | string | Required. | text |
| varient | string | Optional. | h1, h2, h3, h4, h5, h6 or p. _(Default is p)_ |
| color | string | Optional. | white, black, primary, secondary, success, error, info , warning or mute. _(Default is white)_ |
| className | string | Optional. | any |
| Prop | Type | Description | Value |
| :------ | :------- | :------------ | :--------------------------------------------- |
| label | string | Required. | text |
| img | string | Optional. | image URL or react image component |
| Prop | Type | Description | Value |
| :---------- | :------- | :------------ | :------------------------------------------------------------------------------- |
| href | string | Required. | URL |
| target | string | Optional. | _blank, _self, _parent, or _top. _(Default is _blank)_ |
| title | string | Optional. | text |
| iconColor | string | Optional. | any color code |
| className | string | Optional. | any |
| Prop | Type | Description | Value |
| :------------------ | :-------- | :------------ | :------------------------------------------------ |
| header | string | Required. | text |
| showMainConnector | boolean | Optional. | true or false. _(Default is true)_ |
| setAsLast | boolean | Optional. | true or false. _(Default is false)_ |
| Prop | Type | Description | Value |
| :---------- | :------- | :---------- | :----------------------------------------------- |
| size | number | Optional. | any number more than 0 _(Default is 10)_ |
| color | string | Optional. | any Color Code _(Default is #00f0ff)_ |
| className | string | Optional. | any |
| Prop | Type | Description | Value |
| :---------- | :------- | :---------- | :-------------------------------------------- |
| color | string | Optional. | any Color Code _(Default is #00f0ff)_ |
| className | string | Optional. | any |
| Prop | Type | Description | Value |
| :------ | :------- | :---------- | :------------------------------------------------------------- |
| color | string | Optional. | any Color Code _(Default is rgba(0, 240, 255, 0.502)`)_ |