> ## Documentation Index
> Fetch the complete documentation index at: https://v2.spacedrive.com/llms.txt
> Use this file to discover all available pages before exploring further.
# UI Primitives
Spacedrive's UI is built on a set of reusable primitives from `@sd/ui`. These components provide consistent styling and behavior across the application.
## Design Principles
### Composition Over Configuration
Primitives are simple, composable building blocks rather than complex configured components.
```tsx theme={null}
// Complex configuration
// Composable primitives
Name
{data.map(item => (
{item.name}
))}
```
### Semantic Color Usage
All primitives use semantic color tokens, never raw Tailwind colors.
```tsx theme={null}
// Raw colors
// Semantic colors
```
### Consistent Patterns
Common patterns are standardized across primitives:
**Card Pattern:**
```tsx theme={null}
{/* Content */}
```
**List Item Pattern:**
```tsx theme={null}
{/* Content */}
```
**Table Pattern:**
```tsx theme={null}
Column
Data
```
## Core Primitives
### Button
Versatile button component with multiple variants and sizes.
```tsx theme={null}
import { Button } from '@sd/ui';
```
**Variants:**
* `default` - Transparent with border, hover/active states
* `gray` - App button background with hover/focus states
* `accent` - Accent blue background with white text
* `subtle` - Transparent border, subtle hover
* `outline` - Sidebar line border style
* `dotted` - Dashed border for add/create actions
* `colored` - Custom colored backgrounds (pass bg color class)
* `bare` - No styling whatsoever
**Sizes:**
* `xs` - Extra small (px-1.5 py-0.5, text-xs)
* `sm` - Small (px-2 py-0.5, text-sm) - default
* `md` - Medium (px-2.5 py-1.5, text-sm)
* `lg` - Large (px-3 py-1.5, text-md)
* `icon` - Square icon button (!p-1)
**Best Practice:** Wrap icons and text in flex containers to prevent stacking:
```tsx theme={null}
```
### Input
Form input with semantic styling and size variants.
```tsx theme={null}
import { Input, Label } from "@sd/ui";
;
```
**Variants:**
* `default` - Standard input with border and background
* `transparent` - Transparent background, no border on focus
**Sizes:**
* `xs` - 25px height
* `sm` - 30px height (default)
* `md` - 36px height
* `lg` - 42px height
* `xl` - 48px height
**Props:**
* `error` - Shows error state (red border/ring)
* `icon` - Icon component or React node
* `iconPosition` - `'left'` | `'right'` (default: `'left'`)
* `right` - React node to display on the right side
* `inputElementClassName` - Additional classes for the input element itself
**Additional Components:**
* `SearchInput` - Input with MagnifyingGlass icon pre-configured
* `PasswordInput` - Input with eye icon toggle for show/hide password
* `TextArea` - Multi-line text input with same styling system
* `Label` - Semantic label component with slug prop for htmlFor
### Form Components
React Hook Form integration with automatic validation display.
```tsx theme={null}
import { Form, InputField, z } from "@sd/ui/src/forms";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
const schema = z.object({
username: z.string().min(3),
email: z.string().email(),
});
function MyForm() {
const form = useForm({
resolver: zodResolver(schema),
});
return (
);
}
```
### Switch
Toggle switch for boolean settings.
```tsx theme={null}
import { Switch } from "@sd/ui";
const [enabled, setEnabled] = useState(false);
Enable Feature
Description
;
```
### ShinyToggle
Animated toggle component for switching between multiple options with a smooth glowing indicator.
```tsx theme={null}
import { ShinyToggle } from "@sd/ui";
const [view, setView] = useState<"grid" | "list">("grid");
;
```
**Features:**
* Smooth animated indicator using Framer Motion
* Gradient background with glow effect
* Optional count badges
* Type-safe with generics
* Fully accessible
**Props:**
* `value` - Current selected value (generic type T)
* `onChange` - Callback when selection changes
* `options` - Array of `{ value: T, label: ReactNode, count?: number }`
* `className` - Additional classes for the container
### DropdownMenu
Context menu and dropdown with Radix UI.
```tsx theme={null}
import { DropdownMenu } from "@sd/ui";
Open Menu}>
;
```
## Glassmorphism Effect
Spacedrive's signature glassmorphism effect combines backdrop blur, transparency, and gradient borders.
```tsx theme={null}
{/* Top gradient border */}
{/* Bottom gradient border */}
{/* Content with noise texture */}
Content
```
**Noise Variants:**
* `noise` - Base noise texture
* `noise-faded` - Faded intensity
* `noise-sm` - Small grain size
## Progress Bars
Consistent progress bar pattern for resource usage.
```tsx theme={null}