- Accordion
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Checkbox
- Combobox
- Container
- CurrencyInput
- DistributionSlider
- Drawer
- Dropdown
- Grid
- Heading
- Image
- Input
- InputGroup
- Label
- Logo
- MapPin
- Modal
- NativeSelect
- NumberInput
- OtpInput
- PhoneInput
- Popover
- Progress
- PropertyCalendar
- RadioGroup
- RadioGroupCards
- ResponsiveModal
- ScrollArea
- SearchBar
- SearchBarFallback
- SearchInput
- Select
- Separator
- Spinner
- Switch
- Tabs
- Text
- Textarea
- Toast
- Toggle
- ToggleGroup
- Tooltip
Wander Design System
The Wander Design System is a component library distributed as an npm package and registry for web.
To use the design system packages, create a GitHub Personal Access Token with read:packages scope, configure npm to use GitHub Packages, and export the your token as the GITHUB_TOKEN environment variable in your terminal:
echo "//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}" >> .npmrc
echo "@wandercom:registry=https://npm.pkg.github.com" >> .npmrc
export GITHUB_TOKEN=[YOUR_GITHUB_TOKEN]Learn more about authenticating with a GitHub Personal Access Token.
Install core packages and components using our npm packages:
pnpm add @wandercom/design-system-tokens @wandercom/design-system-fonts @wandercom/design-system-shared @wandercom/design-system-webThe design system is organized into packages for web, tokens, shared, icons (coming soon), and fonts.
packages/web- Web components (React + Tailwind v4)packages/tokens- Design tokens (Terrazzo-managed).packages/shared- Shared utilities.packages/fonts- Brand fonts (Instrument Sans).packages/icons- Brand icons (coming soon).packages/mobile- Mobile components (React Native + NativeWind, coming soon).