Find the cost of adding an npm package to your app's bundle size
teardown.kelinci.dev
1export const RECOMMENDATIONS: (string | string[])[] = [
2 // UI frameworks
3 'lit-html',
4 'preact',
5 'solid-js',
6 'svelte',
7 'vue',
8
9 // routing
10 '@solidjs/router',
11 ['@tanstack/react-router', '@tanstack/solid-router'],
12 'navaid',
13 'react-router',
14 'regexparam',
15 'trouter',
16 'vue-router',
17 'wouter',
18
19 // state management
20 'effector',
21 'immer',
22 'jotai',
23 ['mobx', 'mobx-react'],
24 'nanostores',
25 'pinia',
26 ['redux', 'react-redux'],
27 'valtio',
28 ['@xstate/react', '@xstate/solid', '@xstate/vue'],
29 'zustand',
30
31 // standalone reactivity
32 '@preact/signals-core',
33 '@vue/reactivity',
34 'alien-signals',
35
36 // data fetching
37 '@apollo/client',
38 'graphql-request',
39 ['@tanstack/angular-query', '@tanstack/react-query', '@tanstack/solid-query', '@tanstack/vue-query'],
40 ['@trpc/client', '@trpc/react-query'],
41 'swr',
42 'urql',
43
44 // HTTP clients
45 'axios',
46 'ky',
47 'ofetch',
48 'redaxios',
49 'wretch',
50
51 // validation/schema
52 'arktype',
53 '@badrap/valita',
54 '@sinclair/typebox',
55 'superstruct',
56 'valibot',
57 'yup',
58 'zod',
59
60 // date/time
61 ['date-fns', '@date-fns/tz', '@date-fns/utc'],
62 '@formkit/tempo',
63 'luxon',
64
65 // class names/styling
66 'clsx',
67 'tailwind-merge',
68
69 // ID generation
70 'cuid2',
71 'nanoid',
72 'ulid',
73 'uuid',
74
75 // deep clone/equality
76 'dequal',
77 'klona',
78
79 // object utilities
80 'defu',
81 'destr',
82 'dot-prop',
83
84 // string utilities
85 'change-case',
86
87 // memoization / caching
88 'memoize',
89 'p-memoize',
90
91 // throttle / debounce
92 'throttle-debounce',
93
94 // query strings
95 'qs',
96 'query-string',
97
98 // i18n
99 ['@formatjs/intl', 'react-intl'],
100 ['@fluent/bundle', '@fluent/react'],
101 ['i18next', 'react-i18next', 'vue-i18n'],
102 ['@lingui/core', '@lingui/react'],
103
104 // markdown
105 'markdown-it',
106 'marked',
107 'turndown',
108
109 // syntax highlighting
110 'highlight.js',
111 'prismjs',
112 'shiki',
113
114 // rich text editors
115 ['lexical', '@lexical/react'],
116 'quill',
117 'slate',
118 ['@tiptap/core', '@tiptap/react', '@tiptap/vue-3', '@tiptap/starter-kit'],
119
120 // template literals
121 'htm',
122
123 // search
124 'fuse.js',
125 'minisearch',
126
127 // animation
128 'animejs',
129 '@formkit/auto-animate',
130 ['framer-motion', 'motion-v', 'motion'],
131 'gsap',
132 'popmotion',
133
134 // forms
135 ['final-form', 'react-final-form'],
136 'react-hook-form',
137 ['@formisch/preact', '@formisch/qwik', '@formisch/react', '@formisch/solid', '@formisch/vue'],
138 [
139 '@tanstack/angular-form',
140 '@tanstack/lit-form',
141 '@tanstack/react-form',
142 '@tanstack/solid-form',
143 '@tanstack/vue-form',
144 ],
145
146 // tables
147 [
148 '@tanstack/angular-table',
149 '@tanstack/lit-table',
150 '@tanstack/qwik-table',
151 '@tanstack/react-table',
152 '@tanstack/solid-table',
153 '@tanstack/vue-table',
154 ],
155
156 // virtualization
157 'rc-virtual-list',
158 'virtua',
159 [
160 '@tanstack/angular-virtual',
161 '@tanstack/lit-virtual',
162 '@tanstack/react-virtual',
163 '@tanstack/solid-virtual',
164 '@tanstack/vue-virtual',
165 ],
166
167 // drag and drop
168 ['@dnd-kit/core', '@dnd-kit/sortable'],
169 '@atlaskit/pragmatic-drag-and-drop',
170 'sortablejs',
171
172 // charts / visualization
173 'chart.js',
174 'd3',
175 'echarts',
176 'recharts',
177
178 // icons
179 '@iconify/iconify',
180 ['lucide', 'lucide-react'],
181
182 // toast / notifications
183 'react-hot-toast',
184 'sonner',
185
186 // storage
187 'idb',
188 'idb-keyval',
189
190 // CSV
191 'papaparse',
192
193 // PDF
194 'pdf-lib',
195 'pdfjs-dist',
196
197 // sanitization
198 'dompurify',
199
200 // compression
201 'fflate',
202 'fzstd',
203 'pako',
204
205 // encoding / binary
206 'multiformats',
207 'uint8arrays',
208
209 // cryptography
210 ['@noble/curves', '@noble/secp256k1', '@noble/ed25519'],
211 '@noble/hashes',
212
213 // color
214 'colord',
215 'culori',
216
217 // math / precision
218 'big.js',
219 'bignumber.js',
220 'decimal.js',
221
222 // formatting
223 'pretty-bytes',
224
225 // serialization
226 'devalue',
227 'ohash',
228 'superjson',
229
230 // events
231 'eventemitter3',
232 'mitt',
233
234 // functional / result types
235 'effect',
236 'neverthrow',
237 'true-myth',
238 'ts-pattern',
239
240 // promise utilities
241 'p-all',
242 'p-limit',
243 'p-map',
244 'p-queue',
245 'p-series',
246
247 // utilities
248 'es-toolkit',
249 'lodash-es',
250 'ramda',
251
252 // head management
253 'react-helmet',
254 'react-helmet-async',
255
256 // React utilities
257 'react-freeze',
258
259 // web workers
260 'comlink',
261
262 // benchmarking
263 'tinybench',
264
265 // AI / LLM
266 'ai',
267 ['@tanstack/ai', '@tanstack/ai-react', '@tanstack/ai-solid'],
268
269 // UI component libraries
270 'antd',
271 '@base-ui/react',
272 '@chakra-ui/react',
273 'corvu',
274 '@fluentui/react-components',
275 ['@mui/material', '@mui/joy'],
276 ['radix-ui', '@radix-ui/themes'],
277 ['radix-vue', 'reka-ui'],
278 ['react-aria', 'react-stately'],
279 'tamagui',
280
281 // CSS-in-JS / styling
282 ['@emotion/react', '@emotion/styled'],
283 'styled-components',
284
285 // positioning/floating
286 'nanopop',
287 ['@floating-ui/dom', '@floating-ui/react', '@floating-ui/react-dom', '@floating-ui/vue'],
288];