Wevis's Design System

https://github.com/wevisdemo/design-system
Admin
A monorepo for WeVis's design system, providing documentation and cross-framework UI components...
Tokens:15,772
Snippets:114
Trust Score:7.6
License:MIT
Update:8 months ago
Show doc for...
Tokens:
Raw
### Install WeVis UI Package with NPM

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/index.mdx

Installs the WeVis UI package using NPM. This command fetches and installs the necessary design system components and styles into your project's node_modules directory.

```shell
npm i @wevisdemo/ui
```

--------------------------------

### Install and Import Styles for @wevisdemo/ui

Source: https://context7.com/wevisdemo/design-system/llms.txt

Instructions for installing the @wevisdemo/ui package using npm or yarn, and how to import global or specific component stylesheets for use in your project.

```bash
# Install with npm
npm i @wevisdemo/ui

# Or with yarn
yarn add @wevisdemo/ui
```

```javascript
// Import global stylesheet (includes all component styles)
import '@wevisdemo/ui/styles/index.css';

// Or import typography and individual component styles for smaller bundles
import '@wevisdemo/ui/styles/typography.css';
import '@wevisdemo/ui/styles/button.css';
```

--------------------------------

### Install WeVis UI Package with Yarn

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/index.mdx

Installs the WeVis UI package using Yarn. This command is an alternative to NPM for adding the design system package to your project dependencies.

```shell
yarn add @wevisdemo/ui
```

--------------------------------

### Button Examples with Different Colors (React)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/button.mdx

Illustrates how to render buttons with different color variants ('blue', 'black', 'white') using the 'color' prop. This example also shows the use of WvButtonGroup to group buttons.

```jsx
<WvButton>Blue (default)</WvButton>
<WvButton color="black">Black</WvButton>
<WvButton color="white">White</WvButton>
```

--------------------------------

### Small Button Examples (React)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/button.mdx

Demonstrates the usage of the 'small' prop to render smaller versions of the buttons. This example shows small buttons with different color options and within a button group.

```jsx
<WvButton small>Blue (default)</WvButton>
<WvButton small color="black">Black</WvButton>
<WvButton small color="white">White</WvButton>
```

--------------------------------

### Basic Button Usage (React)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/button.mdx

Shows the fundamental usage of the WvButton component, rendering a button with the text 'Feedback'. This example assumes the necessary CSS and component have been imported.

```jsx
<WvButton>Feedback</WvButton>
```

--------------------------------

### Dark Theme Navigation Bar Example (React)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/cookbook/navigation-bar.mdx

Illustrates the WvNavbar component configured for a dark theme. This example showcases how to apply the 'dark' prop to the navbar, dropdown, and button components for a dark UI.

```jsx
<WvNavbar dark title="SOME PROJECT">
  <WvNavDropdown dark label="Topic">
    <WvNavDropdownItem dark>Topic 1</WvNavDropdownItem>
    <WvNavDropdownItem dark>Topic 2</WvNavDropdownItem>
    <WvNavDropdownItem dark>Topic Something</WvNavDropdownItem>
  </WvNavDropdown>
  <WvNavButton dark active>
    About
  </WvNavButton>
  <WvNavButton dark>Report</WvNavButton>
</WvNavbar>
```

--------------------------------

### Dark Theme Nav Button Examples

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/nav-button.mdx

Demonstrates the usage of the Nav Button component with the 'dark' prop for a dark theme appearance. This example shows how to apply the dark theme to multiple buttons.

```jsx
<WvNavButton dark active>About</WvNavButton>
<WvNavButton dark>Report</WvNavButton>
```

--------------------------------

### Basic Container Usage

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/container.mdx

A simple example of using the WvContainer component to wrap content. This demonstrates the default behavior of the container.

```jsx
<WvContainer>Just a container</WvContainer>
```

--------------------------------

### Light Theme Navigation Bar Example (React)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/cookbook/navigation-bar.mdx

Demonstrates the usage of the WvNavbar component in its default light theme. It includes a dropdown menu with items and navigation buttons.

