# Components
Lockness uses JSX for building UI components. Generate reusable components with
the Cli CLI.
## Creating Components
Use the `make:component` command to scaffold new JSX components:
```bash
deno task cli make:component Button
```
This creates `app/view/components/button.tsx`:
```typescript
export const Button = (props: { children?: any }) => {
return (
)
}
```
**Naming conventions:**
- **Component class name:** PascalCase (e.g., `Button`, `UserCard`)
- **File name:** snake_case (e.g., `button.tsx`, `user_card.tsx`)
- **Props interface:** `Props`
## Nested Components
Create components in subdirectories for better organization:
```bash
deno task cli make:component ui/Card
deno task cli make:component forms/Input
```
This creates:
- `app/view/components/ui/card.tsx`
- `app/view/components/forms/input.tsx`
## Component Props
Define typed props for your components:
```typescript
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'danger'
size?: 'sm' | 'md' | 'lg'
disabled?: boolean
onClick?: () => void
children?: any
}
export const Button = (props: ButtonProps) => {
const variant = props.variant || 'primary'
const size = props.size || 'md'
return (
)
}
```
## Layouts
Layouts wrap pages with common structure like navigation bars, sidebars, and
footers. They're higher-order components that provide consistent styling across
multiple pages.
**Creating a Layout:**
```typescript
// app/view/layouts/auth_layout.tsx
export const AuthLayout = ({
title,
children,
}: {
title: string
children: JSX.Element
}) => {
return (
<>
{title} - Lockness{children}
)
}
```
**Using a Layout in a Page:**
```typescript
import { AuthLayout } from '@view/layouts/auth_layout.tsx'
export const LoginPage = () => {
return (
)
}
```
**Layout Best Practices:**
- ✓ Use layouts for pages with shared structure (navigation, sidebars)
- ✓ Pass children as the main content area
- ✓ Extract reusable components (Navbar, Sidebar) into separate files
- ✓ Use consistent naming (e.g., `app_layout.tsx`, `docs_layout.tsx`)
## Using Components
Import and use components from `@lockness/ui/components` in your pages and
layouts:
```typescript
import {
Button,
Card,
CardContent,
CardHeader,
CardTitle,
Navbar,
NavbarBrand,
NavbarContent,
NavbarMenuItem,
} from '@lockness/ui/components'
export const HomePage = () => {
return (
LocknessDocsWelcome
)
}
```
## JSX Features
**✓ TypeScript support** - Full type checking for props and JSX
**✓ Server-side rendering** - Components render on the server for fast initial
load
**✓ Children support** - Pass children to components like React
## Component Structure
Organize your components by feature or type:
```plaintext
app/view/components/
├── ui/
│ ├── button.tsx
│ ├── card.tsx
│ └── badge.tsx
├── forms/
│ ├── input.tsx
│ ├── select.tsx
│ └── textarea.tsx
├── layout/
│ ├── header.tsx
│ ├── footer.tsx
│ └── sidebar.tsx
└── docs_sidebar.tsx
```
## Best Practices
**✓ Keep components small and focused** - Each component should do one thing
well
**✓ Use TypeScript interfaces for props** - Define clear contracts for component
APIs
**✓ Export const arrow functions** - Consistent with Lockness conventions
**✓ Group related components** - Use subdirectories for organization
## Next Steps
Now that you know how to create components, learn how to use them in pages and
layouts:
- [Routing & Controllers](https://lockness.land/docs/routing)
- [Getting Started Guide](https://lockness.land/docs/getting-started)
- [CLI Commands](https://lockness.land/docs/cli)