This monorepo contains packages for building web applications in the Status ecosystem. These packages can be used separately or combined to create consistent and beautiful user interfaces.
| Name | npm |
Description |
|---|---|---|
@status-im/components |
 |
Component library built with Radix UI, React Aria, Tailwind CSS. |
@status-im/js |
 |
Libary for Waku protocol integration and blockchain interactions. |
@status-im/icons |
 |
Auto-generated icon library based on our design system. |
@status-im/colors |
 |
Auto-generated color palette based on our design system. |
@status-im/eslint-config |
 |
Shared ESLint configuration for consistent code style across projects. |
| Name | Description |
|---|---|
./apps/connector |
Status Desktop Wallet extended to decentralised applications in your browser. |
Required:
Recommended:
- Visual Studio Code
- install extensions listed in
.vscode/extensions.jsonfor optimal development experience
- install extensions listed in
- Turborepo: Manages our monorepo and speeds up builds
- TypeScript: Adds type safety to our code
- React: Our main library for building UIs
- Radix UI / React Aria: Provides accessible UI primitives
- Tailwind CSS: Used for styling
- Vite: Our build tool and dev server
- Storybook: For developing and showcasing components
- ESLint: Keeps our code consistent and catches potential issues
- Prettier: Formats our code
- Changesets: Manages versioning and changelogs
-
Clone the repository:
git clone https://github.com/status-im/status-web.git cd status-web -
Install dependencies:
pnpm install -
Build all packages:
pnpm build -
Run tests:
pnpm test -
Start development mode:
pnpm dev
To view and interact with the components, you can run Storybook:
pnpm storybook
This will start the Storybook server, allowing you to browse and test components in isolation.
This project is sponsored by Browserstack.