```jsx
<WvNavbar title="SOME PROJECT">
  <WvNavDropdown label="Topic">
    <WvNavDropdownItem>Topic 1</WvNavDropdownItem>
    <WvNavDropdownItem>Topic 2</WvNavDropdownItem>
    <WvNavDropdownItem>Topic Something</WvNavDropdownItem>
  </WvNavDropdown>
  <WvNavButton active>About</WvNavButton>
  <WvNavButton>Report</WvNavButton>
</WvNavbar>
```

--------------------------------

### Basic Paragraph Group Example (React)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/paragraph-group.mdx

A standard implementation of the WvParagraphGroup component with a heading and paragraph content. This serves as a foundational example for integrating the component into your application.

```jsx
<WvParagraphGroup heading="เป้าหมาย">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the
    1500s, when an unknown printer took a galley of type and scrambled it to
    make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It
    was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software
    like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</WvParagraphGroup>
```

--------------------------------

### Importing WvSharer Component (React, Vue, Svelte)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/sharer.mdx

Demonstrates how to import the WvSharer component for different frameworks (React, Vue, Svelte) and its associated CSS. This is a common setup for using the component across various projects.

```jsx
import '@wevisdemo/ui/styles/sharer.css';
import WvSharer from '@wevisdemo/ui/{react,vue,svelte}/sharer';
```

--------------------------------

### Use WeVis Button Component in Svelte

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/index.mdx

Shows the process of importing and using the WeVis Button component in a Svelte project. This includes importing the necessary CSS file and the Svelte component, aliased as 'WvButton'.

```svelte
import '@wevisdemo/ui/styles/button.css';
import WvButton from '@wevisdemo/ui/svelte/button';

<WvButton>Hello</WvButton>;
```

--------------------------------

### WvNavbar Component Examples (React)

Source: https://context7.com/wevisdemo/design-system/llms.txt

The WvNavbar is a responsive navigation bar. It supports themes, logos, and customizable slots for navigation items. It requires '@wevisdemo/ui/styles/navbar.css' and '@wevisdemo/ui/react/navbar'.

```jsx
import '@wevisdemo/ui/styles/navbar.css';
import '@wevisdemo/ui/styles/nav-button.css';
import WvNavbar from '@wevisdemo/ui/react/navbar';
import WvNavButton from '@wevisdemo/ui/react/nav-button';

// Basic navbar
<WvNavbar />

// With title and navigation buttons
<WvNavbar title="MY PROJECT">
  <WvNavButton active>About</WvNavButton>
  <WvNavButton>Report</WvNavButton>
  <WvNavButton>Contact</WvNavButton>
</WvNavbar>

// Dark theme
<WvNavbar dark title="DARK PROJECT">
  <WvNavButton dark active>Home</WvNavButton>
  <WvNavButton dark>About</WvNavButton>
</WvNavbar>

// With animated logo
<WvNavbar animated title="ANIMATED" />

// With logo addon (partner logo)
<WvNavbar
  logoAddonSrc="/partner-logo.png"
  logoAddonAlt="Partner Logo"
  logoAddonWidth={100}
  logoAddonHeight={24}
/>

// With plus sign before addon logo
<WvNavbar
  logoAddonPlus
  logoAddonSrc="/collab-logo.png"
  title="COLLABORATION"
/>

// Always show navigation (disable hamburger on mobile)
<WvNavbar alwayShowSlot>
  <WvNavButton>Link 1</WvNavButton>
  <WvNavButton>Link 2</WvNavButton>
</WvNavbar>

// Custom home link
<WvNavbar homeHref="/dashboard" title="DASHBOARD" />
```

--------------------------------

### Import Global Stylesheet Directly

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/index.mdx

Imports the global stylesheet for the WeVis UI package directly into a JavaScript file or template. This method is applicable to most frameworks for applying all component styles.

```javascript
import '@wevisdemo/ui/styles/index.css';
```

--------------------------------

### Import Nav Dropdown Components (React, Vue, Svelte)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/nav-dropdown.mdx

Imports the necessary CSS and components for WvNavDropdown and WvNavDropdownItem. This example shows a generalized import statement that can be adapted for React, Vue, or Svelte.

