open-index/open-npm huggingface dataset:
npm package: @jcomponents/dropdown
Description: ```jsx <Nav>     <Nav.Item>Home</Nav.Item>     <Nav.Item>About</Nav.Item>     <Nav.Item>Contact</Nav.Item>     ... </Nav> ```
Author: Joel Grayson
Latest version: 1.0.3

# Usage
```jsx
<Nav>
    <Nav.Item>Home</Nav.Item>
    <Nav.Item>About</Nav.Item>
    <Nav.Item>Contact</Nav.Item>
    ...
</Nav>
```

If using Next.js, you can pass `Link` as a property into `<Nav>` to get the benefits of 'next/link'.
```jsx
import Link from 'next/link';

<Nav Link={Link}>
    <Nav.Item>Home</Nav.Item>
    <Nav.Item>About</Nav.Item>
    <Nav.Item>Contact</Nav.Item>
    ...
</Nav>
```
npm package: @jcomponents/fancyol
Description: * spacing?: number - distance between successive <li> elements. Similar to margin-bottom. * backgroundColor?: string - specifies the circle's color * color?: string - specifies the text color * showLine?: boolean - whether to show a line connecting the ci
Author: Joel Grayson
Latest version: 0.1.7

# FancyOl
## Props
* spacing?: number - distance between successive <li> elements. Similar to margin-bottom.
* backgroundColor?: string - specifies the circle's color
* color?: string - specifies the text color
* showLine?: boolean - whether to show a line connecting the circles

## Usage
```jsx
import FancyOl from '@jcomponents/fancyol';

export default function Page() {
    return <>
        <h1>The Steps</h1>
        <FancyOl>
            <li>Sign into AWS Management Console.</li>
            <li>Open the RDS console.</li>
            <li>Choose the region where you wish to create your instance.</li>
            <li>In the navigation pane, click on 'Databases'.</li>
            <li>Click on 'Create database'.</li>
        </FancyOl>
    </>;
}

```
yields
![demo](https://joelgrayson.com/image/@jcomponents/fancyol/1.png)

With `<FancyOl backgroundColor='purple'>`, you get
![demo](https://joelgrayson.com/image/@jcomponents/fancyol/2.png)

With `<FancyOl backgroundColor='#dddddd' color='#111111'>`, you get
![demo](https://joelgrayson.com/image/@jcomponents/fancyol/3.png)
npm package: @jcomponents/latex
Description: ```jsx <Nav>     <Nav.Item>Home</Nav.Item>     <Nav.Item>About</Nav.Item>     <Nav.Item>Contact</Nav.Item>     ... </Nav> ```
Author: Joel Grayson
Latest version: 1.0.2

# Usage
```jsx
<Nav>
    <Nav.Item>Home</Nav.Item>
    <Nav.Item>About</Nav.Item>
    <Nav.Item>Contact</Nav.Item>
    ...
</Nav>
```

If using Next.js, you can pass `Link` as a property into `<Nav>` to get the benefits of 'next/link'.
```jsx
import Link from 'next/link';

<Nav Link={Link}>
    <Nav.Item>Home</Nav.Item>
    <Nav.Item>About</Nav.Item>
    <Nav.Item>Contact</Nav.Item>
    ...
</Nav>
```
npm package: @jcomponents/nav
Description: ```jsx <Nav>     <Nav.Item>Home</Nav.Item>     <Nav.Item>About</Nav.Item>     <Nav.Item>Contact</Nav.Item>     ... </Nav> ```
Author: Joel Grayson
Latest version: 1.3.0

# Usage
```jsx
<Nav>
    <Nav.Item>Home</Nav.Item>
    <Nav.Item>About</Nav.Item>
    <Nav.Item>Contact</Nav.Item>
    ...
</Nav>
```

If using Next.js, you can pass `Link` as a property into `<Nav>` to get the benefits of 'next/link'.
```jsx
import Link from 'next/link';

<Nav Link={Link}>
    <Nav.Item>Home</Nav.Item>
    <Nav.Item>About</Nav.Item>
    <Nav.Item>Contact</Nav.Item>
    ...
</Nav>
```
npm package: @jcomponents/resizer
Description: ```jsx <Nav>     <Nav.Item>Home</Nav.Item>     <Nav.Item>About</Nav.Item>     <Nav.Item>Contact</Nav.Item>     ... </Nav> ```
Author: Joel Grayson
Latest version: 0.1.1

# Usage
```jsx
<Nav>
    <Nav.Item>Home</Nav.Item>
    <Nav.Item>About</Nav.Item>
    <Nav.Item>Contact</Nav.Item>
    ...
</Nav>
```

If using Next.js, you can pass `Link` as a property into `<Nav>` to get the benefits of 'next/link'.
```jsx
import Link from 'next/link';

<Nav Link={Link}>
    <Nav.Item>Home</Nav.Item>
    <Nav.Item>About</Nav.Item>
    <Nav.Item>Contact</Nav.Item>
    ...
</Nav>
```
npm package: @jcomponents/table
Description: Useful for a ready-to-use React.js styled table.
Author: Joel Grayson
Latest version: 1.0.1

Useful for a ready-to-use React.js styled table.

# Usage
Replace <table> with <Table>
```jsx
<Table>
    <tbody>
        <tr>
    </tbody>
</Table>
```
npm package: @jcomponents/writing-components
Description: ```jsx <Nav>     <Nav.Item>Home</Nav.Item>     <Nav.Item>About</Nav.Item>     <Nav.Item>Contact</Nav.Item>     ... </Nav> ```
Author: Joel Grayson
Latest version: 1.1.2

# Usage
```jsx
<Nav>
    <Nav.Item>Home</Nav.Item>
    <Nav.Item>About</Nav.Item>
    <Nav.Item>Contact</Nav.Item>
    ...
</Nav>
```

If using Next.js, you can pass `Link` as a property into `<Nav>` to get the benefits of 'next/link'.
```jsx
import Link from 'next/link';

<Nav Link={Link}>
    <Nav.Item>Home</Nav.Item>
    <Nav.Item>About</Nav.Item>
    <Nav.Item>Contact</Nav.Item>
    ...
</Nav>
```