## RAW CSS
```css
.AppHeader {
@apply py-2 flex items-center justify-between flex-1 dark:border-black-300;
}
.AppSidebar {
@apply flex flex-row py-4 justify-center
relative dark:bg-black-700
h-screen hidden lg:flex border-r
border-gray-100 dark:border-black-400
bg-accent-50;
}
.AppSidebarItem {
@apply rounded-md items-center transition-colors border-transparent text-sm text-gray-600 font-medium
w-full pr-12 w-full py-1.5 px-3.5 flex space-x-2.5 transition-colors duration-300;
}
.AppSidebarCollapsed .AppSidebarItem {
@apply px-0.5 py-2 flex justify-center space-x-0;
}
.AppSidebarCollapsed .AppSidebarItem span,
.AppSidebarCollapsed .AppSidebarFooterItem span {
@apply hidden;
}
.AppSidebarItemActive {
@apply bg-accent-100 dark:bg-primary-300/10 dark:text-primary-contrast text-current font-medium border-b border-2 border-accent-200;
}
.AppSidebarCollapsed .AppSidebarItemActive {
@apply bg-primary-500;
}
.AppSidebarItemNotActive {
@apply dark:text-gray-300 dark:hover:text-white text-gray-600 ring-transparent
active:bg-gray-200 dark:active:bg-black-300 dark:active:bg-black-300
hover:bg-gray-50 dark:hover:bg-black-400 dark:bg-black-600;
}
.AppSidebarItemIcon {
@apply text-gray-600 dark:text-primary-contrast;
}
.AppSidebarItemActive .AppSidebarItemIcon {
@apply text-primary-600;
}
.AppSidebarCollapsed .AppSidebarItemActive .AppSidebarItemIcon {
@apply bg-primary-500 text-primary-contrast;
}
.AppSidebarFooterItem {
@apply flex text-sm space-x-2
items-center text-gray-500 hover:text-gray-800
dark:text-gray-300 dark:hover:text-white;
}
.AppSidebarCollapsed .AppSidebarFooterItem {
@apply justify-center;
}
.FixedHeader {
position: sticky;
top: 0;
@apply dark:bg-black-500/90 bg-white/90 z-10 w-full;
}
.FixedHeader ~ .Container {
position: relative;
top: 3rem;
}
```
## RADIX API SCHEMA CONVERSION
#### PROMPT
>Convert the CSS Styles to JSON using the CONVERSION_FORMAT and SCHEMA_FILTER. The goal is that the CSS Styles will be ready to use to build RADIX components dynamically including all styles and logic in portableText JSON components using Radix UI Framework.
```json
SCHEMA_FILTER = {
_type: 'NavigationMenu',
title: 'RADIX Navigation Menu',
description: 'This schema describes the API for the RADIX Navigation Menu component',
types: [
'Root',
'Sub',
'List',
'Item',
'Trigger',
'Content',
'Link',
'Indicator',
'Viewport',
'CSSVariables'
],
properties: [
'defaultValue',
'value',
'onValueChange',
'delayDuration',
'skipDelayDuration',
'dir',
'orientation',
'asChild',
'disableOutsidePointerEvents',
'onEscapeKeyDown',
'onPointerDownOutside',
'onFocusOutside',
'onInteractOutside',
'forceMount',
'active',
'onSelect',
'--radix-navigation-menu-viewport-width',
'--radix-navigation-menu-viewport-height'
],
child_properties: [
'[data-orientation]',
'[data-state]',
'[data-motion]',
'[data-disabled]',
'[data-active]'
]
}
```
## RADIX OUTPUT
```json
export const styles = {
_parent: 'NavigationMenu',
_component: '<NavigationMenu>',
_title: 'AppHeader',
_description:
'This schema describes the API for the RADIX Navigation Menu component',
_theme: [
'py-2',
'flex',
'items-center',
'justify-between',
'flex-1',
'dark:border-black-300',
],
_cn: ['AppHeader'],
_parsed: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flex: 1,
padding: '1rem 0',
border: '1px solid #000',
},
_comment: 'AppHeader Styles',
_props: [],
_blocks: [
{
_parent: 'NavigationMenu',
_children: 'Sub',
_component: '<NavigationMenu.Sub>',
_cn: [
'AppSidebar',
'relative',
'h-screen',
'hidden',
'lg:flex',
'border-r',
'border-gray-100',
'dark:border-black-400',
'bg-accent-50',
],
_theme: [
'flex',
'flex-row',
'py-4',
'justify-center',
'dark:bg-black-700',
],
_parsed: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
padding: '2rem 0',
position: 'relative',
height: '100vh',
visibility: 'hidden',
flex: '1 0 auto',
borderRight: '1px solid #ccc',
backgroundColor: '#f5f5f5',
},
_comment: 'AppSidebar Styles',
_props: [],
},
{
_parent: 'NavigationMenu',
_children: 'Item',
_component: '<NavigationMenu.Item>',
_cn: [
'AppSidebarItem',
'rounded-md',
'items-center',
'transition-colors',
'border-transparent',
'text-sm',
'text-gray-600',
'font-medium',
'w-full',
'pr-12',
'w-full',
'py-1.5',
'px-3.5',
'flex',
'space-x-2.5',
'transition-colors',
'duration-300',
],
_theme: [
'rounded-md',
'items-center',
'transition-colors',
'border-transparent',
'text-sm',
'text-gray-600',
'font-medium',
'w-full',
'pr-12',
'w-full',
'py-1.5',
'px-3.5',
'flex',
'space-x-2.5',
'transition-colors',
'duration-300',
],
_parsed: {
display: 'flex',
alignItems: 'center',
border: 'transparent',
fontSize: '0.75rem',
fontWeight: 600,
color: '#666',
marginRight: '6px',
padding: '4px 8px',
flex: '1 0 auto',
transition: 'all 0.3s',
},
_comment: 'AppSidebarItem Styles',
_props: [
'defaultValue',
'value',
'onValueChange',
'delayDuration',
'skipDelayDuration',
'dir',
'orientation',
'asChild',
'disableOutsidePointerEvents',
'onEscapeKeyDown',
'onPointerDownOutside',
'onFocusOutside',
'onInteractOutside',
'forceMount',
'active',
'onSelect',
'[data-orientation]',
'[data-state]',
'[data-motion]',
'[data-disabled]',
'[data-active]',
],
},
{
_parent: 'NavigationMenu',
_children: 'Item',
_component: '<NavigationMenu.Item>',
_cn: [
'AppSidebarItemActive',
'border-b',
'border-2',
'border-accent-200',
],
_theme: [
'bg-accent-100',
'dark:bg-primary-300/10',
'dark:text-primary-contrast',
'text-current',
'font-medium',
'border-b',
'border-2',
'border-accent-200',
],
_parsed: {
backgroundColor: '#f5f5f5',
color: '#222',
fontWeight: 600,
borderBottom: '2px solid #ccc',
},
_comment: 'AppSidebarItemActive Styles',
_props: [
'defaultValue',
'value',
'onValueChange',
'delayDuration',
'skipDelayDuration',
'dir',
'orientation',
'asChild',
'disableOutsidePointerEvents',
'onEscapeKeyDown',
'onPointerDownOutside',
'onFocusOutside',
'onInteractOutside',
'forceMount',
'active',
'onSelect',
'[data-orientation]',
'[data-state]',
'[data-motion]',
'[data-disabled]',
'[data-active]',
],
},
{
_parent: 'NavigationMenu',
_children: 'Item',
_component: '<NavigationMenu.Item>',
_cn: [
'AppSidebarItemNotActive',
'dark:text-gray-300',
'dark:hover:text-white',
'text-gray-600',
'ring-transparent',
'active:bg-gray-200',
'dark:active:bg-black-300',
'dark:active:bg-black-300',
'hover:bg-gray-50',
'dark:hover:bg-black-400',
'dark:bg-black-600',
],
_theme: [
'dark:text-gray-300',
'dark:hover:text-white',
'text-gray-600',
'ring-transparent',
'active:bg-gray-200',
'dark:active:bg-black-300',
'dark:active:bg-black-300',
'hover:bg-gray-50',
'dark:hover:bg-black-400',
'dark:bg-black-600',
],
_parsed: {
color: '#666',
backgroundColor: '#f5f5f5',
transition: 'all 0.3s',
'&:active': {
backgroundColor: '#ccc',
},
'&:hover': {
backgroundColor: '#eee',
},
},
_comment: 'AppSidebarItemNotActive Styles',
_props: [
'defaultValue',
'value',
'onValueChange',
'delayDuration',
'skipDelayDuration',
'dir',
'orientation',
'asChild',
'disableOutsidePointerEvents',
'onEscapeKeyDown',
'onPointerDownOutside',
'onFocusOutside',
'onInteractOutside',
'forceMount',
'active',
'onSelect',
'[data-orientation]',
'[data-state]',
'[data-motion]',
'[data-disabled]',
'[data-active]',
],
},
{
_parent: 'NavigationMenu',
_children: 'Item',
_component: '<NavigationMenu.Item>',
_cn: [
'AppSidebarItemIcon',
'text-gray-600',
'dark:text-primary-contrast',
],
_theme: ['text-gray-600', 'dark:text-primary-contrast'],
_parsed: {
color: '#666',
},
_comment: 'AppSidebarItemIcon Styles',
_props: [
'defaultValue',
'value',
'onValueChange',
'delayDuration',
'skipDelayDuration',
'dir',
'orientation',
'asChild',
'disableOutsidePointerEvents',
'onEscapeKeyDown',
'onPointerDownOutside',
'onFocusOutside',
'onInteractOutside',
'forceMount',
'active',
'onSelect',
'[data-orientation]',
'[data-state]',
'[data-motion]',
'[data-disabled]',
'[data-active]',
],
},
{
_parent: 'NavigationMenu',
_children: 'Item',
_component: '<NavigationMenu.Item>',
_cn: ['AppSidebarItemActive', 'AppSidebarItemIcon', 'text-primary-600'],
_theme: ['text-primary-600'],
_parsed: {
color: '#222',
},
_comment: 'AppSidebarItemActive .AppSidebarItemIcon Styles',
_props: [
'defaultValue',
'value',
'onValueChange',
'delayDuration',
'skipDelayDuration',
'dir',
'orientation',
'asChild',
'disableOutsidePointerEvents',
'onEscapeKeyDown',
'onPointerDownOutside',
'onFocusOutside',
'onInteractOutside',
'forceMount',
'active',
'onSelect',
'[data-orientation]',
'[data-state]',
'[data-motion]',
'[data-disabled]',
'[data-active]',
],
},
{
_parent: 'NavigationMenu',
_children: 'Footer',
_component: '<NavigationMenu.Footer>',
_cn: [
'AppSidebarFooterItem',
'flex',
'text-sm',
'space-x-2',
'items-center',
'text-gray-500',
'hover:text-gray-800',
'dark:text-gray-300',
'dark:hover:text-white',
],
_theme: [
'flex',
'text-sm',
'space-x-2',
'items-center',
'text-gray-500',
'hover:text-gray-800',
'dark:text-gray-300',
'dark:hover:text-white',
],
_parsed: {
display: 'flex',
fontSize: '0.875rem',
justifyContent: 'space-between',
alignItems: 'center',
color: '#666',
transition: 'all 0.3s',
'&:hover': {
color: '#888',
},
},
_comment: 'AppSidebarFooterItem Styles',
_props: [
'defaultValue',
'value',
'onValueChange',
'delayDuration',
'skipDelayDuration',
'dir',
'orientation',
'asChild',
'disableOutsidePointerEvents',
'onEscapeKeyDown',
'onPointerDownOutside',
'onFocusOutside',
'onInteractOutside',
'forceMount',
'active',
'onSelect',
'[data-orientation]',
'[data-state]',
'[data-motion]',
'[data-disabled]',
'[data-active]',
],
},
{
_parent: 'NavigationMenu',
_children: 'Viewport',
_component: '<NavigationMenu.Viewport>',
_cn: [
'FixedHeader',
'dark:bg-black-500/90',
'bg-white/90',
'z-10',
'w-full',
],
_theme: ['dark:bg-black-500/90', 'bg-white/90', 'z-10', 'w-full'],
_parsed: {
position: 'sticky',
top: 0,
backgroundColor: '#000',
backgroundOpacity: 0.9,
width: '100%',
zIndex: 10,
},
_comment: 'FixedHeader Styles',
_props: [
'defaultValue',
'value',
'onValueChange',
'delayDuration',
'skipDelayDuration',
'dir',
'orientation',
'asChild',
'disableOutsidePointerEvents',
'onEscapeKeyDown',
'onPointerDownOutside',
'onFocusOutside',
'onInteractOutside',
'forceMount',
'active',
'onSelect',
'--radix-navigation-menu-viewport-width',
'--radix-navigation-menu-viewport-height',
'[data-orientation]',
'[data-state]',
'[data-motion]',
'[data-disabled]',
'[data-active]',
],
},
],
}
```
### YAML RADIX FROM CSS PROMPT TEMPLATE
```
# /radix.yaml
# Radix Prompt Template
# This is a prompt template for creating a RADIX component. To use this template, fill out each field with the requested information.
# This is a prompt template for creating a RADIX component.
# To use this template, fill out each field with the requested information.
# The _parent field should contain the name of the RADIX component parent.
# The _component field should contain the JSX tag for the RADIX component.
# The _title field should contain a descriptive title for the RADIX component.
# The _description field should contain a description of the RADIX component.
# The _theme field should contain an array of strings representing the Tailwind CSS classes to apply.
# The _cn field should contain an array of strings representing the Tailwind CSS class names.
# The _parsed field should contain an object of key-value pairs representing the parsed CSS styles.
# The _blocks field should contain an array of objects containing the requested data.
# The _comment field should contain a description of the RADIX component.
_parent: Enter the name of the RADIX component parent (Data Format: String, Example: NavigationMenu)
_component: Enter the JSX tag for the RADIX component (Data Format: String, Example: <NavigationMenu>)
_title: Enter a descriptive title for the RADIX component (Data Format: String, Example: RADIX Navigation Menu)
_description: Enter a description of the RADIX component (Data Format: String, Example: This component is used to create a navigation menu)
_theme: Enter an array of strings representing the Tailwind CSS classes to apply (Data Format: Array of strings, Example: ['bg-white', 'text-black', 'flex'])
_cn: Enter an array of strings representing the Tailwind CSS class names (Data Format: Array of strings, Example: ['nav-menu', 'nav-menu-item', 'nav-menu-link'])
_parsed: Enter an object of key-value pairs representing the parsed CSS styles (Data Format: Object, Example: { backgroundColor: 'white', color: 'black', display: 'flex'})
_blocks: Enter an array of objects containing the following data:
- ref: (Data Format: String, Example: _parent('NavigationMenu'))
- _children: Enter the name of the RADIX component child (Data Format: String, Example: Root)
- _component: Enter the JSX tag for the RADIX component child (Data Format: String, Example: <NavigationMenu.Root>)
- _data: Enter an object of data used to map for this field (Data Format: Object, Example: { name: 'home', label: 'Home' })
- _cn: Enter an array of strings representing the Tailwind CSS class names (Data Format: Array of strings, Example: ['nav-menu-root', 'nav-menu-item-root'])
- _theme: Enter an array of strings representing the Tailwind CSS classes to apply (Data Format: Array of strings, Example: ['bg-white', 'text-black'])
- _parsed: Enter an object of key-value pairs representing the parsed CSS styles (Data Format: Object, Example: { backgroundColor: 'white', color: 'black'})
- _comment: Enter a description of what the CSS class name should do when used (Data Format: String, Example: This class will apply a white background color and a black text color to the navigation menu root item)
- _props: Enter an array of strings representing the RADIX component properties and/or child properties that would accomplish the functionality (Data Format: Array of strings, Example: ['defaultValue', 'value', 'onValueChange', 'delayDuration'])
_comment: Describe the RADIX component (Data Format: String, Example: This RADIX Navigation Menu component is used to create a hierarchical navigation menu with multiple levels of nested items)
```
### YAML RADIX_API_TEMPLATE
Convert SCHEMA_FILTER into a RADIX_API TEMPLATE that works for ANY Radix Component Type.
```
# /radix_api.yaml
# Radix API Template
# This is an API template for creating a RADIX component. To use this template, fill out each field with the requested information.
# This is an API template for creating a RADIX component.
# To use this template, fill out each field with the requested information.
# The _type field should contain the type of the RADIX component.
# The title field should contain a title for the RADIX component.
# The description field should contain a description of the RADIX component.
# The types field should contain an array of strings representing the RADIX component types.
# The properties field should contain an array of strings representing the RADIX component properties.
# The child_properties field should contain an array of strings representing the RADIX component child properties.
_type: Enter the type of the RADIX component (Data Format: String, Example: NavigationMenu)
title: Enter a title for the RADIX component (Data Format: String, Example: RADIX Navigation Menu)
description: Enter a description of the RADIX component (Data Format: String, Example: This component is used to create a navigation menu)
types: Enter an array of strings representing the RADIX component types (Data Format: Array of strings, Example: ['Root', 'Sub', 'List', 'Item', 'Trigger', 'Content', 'Link', 'Indicator', 'Viewport', 'CSSVariables'])
properties: Enter an array of strings representing the RADIX component properties (Data Format: Array of strings, Example: ['defaultValue', 'value', 'onValueChange', 'delayDuration', 'skipDelayDuration', 'dir', 'orientation', 'asChild', 'disableOutsidePointerEvents', 'onEscapeKeyDown', 'onPointerDownOutside', 'onFocusOutside', 'onInteractOutside', 'forceMount', 'active', 'onSelect', '--radix-navigation-menu-viewport-width', '--radix-navigation-menu-viewport-height'])
child_properties: Enter an array of strings representing the RADIX component child properties (Data Format: Array of strings, Example: ['[data-orientation]', '[data-state]', '[data-motion]', '[data-disabled]', '[data-active]'])
```
### CSS PRIMITIVE
```
{
[className]: {
[propertyName]: [propertyValue],
[subClassName]: {
[propertyName]: [propertyValue]
}
}
}
```
### CSS KEY-VALUE PAIR FORMAT
```
Generic Template: [className]:[propertyName]:[propertyValue];[subClassName].[propertyName]:[propertyValue];
```
Sign in with Wallet
Connect another wallet