```jsx
import '@wevisdemo/ui/styles/nav-dropdown-item.css';
import '@wevisdemo/ui/styles/nav-dropdown.css';
import WvNavDropdown from '@wevisdemo/ui/{react,vue,svelte}/nav-dropdown';
import WvNavDropdownItem from '@wevisdemo/ui/{react,vue,svelte}/nav-dropdown-item';
```

--------------------------------

### Import Global Stylesheet in Nuxt.js

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/index.mdx

Configures Nuxt.js to import the global stylesheet for the WeVis UI package. This ensures all component styles are applied across the application.

```javascript
// nuxt.config.js
{
  css: ['@wevisdemo/ui/styles/index.css'],
}
```

--------------------------------

### Use WeVis Button Component in Vue

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/index.mdx

Illustrates importing and utilizing the WeVis Button component within a Vue.js application. The example shows importing the component's CSS and the Vue component, prefixed with 'Wv'.

```vue
import '@wevisdemo/ui/styles/button.css';
import WvButton from '@wevisdemo/ui/vue/button';

<WvButton>Hello</WvButton>;
```

--------------------------------

### WvButtonGroup Component Usage in React

Source: https://context7.com/wevisdemo/design-system/llms.txt

Shows how to implement the WvButtonGroup component in React for grouping multiple WvButton components. Examples include horizontal and centered layouts.

```jsx
import '@wevisdemo/ui/styles/button-group.css';
import '@wevisdemo/ui/styles/button.css';
import WvButtonGroup from '@wevisdemo/ui/react/button-group';
import WvButton from '@wevisdemo/ui/react/button';

// Horizontal button group
<WvButtonGroup>
  <WvButton>Save</WvButton>
  <WvButton color="black">Cancel</WvButton>
</WvButtonGroup>

// Centered button group
<WvButtonGroup center>
  <WvButton>Primary Action</WvButton>
  <WvButton color="black">Secondary</WvButton>
</WvButtonGroup>
```

--------------------------------

### Initialize Cookie Consent with Callback (React)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/cookie-consent.mdx

Shows a React example of using the WvCookieConsent component. It defines an array of cookie options and a callback function `onCookieAccept` that is executed when the user accepts cookies. The component is configured with a policy URL, cookie options, and the accept callback.

```jsx
const cookieOptions = ['Functionality', 'Performance', 'Advertising'];

function onCookieAccept(option) {
  if (option['Performance']) {
    // Initialize or enable analytics
  }
}

<WvCookieConsent
  policyUrl="https://punchup.world"
  cookieOptions={cookieOptions}
  onAccept={onCookieAccept}
/>;
```

--------------------------------

### WvContainer Component Examples (React)

Source: https://context7.com/wevisdemo/design-system/llms.txt

The WvContainer is a layout component for organizing page content sections, with an optional heading. It requires '@wevisdemo/ui/styles/container.css' and '@wevisdemo/ui/react/container'.

```jsx
import '@wevisdemo/ui/styles/container.css';
import WvContainer from '@wevisdemo/ui/react/container';

// Container with heading
<WvContainer heading="About This Project">
  <p>Content goes here...</p>
  <p>More content...</p>
</WvContainer>

// Container without heading
<WvContainer>
  <div>Plain container content</div>
</WvContainer>
```

--------------------------------

### Small Paragraph Group Example (React)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/paragraph-group.mdx

Illustrates the usage of the WvParagraphGroup component with the 'small' prop enabled, resulting in a more compact display. This is useful for scenarios where space is limited.

```jsx
<WvParagraphGroup small heading="เขียนโปรแกรม">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    It has survived not only five centuries, but also the leap into electronic
    typesetting, remaining essentially unchanged.
  </p>
</WvParagraphGroup>
```

--------------------------------

### Active Nav Button Example

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/nav-button.mdx

Illustrates how to display an active state for the Nav Button component by using the 'active' prop. This is useful for indicating the currently selected navigation item.

```jsx
<WvNavButton active>About</WvNavButton>
```

--------------------------------

### Use WeVis Button Component in JSX (React)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/index.mdx

Demonstrates how to import and use the WeVis Button component in a React (JSX) environment. It includes importing the component's CSS and the component itself, aliasing it with 'Wv' to prevent naming conflicts.

