README_Design_Kit

(★ 122)

Enhance your GitHub README with the README Design Kit.

File Explorer

Download Latest Version (.zip)

- - -add_element-.md
  - -bug-.md
  - -enhancement-.md
  - -feature-.md
- - pr-build-check.yml
  - snake.yml
- FUNDING.yml
- pull_request_template.md
- architecture.md
- feature-request.md
- files.md
- INDEX.md
- setup.md
- theme-packs.md
- - Alien Monster.png
  - aurora-glow-line.png
  - aurora-glow-line.svg
  - Blue Line.gif
  - Blue Pink Line.gif
  - Brain.png
  - Bug.png
  - Comet.png
  - Confused Face.png
  - discord-1.png
  - discord.gif
  - Eyes.png
  - facebook-1.png
  - facebook.gif
  - favicon-16x16.png
  - favicon-32x32.png
  - favicon.ico
  - Firm Hand Waving.png
  - Firm Handshake.png
  - Flame.png
  - Flexed Biceps.png
  - Gmail Thug.gif
  - Hand Waving.gif
  - Heart and Fire.png
  - Hot Cup.png
  - Hourglass.png
  - instagram-1.webp
  - instagram.gif
  - Kyubey.gif
  - linkedin-1.png
  - linkedin.gif
  - Man Technologist.png
  - Multicolor Segregated Line.png
  - Multicolor Static Line.png
  - Musical Notes.png
  - Nerd Face.png
  - notinterested.png
  - Pixel Cat.gif
  - Plumber.gif
  - Professional Handshake.gif
  - Rabit Happy.gif
  - README.md
  - RGB Line Medium.gif
  - RGB Line Thick.gif
  - RGB Line Thin.gif
  - Roboto.png
  - Rocket.png
  - Shocked.png
  - site.webmanifest
  - sleeping.png
  - smart.png
  - Smiling.png
  - Spiral.png
  - Star Light Line.gif
  - Star.png
  - tech-pulse-dotted-line.gif
  - tech-pulse-dotted-line.png
  - tech-pulse-dotted-line.svg
  - Thinking Face.png
  - upsidedown.png
  - Wing Left.png
  - Wing Right.png
  - Writing.png
  - Yawn.png
- Apertre.logo.png
- bash-profile.png
- bento-portfolio.png
- cleanslate.png
- designcode.png
- dev-chronicle.png
- dev-odyssey.png
- devdash.png
- digital-architect.png
- git-flow.png
- kanban-portfolio.png
- loadout.png
- og-image.png
- portfolio-dashboard.png
- quest-line.png
- questlog.png
- retro-desk.png
- social-explorer.png
- SSOC.logo.png
- stackcentral.png
- statstack.png
- SWOC.logo.png
- synthwave.png
- upstream.png
- voxelview.png
- generate_divider_assets.py
- validateComponents.ts
- - 1.svg
  - 2.svg
  - 3.svg
  - 4.svg
  - 5.svg
  - 6.svg
  - 7.svg
  - AIEditorGuide.tsx
  - ComponentCard.tsx
  - CustomBadgeDialog.tsx
  - CustomBadgeMaker.tsx
  - CustomTreeGenerator.tsx
  - DraggableElement.tsx
  - EditorCanvas.tsx
  - ElementEditor.tsx
  - ElementPalette.tsx
  - ElementRenderer.tsx
  - FeatureCard.tsx
  - GithubUsernameDialog.tsx
  - HeroHeaderDialog.tsx
  - HeroHeaderMaker.tsx
  - ImageScrollCard.css
  - Layout.tsx
  - MarkdownCode.tsx
  - MarkdownPreview.tsx
  - PersonaComparisonModal.tsx
  - PreviewGrid.tsx
  - QuickStartGuide.tsx
  - rdk.svg
  - rdkd.svg
  - rdkt.svg
  - ReadmeAnalysis.tsx
  - ReadmePreview.tsx
  - ReadmeQualityDialog.tsx
  - SaveTemplateDialog.tsx
  - ScrollRestoration.tsx
  - ScrollToTop.tsx
  - Sidebar.tsx
  - SimpleDraggableElement.tsx
  - soon.svg
  - SupportStudioDialog.tsx
  - SupportStudioMaker.tsx
  - TechStackDialog.tsx
  - TechStackSelector.tsx
  - theme-provider.tsx
  - ThemePackCard.tsx
  - Thumbnail.tsx
  - topi.svg
  - UserInput.tsx
- - elements.ts
  - readmeExportPresets.ts
  - site.ts
- - techstack.ts
- - HistoryContext.tsx
- - componentsData.ts
  - demo.ts
  - sidebarCategories.ts
  - templates.ts
  - themePacks.ts
- - use-mobile.ts
  - useLocalStorage.ts
  - usePersistentHistory.ts
  - useTemplatePreferences.ts
  - useTemplates.ts
  - useUndoRedo.ts
- - github.ts
  - utils.ts
- - DragDropEditor.tsx
  - Editor.tsx
  - Elements.tsx
  - Home.tsx
  - MarkdownEditor.tsx
  - NotFound.tsx
  - PrivacyPolicy.tsx
  - TemplateLibraryPage.tsx
  - TermsOfService.tsx
  - ThemePacks.tsx
- - shadcnConfigSchema.ts
- - githubReadmeGeneratorService.ts
  - githubService.ts
  - templateService.ts
- - branding.ts
  - dom-to-image-more.d.ts
  - elements.ts
  - github.ts
  - templates.ts
  - view-mode.ts
- - brandingAnalyzer.ts
  - historyUtils.ts
  - markdownGenerator.ts
  - readmeQualityAnalyzer.ts
  - templateUtils.ts
  - treeParser.ts
- App.css
- App.tsx
- Cursortrail.tsx
- index.css
- main.tsx
- vite-env.d.ts
.dockerignore
.gitignore
CODE_OF_CONDUCT.md
components.json
CONTRIBUTING.md
Dockerfile
eslint.config.js
folder_structure.md
index.html
LICENSE
package-lock.json
package.json
rdk.svg
rdkd.svg
rdkf.svg
rdkt.svg
README.md
READMEelements.md
SECURITY.md
test-vercel-config.html
topi.svg
tsconfig.app.json
tsconfig.json
tsconfig.node.json
validate-vercel-config.js
vercel.json
VERCEL_TEST_RESULTS.md
vite.config.ts

# Installation Guide

1. Get the code

git clone https://github.com/Mayur-Pagote/README_Design_Kit

Downloads the entire project code from GitHub to your computer.

cd README_Design_Kit

Moves into the project folder you just downloaded.

2. Docker

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Docker Desktop Needed to build and run containers. Install it and keep it running in the background.

docker build -t readme-design-kit .

Builds a runnable image based on the Dockerfile.

docker run -p 8080:80 readme-design-kit

Runs the built image as an actual container.

✅ Run docker compose ps to check the containers are Up. If the README mentions a port, open http://localhost:PORT in your browser.

3. Node.js

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.