AshFormBuilder.Themes.Shadcn (AshFormBuilder v0.2.3)

View Source

Shadcn/UI-inspired minimal theme for AshFormBuilder.

Aesthetic

Clean, sharp, and highly accessible design matching the popular shadcn/ui component library. Features crisp borders, subtle shadows, and Apple-style minimalism without any visual gimmicks.

Configuration

Add to your config/config.exs:

config :ash_form_builder,
  theme: AshFormBuilder.Themes.Shadcn,
  theme_opts: [
    # Color scheme: :light (default) or :dark
    mode: :light,

    # Border radius: :none, :sm, :md (default), :lg, :full
    radius: :md,

    # Focus ring style: :zinc (default), :blue, :orange, :green
    focus_ring: :zinc
  ]

Visual Characteristics

  • Solid Backgrounds - Clean white or zinc backgrounds
  • Crisp Borders - Thin, precise borders (border-zinc-200/800)
  • Subtle Shadows - Minimal shadow-sm for depth
  • Sharp Focus - Clear focus-visible rings with offset
  • Zero Layout Shift - No hover animations that affect layout
  • High Contrast - Excellent readability and accessibility

Example Screenshot

Imagine form fields that look like they belong in Vercel's design system - clean, professional, and distraction-free.

Usage

No additional setup required beyond configuration:

# In your LiveView
def render(assigns) do
  ~H"""
  <.live_component
    module={AshFormBuilder.FormComponent}
    id="my-form"
    resource={MyApp.Resource}
    form={@form}
  />
  """
end

Dark Mode

Configure dark mode for dark backgrounds:

config :ash_form_builder,
  theme: AshFormBuilder.Themes.Shadcn,
  theme_opts: [mode: :dark]

Accessibility

This theme prioritizes accessibility:

  • High contrast ratios (WCAG AA compliant)
  • Clear focus indicators
  • Proper ARIA attributes
  • Keyboard navigation support
  • Screen reader friendly

Browser Support

Works in all modern browsers. Uses standard CSS properties:

  • :focus-visible for keyboard focus
  • CSS custom properties for theming
  • Standard flexbox and grid layouts