```jsx
import '@wevisdemo/ui/styles/button.css';
import WvButton from '@wevisdemo/ui/react/button';

<WvButton>Hello</WvButton>;
```

--------------------------------

### WvButtonLink: With Icon (JSX)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/button-link.mdx

Demonstrates how to include an SVG icon within the WvButtonLink component. This example shows a feedback button with an accompanying icon.

```jsx
<WvButtonLink href="https://wevis.info/">
  <svg
    width="21"
    height="21"
    viewBox="0 0 21 21"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g clip-path="url(#clip0_314_173)">
      <path
        d="M7.03582 2.86356H1.17529V19.4081H19.8247V2.86356C19.8247 2.86356 15.306 2.86356 13.9642 2.86356"
        stroke="currentColor"
        stroke-width="2"
        stroke-miterlimit="10"
      />
      <path
        d="M16.0317 8.65536L10.7284 13.9587L5.42513 8.65536"
        stroke="currentColor"
        stroke-width="2"
        stroke-miterlimit="10"
      />
      <line
        x1="10.667"
        y1="0.5"
        x2="10.667"
        y2="13"
        stroke="currentColor"
        stroke-width="2"
      />
    </g>
    <defs>
      <clipPath id="clip0_314_173">
        <rect
          width="20.8333"
          height="20"
          fill="white"
          transform="translate(0.0834961 0.5)"
        />
      </clipPath>
    </defs>
  </svg>
  <span>Feedback</span>
</WvButtonLink>
```

--------------------------------

### Render Button Link Component (React)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/button-link.mdx

Provides a basic example of rendering the WvButtonLink component in a React application. The component accepts an 'href' prop to define the link's destination.

```jsx
<WvButtonLink href="https://wevis.info/">WeVis</WvButtonLink>
```

--------------------------------

### WvNavButton Component Examples (React)

Source: https://context7.com/wevisdemo/design-system/llms.txt

The WvNavButton is a navigation button for use within WvNavbar. It supports active states and dark/light themes. It requires '@wevisdemo/ui/styles/nav-button.css' and '@wevisdemo/ui/react/nav-button'.

```jsx
import '@wevisdemo/ui/styles/nav-button.css';
import WvNavButton from '@wevisdemo/ui/react/nav-button';

// Basic nav button
<WvNavButton onClick={() => navigate('/about')}>About</WvNavButton>

// Active state (current page)
<WvNavButton active>Home</WvNavButton>

// Dark theme (for dark navbar)
<WvNavButton dark active>Active Dark</WvNavButton>
<WvNavButton dark>Normal Dark</WvNavButton>
```

--------------------------------

### Button with Icon and Text (React)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/button.mdx

Provides an example of rendering a button that includes an SVG icon alongside text. This showcases how to structure content within the WvButton component for combined visual and textual elements.

```jsx
<WvButton>
  <svg
    width="21"
    height="21"
    viewBox="0 0 21 21"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g clip-path="url(#clip0_314_173)">
      <path
        d="M7.03582 2.86356H1.17529V19.4081H19.8247V2.86356C19.8247 2.86356 15.306 2.86356 13.9642 2.86356"
        stroke="currentColor"
        stroke-width="2"
        stroke-miterlimit="10"
      />
      <path
        d="M16.0317 8.65536L10.7284 13.9587L5.42513 8.65536"
        stroke="currentColor"
        stroke-width="2"
        stroke-miterlimit="10"
      />
      <line
        x1="10.667"
        y1="0.5"
        x2="10.667"
        y2="13"
        stroke="currentColor"
        stroke-width="2"
      />
    </g>
    <defs>
      <clipPath id="clip0_314_173">
        <rect
          width="20.8333"
          height="20"
          fill="white"
          transform="translate(0.0834961 0.5)"
        />
      </clipPath>
    </defs>
  </svg>

  <span>Feedback</span>
</WvButton>
```

--------------------------------

### WvParagraphGroup Component Examples (React)

Source: https://context7.com/wevisdemo/design-system/llms.txt

The WvParagraphGroup is a content grouping component for text sections, supporting optional headings and regular/small variants. It requires '@wevisdemo/ui/styles/paragraph-group.css' and '@wevisdemo/ui/react/paragraph-group'.

