Skip to content
lostcoords / ui

Components

Theming

The default light and dark themes use neutral surfaces and accents, with color available for statuses and avatars. The theme has eleven color roles. After installation, no token file is required.

Change your colors

Add overrides after the engine import in app/assets/tailwind/application.css. This example changes actions, links, selected states and keyboard focus to green. Soft backgrounds follow automatically. The default text color on primary buttons is white in light mode and dark in dark mode; set --primary-foreground if your color needs a different contrast. 

:root {
  --primary: oklch(46% 0.14 155);
}
html[data-theme="dark"] {
  --primary: oklch(75% 0.14 155);
}

Use --background for the page, --muted for cards, --foreground for text and --muted-foreground for hints. Matching utilities include bg-muted, text-muted-foreground and border-border.

Choose colors by purpose

You only need to override the roles you want to change. Status colors control both text and soft feedback backgrounds.

Theme colors
CSS property Value Used for
--background Page background
--foreground Main text and headings
--card Cards and grouped content
--card-foreground Text on cards
--card-input Fields on cards; defaults to --input
--card-secondary Secondary buttons on cards; defaults to --secondary
--popover Menus, popovers and dialogs
--popover-foreground Text on menus, popovers and dialogs
--primary Primary actions, links, selected states and keyboard focus
--primary-foreground Text and icons on a solid primary background
--secondary Secondary buttons
--secondary-foreground Text on secondary buttons
--muted Subtle backgrounds: badges, code, skeletons, table headers
--muted-foreground Secondary text, hints and placeholders
--accent Hovered rows, menu items and inline code
--accent-foreground Text on accent backgrounds
--destructive Errors and destructive actions
--success Successful actions and positive feedback
--warning Warnings and items needing attention
--border Dividers and outlines
--input Input and toggle fills
--ring Keyboard focus ring; unset, it follows --primary

Switch themes

Set data-theme="dark" on <html> for dark mode and Tailwind's dark: variant. Remove it for light mode. Your app controls the switch and saved preference.

Fonts, corners and shadows

Load your font, then set the body and heading families. The defaults use system fonts. 

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
}

Set radius variables on body for controls and cards. rounded-full buttons keep their pill shape. --lc-shadow controls the shared surface shadow. 

:root {
  --radius: 0.375rem;
  --lc-shadow: 0 2px 12px rgb(0 0 0 / 0.08);
}

html[data-theme="dark"] {
  --lc-shadow: 0 2px 12px rgb(0 0 0 / 0.3);
}

For one component, use class:. See Foundations for typography, Japanese text and spacing.

Browse the color roles, typography, spacing and appearance settings for defaults, current theme values and page-scoped override names.