Getting Started

MSQ Design System is a collection of reusable components built with React and TypeScript.

Installation

The components are already set up in this project. Install dependencies:

npm install
# or
yarn install
# or
pnpm install

Then import components in your code:

import { Button } from "@/components/ui/button"
import { SocialButton } from "@/components/ui/social-button"
import { LanguageButton } from "@/components/ui/language-button"

Quick Start

1. Import a component

import { Button } from "@/components/ui/button"

2. Use it in your code

<Button variant="primary">Click me</Button>

Components

Button

A versatile button component with multiple variants and sizes.

Social Button

Social login buttons for Google, Facebook, Apple, and Twitter.

Language Button

Language selector button with multiple variants.

Dropdown

A versatile dropdown component with Token, Location, and P2U types.