```jsx
import '@wevisdemo/ui/styles/paragraph-group.css';
import WvParagraphGroup from '@wevisdemo/ui/react/paragraph-group';

// Regular paragraph group
<WvParagraphGroup heading="Section Title">
  <p>First paragraph of content explaining the topic.</p>
  <p>Second paragraph with more details.</p>
</WvParagraphGroup>

// Small variant
<WvParagraphGroup small heading="Small Section">
  <p>Compact content with smaller heading.</p>
</WvParagraphGroup>

// Without heading
<WvParagraphGroup>
  <p>Standalone paragraph content.</p>
</WvParagraphGroup>
```

--------------------------------

### WvNavButtonLink Component Examples (React)

Source: https://context7.com/wevisdemo/design-system/llms.txt

The WvNavButtonLink is a navigation link styled as a button for external or internal links within the navbar. It supports dark themes. It requires '@wevisdemo/ui/styles/nav-button-link.css' and '@wevisdemo/ui/react/nav-button-link'.

```jsx
import '@wevisdemo/ui/styles/nav-button-link.css';
import WvNavButtonLink from '@wevisdemo/ui/react/nav-button-link';

// External link (opens in new tab by default)
<WvNavButtonLink href="https://github.com/wevisdemo">
  GitHub
</WvNavButtonLink>

// Internal link
<WvNavButtonLink href="/docs" target="_self" rel="">
  Documentation
</WvNavButtonLink>

// Dark theme variant
<WvNavButtonLink href="https://wevis.info" dark>
  WeVis
</WvNavButtonLink>
```

--------------------------------

### WvNavDropdown Component Examples (React)

Source: https://context7.com/wevisdemo/design-system/llms.txt

The WvNavDropdown is a dropdown menu component for the navbar. It displays a list of items when clicked and supports dark themes. It requires '@wevisdemo/ui/styles/nav-dropdown.css', '@wevisdemo/ui/styles/nav-dropdown-item.css', '@wevisdemo/ui/react/nav-dropdown', and '@wevisdemo/ui/react/nav-dropdown-item'.

```jsx
import '@wevisdemo/ui/styles/nav-dropdown.css';
import '@wevisdemo/ui/styles/nav-dropdown-item.css';
import WvNavDropdown from '@wevisdemo/ui/react/nav-dropdown';
import WvNavDropdownItem from '@wevisdemo/ui/react/nav-dropdown-item';

// Dropdown menu with items
<WvNavDropdown label="Projects">
  <WvNavDropdownItem>Project A</WvNavDropdownItem>
  <WvNavDropdownItem>Project B</WvNavDropdownItem>
  <WvNavDropdownItem>Project C</WvNavDropdownItem>
</WvNavDropdown>

// Dark theme dropdown
<WvNavDropdown dark label="Resources">
  <WvNavDropdownItem dark>Documentation</WvNavDropdownItem>
  <WvNavDropdownItem dark>API Reference</WvNavDropdownItem>
</WvNavDropdown>
```

--------------------------------

### WvFooter Component Examples (React)

Source: https://context7.com/wevisdemo/design-system/llms.txt

The WvFooter is a branded footer component with a logo, terms of use link, and social media links. It supports light and dark themes. It requires '@wevisdemo/ui/styles/footer.css' and '@wevisdemo/ui/react/footer'.

```jsx
import '@wevisdemo/ui/styles/footer.css';
import WvFooter from '@wevisdemo/ui/react/footer';

// Light theme (default)
<WvFooter />

// Dark theme
<WvFooter dark />
```

--------------------------------

### Applying Light Theme to WvSharer

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/sharer.mdx

Demonstrates the use of the 'light' prop to apply a light theme to the WvSharer component. This is useful for improving visibility on dark backgrounds.

```jsx
<WvSharer light />
```

--------------------------------

### Applying Outline Style to WvSharer

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/sharer.mdx

Shows how to use the 'outline' prop to render the WvSharer component with an outline style. This can be combined with the 'light' prop for different visual effects.

```jsx
<WvSharer outline />
<WvSharer light outline />
```

--------------------------------

### WvButton Component Usage Across Frameworks

Source: https://context7.com/wevisdemo/design-system/llms.txt

