open-index/open-npm huggingface dataset:
npm package: @storm-ds/icons
Description: Simple, clean icon set for modern web apps
Author: Storm Team
Latest version: 1.1.0

# @storm-ds/icons

486 clean, consistent SVG icons as React components. Designed for the Storm design system.

[Browse icons](https://storm-project-web.vercel.app/docs/icons)

## Installation

```bash
npm install @storm-ds/icons
# or
pnpm add @storm-ds/icons
```

### Peer dependencies

```bash
pnpm add react
```

## Usage

```tsx
import { ArrowRight, Search, Settings } from '@storm-ds/icons'

export default function App() {
  return (
    <button>
      Next <ArrowRight />
    </button>
  )
}
```

Each icon accepts standard SVG props (`className`, `width`, `height`, `stroke`, etc.):

```tsx
<Search className="w-5 h-5 text-storm-muted-foreground" />
```

### Metadata

Access icon names and categories for building icon pickers or documentation:

```tsx
import { iconMetadata } from '@storm-ds/icons/metadata'
import type { IconName, IconCategory } from '@storm-ds/icons/metadata'
```

14 categories: Arrows & Navigation, Actions, Media, Communication, Files & Folders, Layout & UI, Shapes & Symbols, Commerce, Users & Social, Development, Weather & Nature, Charts & Data, Security, Misc.

### Raw SVGs

SVG files are also available directly:

```js
import icon from '@storm-ds/icons/svg/arrow-right.svg'
```

## Exports

| Entry point | Description |
|---|---|
| `@storm-ds/icons` | 486 React icon components |
| `@storm-ds/icons/metadata` | Icon names, categories, and tags |
| `@storm-ds/icons/svg/*` | Raw SVG files |

## Requirements

- React >= 18

## License

MIT
npm package: @storm-ds/ui
Description: Lightning-fast component library optimized for Next.js
Author: Storm Team
Latest version: 1.0.5

# @storm-ds/ui

Lightning-fast component library optimized for Next.js. 64 accessible, theme-aware components built with Tailwind CSS.

[Documentation](https://storm-project-web.vercel.app)

## Installation

```bash
npm install @storm-ds/ui
# or
pnpm add @storm-ds/ui
```

### Peer dependencies

```bash
pnpm add react react-dom tailwindcss
# Optional — only needed for chart components
pnpm add recharts @storm-ds/icons
```

## Setup

Add the Storm plugin to your `tailwind.config.js`:

```js
module.exports = {
  darkMode: 'class',
  content: [
    // ...
    './node_modules/@storm-ds/ui/dist/**/*.{js,mjs}',
  ],
  plugins: [
    require('@storm-ds/ui/plugin').default || require('@storm-ds/ui/plugin'),
  ],
}
```

For Next.js, add `transpilePackages` in `next.config.js`:

```js
module.exports = {
  transpilePackages: ['@storm-ds/ui'],
}
```

## Usage

```tsx
import { Button, Card, CardHeader, CardBody } from '@storm-ds/ui'

export default function App() {
  return (
    <Card>
      <CardHeader>Hello</CardHeader>
      <CardBody>
        <Button>Click me</Button>
      </CardBody>
    </Card>
  )
}
```

### Charts

```tsx
import { StormBarChart, StormLineChart } from '@storm-ds/ui/charts'
```

Requires `recharts` as a peer dependency.

### Tailwind plugin tokens

The plugin provides semantic design tokens:

- **Colors** — `bg-storm-primary`, `text-storm-foreground`, `border-storm-border`, etc.
- **Border radius** — `rounded-storm-sm` (6px), `rounded-storm-md` (8px), `rounded-storm-lg` (12px)
- **Spacing** — `storm-xs` (4px) through `storm-2xl` (48px)
- **Dark mode** — all tokens adapt automatically with `darkMode: 'class'`

## Exports

| Entry point | Description |
|---|---|
| `@storm-ds/ui` | All 64 components |
| `@storm-ds/ui/plugin` | Tailwind CSS plugin (colors, radius, spacing) |
| `@storm-ds/ui/charts` | Chart wrappers (BarChart, LineChart, AreaChart, etc.) |

## Requirements

- Node >= 18
- React >= 18
- Tailwind CSS >= 3

## License

MIT