@loudpacks/cards

Reusable card components for settings and UI patterns. Provides consistent accordion/collapsible cards across web and React Native platforms.

Installation

npm install @loudpacks/cards

Components

SettingsCard (Web)

Standard collapsible card component matching Noted app's UX/UI exactly.

Features:

• Accordion expand/collapse behavior
• Active state styling
• Exact measurements from Noted app (12px border radius, 16px padding, etc.)
• Tailwind CSS compatible
• TypeScript support

Usage:

import { SettingsCard } from '@loudpacks/cards/web';

function MySettings() {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <SettingsCard
      isAccordion={true}
      isExpanded={isExpanded}
      onToggle={() => setIsExpanded(!isExpanded)}
      headerActive={isExpanded}
      headerContent={
        <>
          {isExpanded ? (
            <ChevronDown className="h-6 w-6 text-muted-foreground" />
          ) : (
            <ChevronRight className="h-6 w-6 text-muted-foreground" />
          )}
          <span className="text-lg font-semibold">Settings Section</span>
        </>
      }
    >
      <div>Your settings content here</div>
    </SettingsCard>
  );
}

Design Tokens

Measurements match Noted app exactly:

| Property | Noted (RN) | Web (Tailwind) | |----------|-----------|----------------| | Border radius | 12px | rounded-xl | | Margin bottom | 12px | mb-3 | | Border width | 1px | border | | Header padding | 16px | p-4 | | Header gap | 12px | gap-3 | | Content padding | 16px | p-4 | | Title font size | 18px | text-lg | | Title font weight | 600 | font-semibold |

Related Packages

• @loudpacks/theme-web - Theme switcher with ThemeSettingsCard that uses SettingsCard
• @loudpacks/theme-native - React Native theme switcher (coming soon)

License

MIT