Demonstrates the usage of the WvButton component in React, Vue, and Svelte, showcasing basic functionality, color variations, size adjustments, and integration with icons.

```jsx
// React
import '@wevisdemo/ui/styles/button.css';
import WvButton from '@wevisdemo/ui/react/button';

// Vue
import WvButton from '@wevisdemo/ui/vue/button';

// Svelte
import WvButton from '@wevisdemo/ui/svelte/button';

// Basic usage
<WvButton onClick={() => console.log('Clicked!')}>
  Click Me
</WvButton>

// With different colors
<WvButton color="blue">Blue (default)</WvButton>
<WvButton color="black">Black</WvButton>
<WvButton color="white">White (for dark backgrounds)</WvButton>

// Small variant
<WvButton small color="black">Small Button</WvButton>

// With icon
<WvButton>
  <svg width="21" height="21" viewBox="0 0 21 21" fill="none">
    <path d="M7 2.8H1.2v16.5h18.6V2.8H14" stroke="currentColor" strokeWidth="2"/>
    <path d="M16 8.6L10.7 14 5.4 8.6" stroke="currentColor" strokeWidth="2"/>
    <line x1="10.7" y1="0.5" x2="10.7" y2="13" stroke="currentColor" strokeWidth="2"/>
  </svg>
  <span>Download</span>
</WvButton>
```

--------------------------------

### Basic WvSharer Usage

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/sharer.mdx

Shows the fundamental implementation of the WvSharer component, requiring only the 'url' prop to initiate sharing. The component defaults to the current window location if no URL is provided.

```jsx
<WvSharer url="https://wevis.info" />
```

--------------------------------

### Display Image with Alt Text and Feedback Button

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/cookbook/about-page.mdx

This snippet demonstrates how to display an image using a data URI for the source, along with an associated 'Feedback' button. It utilizes a WvButton component nested within a WvButtonGroup, all enclosed in a WvContainer.

```html
<img src="data:image/png;base64,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" alt=
```

--------------------------------

### Import Button Component (React, Vue, Svelte)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/button.mdx

Demonstrates how to import the WvButton component and its associated styles for use in React, Vue, or Svelte projects. It specifies the path for importing the component and CSS files.

```jsx
import '@wevisdemo/ui/styles/button.css';
import WvButton from '@wevisdemo/ui/{react,vue,svelte}/button';
```

--------------------------------

### Import Nav Button Component (React, Vue, Svelte)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/nav-button.mdx

Demonstrates how to import the WvNavButton component and its associated styles for use in React, Vue, or Svelte projects. Ensure the correct path for your framework is used.

```jsx
import '@wevisdemo/ui/styles/nav-button.css';
import WvNavButton from '@wevisdemo/ui/{react,vue,svelte}/nav-button';
```

--------------------------------

### Basic Navbar Usage (React)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/navbar.mdx

Renders a basic Navbar component. This is the simplest way to integrate the Navbar into your application.

```jsx
<WvNavbar />
```

--------------------------------

### Import Button Link Component (React, Vue, Svelte)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/button-link.mdx

Demonstrates how to import the WvButtonLink component for use in React, Vue, and Svelte projects. It also shows the necessary CSS import for styling.

```jsx
import '@wevisdemo/ui/styles/button-link.css';
import WvButtonLink from '@wevisdemo/ui/{react,vue,svelte}/button-link';
```

--------------------------------

### Importing Container Component (React, Vue, Svelte)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/container.mdx

Demonstrates how to import the Container component and its associated styles for React, Vue, and Svelte projects. Ensure the correct path for your framework.

```jsx
import '@wevisdemo/ui/styles/container.css';
import WvContainer from '@wevisdemo/ui/{react,vue,svelte}/container';
```

--------------------------------

### Import Navbar and NavButton Components (React)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/navbar.mdx

Imports necessary components and styles for using the Navbar and NavButton in a React application. Ensure the CSS files are correctly linked.

```jsx
import '@wevisdemo/ui/styles/navbar.css';
import WvNavbar from '@wevisdemo/ui/{react,vue,svelte}/navbar';
```

--------------------------------

### WvButtonGroup Component Usage

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/button-group.mdx

