SVX Component Test Page

Testing all refactored components in their new locations

Core Components

SVXWrapper

Flexible layout component

Item 1
Item 2
Item 3

SVXLayout

Page layout component

App Layout
Landing Layout
Dashboard Layout

SVXFramework

UI framework component

Shadcn Framework
Material Framework
Bootstrap Framework

SVXWYSIWYG

WYSIWYG editor container

This is a WYSIWYG editor container

HTML Components

Form Components

Input, buttons, and form controls

Media Components

Image, audio, and video

Placeholder

Typography Components

Headings and text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Structure Components

Layout and structure

HTMLSection

Section Content

HTMLHeader

Header Content

HTMLMain

Main Content

HTMLFooter

Footer Content

HTMLNav

UI Components

UICard

Card component with header, content, and footer

Nested Card

This is a nested card

Card content goes here

UISlider

Slider component

50

UIToggle

Toggle switch component

UIColorPicker

Color picker component

Color Picker
#4f46e5

UIBrandLogo

Brand logo component

Controls Components

SVXControlsViewer

Controls viewer component

SVXControlsButton

Controls button component

SVXControlsEditor

Controls editor component

1

Editor Components

Individual editor components

1

Dev Components

SVXDevButton

Developer tools button

Dev Panel Components

Components used in the dev panel

These components are used inside the SVXDevPanel and can't be rendered individually here. They include:

  • SVXDevComponentInspector
  • SVXDevStateMonitor
  • SVXDevPresetEditor

Import Paths Reference

Core Components

import { SVX, useSVX } from "@/svx/components/SVX"
import { SVXLayout } from "@/svx/components/SVXLayout"
import { SVXFramework } from "@/svx/components/SVXFramework"
import { SVXWrapper } from "@/svx/components/SVXWrapper"
import { SVXWYSIWYG } from "@/svx/components/SVXWYSIWYG"

HTML Components

import { HTMLButton } from "@/svx/components/html/HTMLButton"
import { HTMLInput } from "@/svx/components/html/HTMLInput"
import { HTMLSelect } from "@/svx/components/html/HTMLSelect"
import { HTMLTextarea } from "@/svx/components/html/HTMLTextarea"
import { HTMLCheckbox } from "@/svx/components/html/HTMLCheckbox"
import { HTMLRadio } from "@/svx/components/html/HTMLRadio"
import { HTMLImage } from "@/svx/components/html/HTMLImage"
import { HTMLAudio } from "@/svx/components/html/HTMLAudio"
import { HTMLVideo } from "@/svx/components/html/HTMLVideo"
import { HTMLHeading } from "@/svx/components/html/HTMLHeading"
import { HTMLSection } from "@/svx/components/html/HTMLSection"
import { HTMLHeader } from "@/svx/components/html/HTMLHeader"
import { HTMLMain } from "@/svx/components/html/HTMLMain"
import { HTMLFooter } from "@/svx/components/html/HTMLFooter"
import { HTMLNav } from "@/svx/components/html/HTMLNav"

UI Components

import { UIBrandLogo } from "@/svx/components/ui/UIBrandLogo"
import { UICard, UICardHeader, UICardContent, UICardFooter } from "@/svx/components/ui/UICard"
import { UISlider } from "@/svx/components/ui/UISlider"
import { UIToggle } from "@/svx/components/ui/UIToggle"
import { UIColorPicker } from "@/svx/components/ui/UIColorPicker"

Controls Components

import { SVXControlsViewer } from "@/svx/components/controls/SVXControlsViewer"
import { SVXControlsEditor } from "@/svx/components/controls/SVXControlsEditor"
import { SVXControlsButton } from "@/svx/components/controls/SVXControlsButton"
import { SVXControlsEditorThemeCustom } from "@/svx/components/controls/SVXControlsEditorThemeCustom"
import { SVXControlsEditorFramework } from "@/svx/components/controls/SVXControlsEditorFramework"
import { SVXControlsEditorLanguage } from "@/svx/components/controls/SVXControlsEditorLanguage"
import { SVXControlsEditorTheme } from "@/svx/components/controls/SVXControlsEditorTheme"
import { SVXControlsEditorScale } from "@/svx/components/controls/SVXControlsEditorScale"
import { SVXControlsEditorRTL } from "@/svx/components/controls/SVXControlsEditorRTL"
import { SVXControlsEditorDebug } from "@/svx/components/controls/SVXControlsEditorDebug"

Dev Components

import { SVXDevButton } from "@/svx/dev/SVXDevButton"
import { SVXDevPanel } from "@/svx/dev/SVXDevPanel"
import { SVXDevComponentInspector, SVXDevStateMonitor, SVXDevPresetEditor } from "@/svx/dev/SVXDevComponents"