Design System Sandbox
This is a sandbox for the design system.
Spacing variables from props are parsed as css variables: cssVar('spacing-md') => var(--spacing-md)
Test
<TestContainer
$padding='spacing-md'
$margin='spacing-md'
$borderRadius='radius-xs'
>
<p>Test</p>
</TestContainer>
LightDark
Light
Gradient Light
Gradient Dark
Heading 3XL
Heading 2XL
Heading XL
Heading LG
Heading MD
Heading SM
Heading XS
Paragraph XL - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Paragraph LG - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Paragraph MD - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Paragraph SM - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Paragraph XS - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Custom Font Size Heading
Custom Line Height Paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Custom Font Weight Paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Multiple Custom Properties - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Layout Components
Basic Layouts
Responsive Columns
Custom Columns
Nested Grids
SectionLayout Component Style Guide
Input Components
Text Input with Slider
Text Input - Small
Text Input - Medium
Text Input - Large
Text Input - Required
Text Input - States
This field is required
Slider Input - Default
Slider predeterminado (0-100)
Slider Input - Custom Range
Selector de rango personalizado (0-50)
Slider Input - With Steps
Deslizador incremental (0-100, paso 10)
Slider Input - States
Slider deshabilitado
Select Field - Default
Select Field - Required
Select Field - States
This field is required
Inicia tu prueba gratuita
14 días. No se necesita tarjeta de crédito.