This snippet demonstrates the basic usage of the WvButtonGroup component, wrapping multiple WvButton elements. It also shows the necessary CSS and component imports.

```APIDOC
## WvButtonGroup Component

### Description
A container for buttons that aligns them horizontally on desktop and vertically on mobile.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```jsx
import '@wevisdemo/ui/styles/button-group.css';
import '@wevisdemo/ui/styles/button.css';
import WvButton from '@wevisdemo/ui/{react,vue,svelte}/button';
import WvButtonGroup from '@wevisdemo/ui/{react,vue,svelte}/button-group';

<WvButtonGroup>
  <WvButton>A</WvButton>
  <WvButton>B</WvButton>
  <WvButton>C</WvButton>
</WvButtonGroup>
```

### Response
#### Success Response (200)
N/A (Component Rendering)

#### Response Example
N/A (Component Rendering)
```

--------------------------------

### Navbar with Logo Addon and Plus Icon (React)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/navbar.mdx

Demonstrates using a logo addon with a preceding plus icon. This configuration can be used to indicate an addition or a special feature.

```jsx
<WvNavbar
  logoAddonPlus
  logoAddonSrc="https://raw.githubusercontent.com/microsoft/fluentui-emoji/main/assets/Sparkles/3D/sparkles_3d.png"
/>
```

--------------------------------

### Enabling Copy Link Functionality in WvSharer

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/sharer.mdx

Demonstrates how to enable the 'allowCopyLink' prop in the WvSharer component, which adds functionality to copy the shareable link to the clipboard. This can be combined with other styling props.

```jsx
<WvSharer allowCopyLink />
<WvSharer allowCopyLink outline />
<WvSharer allowCopyLink light />
<WvSharer allowCopyLink light outline />
```

--------------------------------

### Render Footer in Dark Theme

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/footer.mdx

Illustrates how to render the WvFooter component with the 'dark' prop enabled for a dark theme appearance.

```jsx
<WvFooter dark />
```

--------------------------------

### Import Footer Component (React, Vue, Svelte)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/footer.mdx

Demonstrates how to import the WvFooter component and its associated styles. This import statement supports multiple framework integrations.

```jsx
import '@wevisdemo/ui/styles/footer.css';
import WvFooter from '@wevisdemo/ui/{react,vue,svelte}/footer';
```

--------------------------------

### Import Nav Dropdown Item Component (React, Vue, Svelte)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/nav-dropdown-item.mdx

Demonstrates how to import the WvNavDropdownItem component and its associated CSS styles for React, Vue, and Svelte. Ensure the correct path for your framework is used.

```jsx
import '@wevisdemo/ui/styles/nav-dropdown-item.css';
import WvNavDropdownItem from '@wevisdemo/ui/{react,vue,svelte}/nav-dropdown-item';
```

--------------------------------

### WvButtonLink Component Usage in React

Source: https://context7.com/wevisdemo/design-system/llms.txt

Illustrates how to use the WvButtonLink component in React for creating navigation links styled as buttons. It covers basic external and internal links, along with color and size variations.

```jsx
import '@wevisdemo/ui/styles/button-link.css';
import WvButtonLink from '@wevisdemo/ui/react/button-link';

// Basic external link (opens in new tab by default)
<WvButtonLink href="https://wevis.info">
  Visit WeVis
</WvButtonLink>

// Internal link (same tab)
<WvButtonLink href="/about" target="_self" rel="">
  About Us
</WvButtonLink>

// Different colors and sizes
<WvButtonLink href="/docs" color="black" small>
  Documentation
</WvButtonLink>

// Props: href (required), color, small, target (default: '_blank'), rel (default: 'nofollow noopener noreferrer')
```

--------------------------------

### Navbar with Dark Theme (React)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/navbar.mdx

Shows how to apply a dark theme to the Navbar and its child NavButtons. This is useful for contrasting backgrounds or specific design requirements.

```jsx
<WvNavbar dark title="SOME PROJECT">
  <WvNavButton dark active>
    About
  </WvNavButton>
  <WvNavButton dark>Report</WvNavButton>
</WvNavbar>
```

--------------------------------

### Import Cookie Consent Component (React, Vue, Svelte)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/cookie-consent.mdx

