{"id":23856500,"url":"https://github.com/jsdeveloperr/remix-mantine-storybook","last_synced_at":"2026-05-06T13:33:38.416Z","repository":{"id":270519951,"uuid":"910630483","full_name":"jsdeveloperr/remix-mantine-storybook","owner":"jsdeveloperr","description":"This project is a robust boilerplate that integrates Remix, Mantine, and Storybook into a single repository.","archived":false,"fork":false,"pushed_at":"2024-12-31T21:50:46.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-31T22:25:28.972Z","etag":null,"topics":["mantine","remix","storybook","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsdeveloperr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-31T21:45:46.000Z","updated_at":"2024-12-31T21:50:49.000Z","dependencies_parsed_at":"2024-12-31T22:36:00.765Z","dependency_job_id":null,"html_url":"https://github.com/jsdeveloperr/remix-mantine-storybook","commit_stats":null,"previous_names":["jsdeveloperr/remix-mantine-storybook"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdeveloperr%2Fremix-mantine-storybook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdeveloperr%2Fremix-mantine-storybook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdeveloperr%2Fremix-mantine-storybook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdeveloperr%2Fremix-mantine-storybook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsdeveloperr","download_url":"https://codeload.github.com/jsdeveloperr/remix-mantine-storybook/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240154951,"owners_count":19756548,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mantine","remix","storybook","vite"],"created_at":"2025-01-03T01:41:24.471Z","updated_at":"2026-05-06T13:33:38.377Z","avatar_url":"https://github.com/jsdeveloperr.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Remix Mantine Storybook\n\nThis project is a robust boilerplate that integrates **Remix**, **Mantine**, and **Storybook** into a single repository. It provides a solid foundation for building scalable web applications with dynamic styling and UI component libraries while maintaining a well-structured developer experience using Storybook for UI component previews.\n\n---\n\n## Project Overview\n\n`remix-mantine-storybook` combines the power of:\n\n- **Remix**: A full-stack React framework for optimized web applications.\n- **Mantine**: A modern UI component library with built-in styling.\n- **Storybook**: A tool to visualize, test, and document UI components.\n\nThis boilerplate is ideal for projects requiring a modular frontend with reusable components.\n\n---\n\n## Features\n\n- **Remix for full-stack development**.\n- **Mantine** as a comprehensive UI toolkit with built-in hooks.\n- **Storybook integration** for component testing and documentation.\n- **TypeScript** support for type-safe development.\n- **Vite** as the development and build tool for fast bundling.\n- **ESLint and Prettier** for consistent coding standards.\n\n---\n\n## Prerequisites\n\nMake sure your system meets the following requirements:\n\n- **Node.js**: \u003e= 18.0.0\n- **Yarn**: \u003e= 4.5.3\n\n---\n\n## Installation\n\nClone the repository and install dependencies:\n\n```bash\ngit clone https://github.com/jsdeveloperr/remix-mantine-storybook.git\ncd remix-mantine-storybook\nyarn install\n```\n\n---\n\n## Scripts\n\nThe project provides several helpful scripts:\n\n| Command                  | Description                                                              |\n| ------------------------ | ------------------------------------------------------------------------ |\n| `yarn dev`               | Starts the development server.                                           |\n| `yarn build`             | Builds the Remix application using Vite.                                |\n| `yarn start`             | Starts the production server.                                            |\n| `yarn storybook`         | Starts the Storybook development server.                                 |\n| `yarn build-storybook`   | Builds the Storybook UI components into a static directory.              |\n| `yarn lint`              | Runs ESLint for code quality checks.                                     |\n| `yarn typecheck`         | Runs TypeScript to ensure type safety.                                   |\n\n---\n\n## Folder Structure\n\nHere’s an overview of the project structure:\n\n```\nremix-mantine-storybook/\n├── app/                       # Remix application folder\n│   ├── components/            # Reusable UI components\n│   ├── routes/                # Remix routes\n│   ├── styles/                # Global and component-specific styles\n├── stories/                   # Storybook stories for components\n├── build/                     # Build output (ignored by git)\n├── public/                    # Static assets (e.g., images)\n├── .storybook/                # Storybook configuration\n├── vite.config.ts             # Vite configuration\n├── package.json               # Project metadata and scripts\n├── tsconfig.json              # TypeScript configuration\n```\n\n---\n\n## Storybook Integration\n\nThis project comes pre-configured with Storybook for visualizing and testing UI components.\n\n### Running Storybook\n\nTo start Storybook in development mode, run:\n\n```bash\nyarn storybook\n```\n\nStorybook will be available at [http://localhost:6006](http://localhost:6006).\n\n### Writing Stories\n\nCreate stories for your components in the `stories/` directory. Example:\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"../app/components/Button\";\n\nexport default {\n  title: \"Components/Button\",\n  component: Button,\n};\n\nexport const Primary = {\n  args: {\n    label: \"Primary Button\",\n    color: \"blue\",\n    variant: \"filled\",\n  },\n};\n```\n\n---\n\n## Development\n\n1. **Start the development server**:\n\n   ```bash\n   yarn dev\n   ```\n\n2. **Run Storybook**:\n\n   ```bash\n   yarn storybook\n   ```\n\n3. **Lint and type-check code**:\n\n   ```bash\n   yarn lint\n   yarn typecheck\n   ```\n\n---\n\n## Building the Project\n\nTo build the project for production:\n\n1. Build the Remix application:\n\n   ```bash\n   yarn build\n   ```\n\n2. Build Storybook:\n\n   ```bash\n   yarn build-storybook\n   ```\n\n---\n\n## Linting and Type Checking\n\nThis project uses ESLint and TypeScript for code quality checks. Run:\n\n```bash\nyarn lint\nyarn typecheck\n```\n\nFix any linting or type issues reported in the console.\n\n---\n\n## License\n\nThis project is licensed under the MIT License.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdeveloperr%2Fremix-mantine-storybook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsdeveloperr%2Fremix-mantine-storybook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdeveloperr%2Fremix-mantine-storybook/lists"}