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.

Required:

• Node.js v20.x
• pnpm v9.12.x

Recommended:

• Visual Studio Code
  • install extensions listed in .vscode/extensions.json for optimal development experience

• 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

1. Clone the repository:

   git clone https://github.com/status-im/status-web.git
   cd status-web
   

2. Install dependencies:

   pnpm install
   

3. Build all packages:

   pnpm build
   

4. Run tests:

   pnpm test
   

5. 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.