WDS Documentation Navigator Docs path: node_modules/@wix/design-system/dist/docs/ CRITICAL: Never Read Entire Files Files are 200-900+ lines. Follow the staged discovery flow below. Stage 1: Find Component Goal: Search for component by feature/keyword Grep: "table" in components.md Grep: "form|input|validation" in components.md Grep: "modal|dialog|popup" in components.md Output: Component name + description + do/don'ts Next: Go to Stage 2 with component name Stage 2: Get Props + Example List Goal: Get props AND discover available examples
2a. Get props (small files OK to read, large files grep)
Read: components/ButtonProps.md
OK if <100 lines
Grep: "### disabled" in components/BoxProps.md -A 3
Box is huge
2b. List available examples (ALWAYS grep, never read)
Grep: "^### " in components/ButtonExamples.md -n Output from 2b: 5:### Size 17:### Skin 71:### Affix 123:### Disabled 183:### Loading state Next: Pick example(s) from list, go to Stage 3 Stage 3: Fetch Specific Example Goal: Read only the example you need (~30-50 lines)
Option A: Read with offset (line number from Stage 2)
Read: components/ButtonExamples.md offset = 183 limit = 40
Option B: Grep with context
Grep: "### Loading state" in components/ButtonExamples.md -A 40 Output: JSX code example for that specific feature Stage 4: Icons (when needed) Grep: "Add|Edit|Delete|Search" in icons.md Flow Summary ┌─────────────────────────────────────────────────────────┐ │ Stage 1: Grep components.md for keyword │ │ → finds: Button, Card, Table... │ └────────────────────┬────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────────────┐ │ Stage 2a: Read/Grep {Component}Props.md │ │ → gets: props with types & descriptions │ │ │ │ Stage 2b: Grep "^### " in {Component}Examples.md │ │ → gets: example names + line numbers │ │ "5:### Size, 71:### Affix, 183:### Loading" │ └────────────────────┬────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────────────┐ │ Stage 3: Read offset=183 limit=40 │ │ → gets: specific example JSX code │ └────────────────────────────────────────────────────────┘ Example Session: Product Page
Stage 1: Find components
Grep: "image|card|price" in components.md → Image, Card, Text found
Stage 2a: Get Card props
Read: components/CardProps.md
Stage 2b: List Card examples
Grep: "^### " in components/CardExamples.md -n → 5 :
Basic, 25:### With media, 60:### Clickable
Stage 3: Fetch "With media" example
Read: components/CardExamples.md offset = 25 limit = 35 → Gets Card with Image example code
Repeat Stage 2-3 for other components as needed
Result: ~80 lines read instead of 1500+ Quick Reference Stage Command Output 1. Find Grep: "keyword" in components.md Component name 2a. Props Read: {Name}Props.md Props list 2b. Examples Grep: "^### " in {Name}Examples.md Example names + lines 3. Fetch Read: offset=N limit=40 Example code 4. Icons Grep: "IconName" in icons.md Icon exists File Sizes File Lines Strategy components.md ~970 Grep, never read fully icons.md ~400 Grep for specific icon Most Props.md 30-100 Read fully OK BoxProps.md 8000+ Grep only! Most Examples.md 100-600 Grep → offset read PageExamples.md 940 Grep → offset read Grep Patterns by Use Case
Forms
Grep: "form|input|validation" in components.md
Layout
Grep: "layout|page|card|box" in components.md
Data display
Grep: "table|list|badge" in components.md
Feedback
Grep:
"notification|toast|loader"
in
components.md
Quick Component Mapping (Design → WDS)
Design Element
WDS Component
Notes
Rectangle/container
Only use SP tokens for gap , padding , margin - not for width/height. Imports import { Button , Card , Image } from '@wix/design-system' ; import { Add , Edit , Delete } from '@wix/wix-ui-icons-common' ;