RepositoryCurrent collected state Current
Observed since 21 Oct, 11:49 UTC
No superseded metadata states collected. Unchanged observations do not create new revisions.
Back to packageRELEASE DETAILS
2.6.5-animate-number-beta.1
npm@0xsquid/ui
Squid's UI components
Published21 May 2025
Direct dependencies57
Transitive dependenciesNot calculated
README
Current package documentationSquid UI
React components library for Squid V2
Package installation and usage
Install the package:
yarn add @0xsquid/ui
Import styles in your entry point:
// src/main.tsx | src/pages/_app.tsx | etc...
import "@0xsquid/ui/dist/index.css";
Wrap your app with our theme provider <ThemeProvider /> and specify your theme:
import { ThemeProvider, Button } from "@0xsquid/ui";
function App() {
return (
<ThemeProvider theme={yourTheme}>
<Button label="Hello world" variant="primary" size="md" />
</ThemeProvider>
);
}
Development
Install dependencies
yarn install
Start Storybook dev server
yarn storybook
Build package
To build the package using Rollup, run:
yarn build
This command will:
- compile Tailwind CSS classes into
src/styles/compiled-tailwind.css - bundle source code, along with its type declarations, into the
dist/folder - copy
src/styles/compiled-tailwind.csstodist/index.css
Lint and format
To format and lint the code, run:
yarn format:fix
yarn lint:fix
Folder structure
- src
- index.ts <- barrel file
- components
- index.ts <- barrel file
- buttons
- index.ts <- barrel file
- Button.tsx
- lists
- index.ts <- barrel file
- HistoryItem.tsx
- stories
- buttons
- Button.stories.tsx
- lists
- HistoryItem.stories.tsx
When creating a new component, don't forget to update the barrel file, exporting your component in the index.ts file in the corresponding component folder. You can also install the AutoBarrel VSCode extension.
Images
In case you need to add images somewhere that need to be included in the final bundle, convert them to base64 instead.
Example:
.my-image {
- background-image: url('my-image.png');
+ background-image: url('data:image/png;base64,iVBORw0....');
}
Or in a React component:
- <img src="my-image.png" />
+ <img src="data:image/png;base64,iVBORw0..." />
Downloads & popularity
Awaiting observationsNo metric observations yet
Download counts and popularity will appear here as the collector receives them.
Declared dependencies 57
Native requirements57 direct targetsNot calculated transitive count
| Package / target | Requirement | Relationship |
|---|---|---|
clsxEnvironment{
"local_name": "clsx",
"alias": false,
"peer_metadata": null
} | 2.1.1 | runtime |
colorEnvironment{
"local_name": "color",
"alias": false,
"peer_metadata": null
} | 4.2.3 | runtime |
motionEnvironment{
"local_name": "motion",
"alias": false,
"peer_metadata": null
} | ^12.12.1 | runtime |
zustandEnvironment{
"local_name": "zustand",
"alias": false,
"peer_metadata": null
} | 4.5.4 | runtime |
date-fnsEnvironment{
"local_name": "date-fns",
"alias": false,
"peer_metadata": null
} | ^3.6.0 | runtime |
deepmergeEnvironment{
"local_name": "deepmerge",
"alias": false,
"peer_metadata": null
} | 4.3.1 | runtime |
bignumber.jsEnvironment{
"local_name": "bignumber.js",
"alias": false,
"peer_metadata": null
} | 9.1.2 | runtime |
framer-motionEnvironment{
"local_name": "framer-motion",
"alias": false,
"peer_metadata": null
} | ^11.2.12 | runtime |
tailwind-mergeEnvironment{
"local_name": "tailwind-merge",
"alias": false,
"peer_metadata": null
} | 2.3.0 | runtime |
react-day-pickerEnvironment{
"local_name": "react-day-picker",
"alias": false,
"peer_metadata": null
} | ^8.10.1 | runtime |
react-device-detectEnvironment{
"local_name": "react-device-detect",
"alias": false,
"peer_metadata": null
} | 2.2.3 | runtime |
@lottiefiles/react-lottie-playerEnvironment{
"local_name": "@lottiefiles/react-lottie-player",
"alias": false,
"peer_metadata": null
} | 3.5.0 | runtime |
tslibEnvironment{
"local_name": "tslib",
"alias": false,
"peer_metadata": null
} | ^2.6.2 | development |
eslintEnvironment{
"local_name": "eslint",
"alias": false,
"peer_metadata": null
} | ^8.0.1 | development |
rollupEnvironment{
"local_name": "rollup",
"alias": false,
"peer_metadata": null
} | ^4.17.2 | development |
vitestEnvironment{
"local_name": "vitest",
"alias": false,
"peer_metadata": null
} | 2.0.5 | development |
postcssEnvironment{
"local_name": "postcss",
"alias": false,
"peer_metadata": null
} | 8.4.39 | development |
prettierEnvironment{
"local_name": "prettier",
"alias": false,
"peer_metadata": null
} | 3.2.5 | development |
storybookEnvironment{
"local_name": "storybook",
"alias": false,
"peer_metadata": null
} | ^8.0.1 | development |
ts-loaderEnvironment{
"local_name": "ts-loader",
"alias": false,
"peer_metadata": null
} | 9.5.1 | development |
release-itEnvironment{
"local_name": "release-it",
"alias": false,
"peer_metadata": null
} | 17.2.1 | development |
typescriptEnvironment{
"local_name": "typescript",
"alias": false,
"peer_metadata": null
} | 5.4 | development |
tailwindcssEnvironment{
"local_name": "tailwindcss",
"alias": false,
"peer_metadata": null
} | 3.4.1 | development |
@types/colorEnvironment{
"local_name": "@types/color",
"alias": false,
"peer_metadata": null
} | ^3.0.6 | development |
@types/reactEnvironment{
"local_name": "@types/react",
"alias": false,
"peer_metadata": null
} | ^18 | development |
autoprefixerEnvironment{
"local_name": "autoprefixer",
"alias": false,
"peer_metadata": null
} | 10.4.18 | development |
concurrentlyEnvironment{
"local_name": "concurrently",
"alias": false,
"peer_metadata": null
} | 8.2.2 | development |
@storybook/testEnvironment{
"local_name": "@storybook/test",
"alias": false,
"peer_metadata": null
} | ^8.0.1 | development |
eslint-plugin-nEnvironment{
"local_name": "eslint-plugin-n",
"alias": false,
"peer_metadata": null
} | ^15.0.0 || ^16.0.0 | development |
@storybook/reactEnvironment{
"local_name": "@storybook/react",
"alias": false,
"peer_metadata": null
} | ^8.0.1 | development |
@types/react-domEnvironment{
"local_name": "@types/react-dom",
"alias": false,
"peer_metadata": null
} | ^18 | development |
@storybook/blocksEnvironment{
"local_name": "@storybook/blocks",
"alias": false,
"peer_metadata": null
} | ^8.0.1 | development |
rollup-plugin-dtsEnvironment{
"local_name": "rollup-plugin-dts",
"alias": false,
"peer_metadata": null
} | ^6.1.0 | development |
@rollup/plugin-jsonEnvironment{
"local_name": "@rollup/plugin-json",
"alias": false,
"peer_metadata": null
} | 6.1.0 | development |
eslint-plugin-reactEnvironment{
"local_name": "eslint-plugin-react",
"alias": false,
"peer_metadata": null
} | ^7.34.1 | development |
eslint-plugin-importEnvironment{
"local_name": "eslint-plugin-import",
"alias": false,
"peer_metadata": null
} | ^2.25.2 | development |
eslint-plugin-promiseEnvironment{
"local_name": "eslint-plugin-promise",
"alias": false,
"peer_metadata": null
} | ^6.0.0 | development |
rollup-plugin-postcssEnvironment{
"local_name": "rollup-plugin-postcss",
"alias": false,
"peer_metadata": null
} | 4.0.2 | development |
@storybook/addon-linksEnvironment{
"local_name": "@storybook/addon-links",
"alias": false,
"peer_metadata": null
} | ^8.0.1 | development |
eslint-config-prettierEnvironment{
"local_name": "eslint-config-prettier",
"alias": false,
"peer_metadata": null
} | 9.1.0 | development |
eslint-plugin-prettierEnvironment{
"local_name": "eslint-plugin-prettier",
"alias": false,
"peer_metadata": null
} | 5.1.3 | development |
@rollup/plugin-commonjsEnvironment{
"local_name": "@rollup/plugin-commonjs",
"alias": false,
"peer_metadata": null
} | ^25.0.7 | development |
@chromatic-com/storybookEnvironment{
"local_name": "@chromatic-com/storybook",
"alias": false,
"peer_metadata": null
} | ^1.2.22 | development |
@rollup/plugin-typescriptEnvironment{
"local_name": "@rollup/plugin-typescript",
"alias": false,
"peer_metadata": null
} | ^11.1.6 | development |
@storybook/react-webpack5Environment{
"local_name": "@storybook/react-webpack5",
"alias": false,
"peer_metadata": null
} | ^8.0.1 | development |
@rollup/plugin-node-resolveEnvironment{
"local_name": "@rollup/plugin-node-resolve",
"alias": false,
"peer_metadata": null
} | ^15.2.3 | development |
@storybook/addon-essentialsEnvironment{
"local_name": "@storybook/addon-essentials",
"alias": false,
"peer_metadata": null
} | ^8.0.1 | development |
prettier-plugin-tailwindcssEnvironment{
"local_name": "prettier-plugin-tailwindcss",
"alias": false,
"peer_metadata": null
} | 0.5.12 | development |
@storybook/addon-interactionsEnvironment{
"local_name": "@storybook/addon-interactions",
"alias": false,
"peer_metadata": null
} | ^8.0.1 | development |
@storybook/addon-styling-webpackEnvironment{
"local_name": "@storybook/addon-styling-webpack",
"alias": false,
"peer_metadata": null
} | ^1.0.0 | development |
@typescript-eslint/eslint-pluginEnvironment{
"local_name": "@typescript-eslint/eslint-plugin",
"alias": false,
"peer_metadata": null
} | ^6.4.0 | development |
rollup-plugin-peer-deps-externalEnvironment{
"local_name": "rollup-plugin-peer-deps-external",
"alias": false,
"peer_metadata": null
} | ^2.2.4 | development |
@release-it/conventional-changelogEnvironment{
"local_name": "@release-it/conventional-changelog",
"alias": false,
"peer_metadata": null
} | 8.0.2-next.0 | development |
@storybook/addon-webpack5-compiler-swcEnvironment{
"local_name": "@storybook/addon-webpack5-compiler-swc",
"alias": false,
"peer_metadata": null
} | ^1.0.2 | development |
eslint-config-standard-with-typescriptEnvironment{
"local_name": "eslint-config-standard-with-typescript",
"alias": false,
"peer_metadata": null
} | ^43.0.1 | development |
reactEnvironment{
"local_name": "react",
"alias": false,
"peer_metadata": null
} | ^16.0.0 || ^17.0.0 || ^18.0.0 | peer |
react-domEnvironment{
"local_name": "react-dom",
"alias": false,
"peer_metadata": null
} | ^16.0.0 || ^17.0.0 || ^18.0.0 | peer |
Distribution files
1 collectedDistribution 1
Source fileSource distribution
Checksums from source
{
"shasum": "abcf98f9c8674a48d382a2a131fd910cdd918ba1",
"tarball": "https://registry.npmjs.org/@0xsquid/ui/-/ui-2.6.5-animate-number-beta.1.tgz",
"fileCount": 652,
"integrity": "sha512-it+FrhXvYkyuK0OZ9l9O29rTntzvo4xuw5GNPsogw2cjJnDBAHcOEdk/lJmpmhQq0BaFo4i1NcMXpoLdEpLk1g==",
"signatures": [
{
"sig": "MEQCIGVevm06ubhf586PQm53s2Jy/G1F5StXAM5Ec07kCg9YAiBXhU1C6bPrjw7DORzhJsRXZrepQ4+c4SCEMg5TAKgrpQ==",
"keyid": "SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"
}
],
"unpackedSize": 6432274
}Repository
PENDINGRepository
PENDINGMetadata history
Meaningful changesRecord identity
package_version:b725bc3aa6e4bb124d364cb5b5885dbfeb7c1905f891941e2df1b95101acc895