Demonstrates how to import the WvCookieConsent component from the '@wevisdemo/ui' package, supporting React, Vue, and Svelte. It also shows the necessary CSS import for styling.

```jsx
import '@wevisdemo/ui/styles/cookie-consent.css';
import WvCookieConsent from '@wevisdemo/ui/{react,vue,svelte}/cookie-consent';
```

--------------------------------

### Container with Heading and Content

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/container.mdx

Shows how to use the Container component with a 'heading' prop and child content. This is useful for creating sections with titles.

```jsx
<WvContainer heading="เกี่ยวกับโครงการ">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the
    1500s, when an unknown printer took a galley of type and scrambled it to
    make a type specimen book. It has survived not only five centuries, but also
    the leap into electronic typesetting, remaining essentially unchanged. It
    was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software
    like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</WvContainer>
```

--------------------------------

### Centering WvSharer Content

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/sharer.mdx

Explains how to center the content within the WvSharer component using the 'center' prop. This affects the alignment of the share icons and labels.

```jsx
<WvSharer center />
```

--------------------------------

### Basic Nav Dropdown Usage

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/nav-dropdown.mdx

Renders a basic navigation dropdown with a label and three items. This component is designed to be used within a navigation bar context.

```jsx
<WvNavDropdown label="Topic">
  <WvNavDropdownItem>Topic 1</WvNavDropdownItem>
  <WvNavDropdownItem>Topic 2</WvNavDropdownItem>
  <WvNavDropdownItem>Topic 3</WvNavDropdownItem>
</WvNavDropdown>
```

--------------------------------

### Customizing or Hiding Labels in WvSharer

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/sharer.mdx

Illustrates how to customize the share button's label or hide it entirely using the 'label' and 'hideLabel' props. This allows for flexible UI integration.

```jsx
<WvSharer label="Custom Label" />
<WvSharer hideLabel />
```

--------------------------------

### WvButtonLink Component API

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/button-link.mdx

Details the properties and usage of the WvButtonLink component.

```APIDOC
## WvButtonLink Component

### Description
A customizable button component that acts as a hyperlink, allowing for various styling options and link behaviors.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Props
- **href** (string) - Required - The URL the button link points to.
- **color** ('blue' | 'black' | 'white') - Optional - Sets the color theme of the button. Defaults to 'blue'.
- **small** (boolean) - Optional - If true, renders a smaller version of the button. Defaults to `false`.
- **target** (string | undefined) - Optional - Specifies where to open the linked document. Defaults to `'_blank'`.
- **rel** (string | undefined) - Optional - Specifies the relationship of the linked document. Defaults to `'nofollow noopener noreferrer'`.

#### Slot / Children
- **Content** - The content to be displayed within the button.

### Request Example
```jsx
<WvButtonLink href="https://wevis.info/">WeVis</WvButtonLink>

<WvButtonLink href="/about" color="black" small={true}>About Us</WvButtonLink>
```

### Response
#### Success Response (Component Render)
- **Rendered HTML** - The component renders an `<a>` tag with appropriate classes and attributes based on the provided props.

#### Response Example
```html
<a href="https://wevis.info/" class="wv-button-link wv-button-link--blue" target="_blank" rel="nofollow noopener noreferrer">
  WeVis
</a>
```
```

--------------------------------

### Import Paragraph Group Component (React, Vue, Svelte)

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/paragraph-group.mdx

Demonstrates how to import the WvParagraphGroup component and its associated CSS for different frontend frameworks. Ensure the correct path for your framework is used.

```jsx
import '@wevisdemo/ui/styles/paragraph-group.css';
import WvParagraphGroup from '@wevisdemo/ui/{react,vue,svelte}/paragraph-group';
```

--------------------------------

### Basic Usage of Nav Dropdown Item

Source: https://github.com/wevisdemo/design-system/blob/main/docs/src/pages/components/nav-dropdown-item.mdx

Shows the fundamental way to render a WvNavDropdownItem component with 'Topic 1' as its content. This component is intended to be used within a WvNavDropdown.

```jsx
<WvNavDropdownItem>Topic 1</WvNavDropdownItem>
```
Tokens:
Raw