Admin

name	type	size	perms	modified	actions
[parent directory]
.subframe/	dir	-	0775	2026-08-24 19:20:23
dist/	dir	-	0775	2026-09-15 05:28:31
node_modules/	dir	-	0775	2026-09-15 05:28:31
public/	dir	-	0775	2026-08-24 19:20:23
src/	dir	-	0775	2026-08-24 19:20:23
.env	file	277 B	0664	2025-07-31 16:04:49	edit
.env.example	file	209 B	0664	2025-07-29 09:30:17	edit
.gitignore	file	253 B	0664	2025-07-29 09:30:17	edit
.prettierrc	file	154 B	0664	2025-12-28 16:22:55	edit
AVAILABLE_COMPONENTS.md	file	3,014 B	0664	2025-07-29 09:30:17	edit
eslint.config.js	file	1,818 B	0664	2025-12-28 16:22:55	edit
index.html	file	909 B	0664	2026-01-04 00:52:54	edit
package.json	file	1,690 B	0664	2026-01-22 11:25:16	edit
postcss.config.js	file	80 B	0664	2025-07-29 09:30:17	edit
README.md	file	2,269 B	0664	2025-07-29 09:30:17	edit
tailwind.config.js	file	270 B	0664	2025-07-29 09:30:17	edit
tsconfig.app.json	file	827 B	0664	2025-07-29 09:30:17	edit
tsconfig.json	file	278 B	0664	2025-07-29 09:30:17	edit
tsconfig.node.json	file	630 B	0664	2025-07-29 09:30:17	edit
vite.config.ts	file	434 B	0664	2025-08-10 10:10:29	edit

editing: AVAILABLE_COMPONENTS.md

# Available Subframe UI Components

## Layout Components
- `DefaultPageLayout` - Main page layout with navbar
- `DialogLayout` - Dialog/modal layout
- `DrawerLayout` - Drawer/sidebar layout

## Navigation Components
- `Navbar_Mobile` - Top navigation bar with left/right slots
  - `Navbar_Mobile.NavItem` - Navigation item for the navbar

## Form Components
- `Button` - Primary button component
- `TextField` - Text input field
- `TextArea` - Multi-line text input
- `Select` - Dropdown select
- `Checkbox` - Checkbox input
- `CheckboxCard` - Checkbox with card styling
- `CheckboxGroup` - Group of checkboxes
- `RadioGroup` - Radio button group
- `RadioCardGroup` - Radio buttons with card styling
- `Switch` - Toggle switch
- `Slider` - Range slider
- `OAuthSocialButton` - Social login button

## Display Components
- `Avatar` - User avatar/profile picture
- `Badge` - Status badge
- `Alert` - Alert/notification message
- `Toast` - Toast notification
- `Progress` - Progress bar
- `Loader` - Loading spinner
- `Table` - Data table
- `Tabs` - Tab navigation
- `Accordion` - Collapsible content
- `TreeView` - Hierarchical tree view
- `Stepper` - Step indicator
- `VerticalStepper` - Vertical step indicator

## Interactive Components
- `IconButton` - Button with icon
- `LinkButton` - Link-styled button
- `DropdownMenu` - Dropdown menu
- `ContextMenu` - Right-click context menu
- `Dialog` - Modal dialog
- `FullscreenDialog` - Full-screen modal
- `Drawer` - Side drawer/panel
- `Tooltip` - Hover tooltip
- `CopyToClipboardButton` - Copy to clipboard functionality

## Chart Components
- `AreaChart` - Area chart
- `BarChart` - Bar chart
- `LineChart` - Line chart
- `PieChart` - Pie chart

## Utility Components
- `IconWithBackground` - Icon with background
- `SkeletonCircle` - Circular skeleton loader
- `SkeletonText` - Text skeleton loader
- `Calendar` - Date picker calendar
- `Breadcrumbs` - Navigation breadcrumbs
- `ToggleGroup` - Toggle button group

## Search Components
- `ListingsSearch` - Search component for listings
- `ListingSelect` - Select component for listings

## Usage Examples

### Basic Layout
```tsx
import { DefaultPageLayout } from '../ui/layouts/DefaultPageLayout';

<DefaultPageLayout>
  {/* Your content here */}
</DefaultPageLayout>
```

### Navigation Bar
```tsx
import { Navbar_Mobile } from '../ui/components/Navbar_Mobile';

<Navbar_Mobile
  leftSlot={
    <>
      <Navbar_Mobile.NavItem selected={true}>Home</Navbar_Mobile.NavItem>
      <Navbar_Mobile.NavItem>About</Navbar_Mobile.NavItem>
    </>
  }
  rightSlot={
    <>
      <Button>Login</Button>
    </>
  }
/>
```

### Form Components
```tsx
import { Button } from '../ui/components/Button';
import { TextField } from '../ui/components/TextField';

<TextField label="Email" placeholder="Enter your email">
  <TextField.Input />
</TextField>
<Button variant="brand-primary">Submit</Button>
```

## Import Path
All components should be imported from `../ui/components/ComponentName` or `../ui/layouts/LayoutName`.

cancel