···11+## Design Context
22+33+### Users
44+Developers building Svelte 5 applications — both the creator (Florian) for side projects and other devs adopting the kit. Usage ranges from quick side projects to more professional/production applications. Developers want components that look good out of the box without spending time on design decisions.
55+66+### Brand Personality
77+**Polished, friendly, versatile.** The current vibe is playful and warm (fox branding, pink accent, rounded corners), but the kit needs to credibly serve professional contexts too. Think: defaults that feel designed and approachable, not sterile or corporate — but never so playful that a business app looks unserious.
88+99+### Aesthetic Direction
1010+- **Visual tone**: Warm and refined with personality. Opinionated defaults that have a clear point of view, but easy to override for different contexts.
1111+- **Theme**: Both dark and light mode, fully supported. No preference for one over the other.
1212+- **Anti-references**: Generic Bootstrap/Material look. Corporate sterility. But also: overly cute/toy-like aesthetics that wouldn't work in a dashboard or admin panel.
1313+- **Key tension**: Playful enough to be memorable, professional enough to be versatile.
1414+1515+### Design Principles
1616+1. **Opinionated defaults, easy escape hatches** — Components should look great with zero config, but customization (colors, radius, fonts) should be a one-liner, not a fight.
1717+2. **Warm, not cute** — Personality comes from refined details (spacing, typography, subtle color), not from decoration or novelty.
1818+3. **Works everywhere** — A component should look at home in a personal blog AND a SaaS dashboard. The base aesthetic bridges both.
1919+4. **Dark and light as equals** — Neither mode is an afterthought. Both should feel intentional and polished.
2020+5. **Developer ergonomics first** — The API for customization matters as much as the visual output.
2121+2222+### Accessibility
2323+Target WCAG 2.1 AA as baseline. Ensure sufficient color contrast in both modes, keyboard navigation, focus indicators, and screen reader support.
···5151 description: 'The target attribute for all links in the post.',
5252 default: "'_blank'"
5353 },
5454+ extraEmbeds: {
5555+ type: 'Snippet',
5656+ description: 'Snippet for rendering custom embeds after the built-in embeds.'
5757+ },
5858+ onclickavatar: {
5959+ type: { type: 'function', definition: '() => void' },
6060+ description: 'Callback when the avatar is clicked. Takes priority over onclickhandle for the avatar.'
6161+ },
5462 children: {
5563 type: 'Snippet',
5664 description: 'Post content when not using htmlContent.'
···11+# Customization
22+33+foxui is designed to be opinionated by default but easy to customize. Colors, border radius, and fonts can all be changed with CSS variables — no build step required.
44+55+## Colors
66+77+foxui uses two color scales: **base** (neutrals) and **accent** (brand color). The default is pink accent on stone base.
88+99+### Switching colors
1010+1111+Add a color class to any element to retheme it and all its children:
1212+1313+```svelte
1414+<!-- Change accent color -->
1515+<div class="blue">
1616+ <Button>Now blue</Button>
1717+ <Badge>Also blue</Badge>
1818+</div>
1919+2020+<!-- Change base color -->
2121+<div class="zinc">
2222+ <Button variant="secondary">Zinc neutral</Button>
2323+</div>
2424+```
2525+2626+**Available accent colors:** red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
2727+2828+**Available base colors:** gray, zinc, neutral, stone, slate, taupe, mist, olive, mauve
2929+3030+### Theme Picker
3131+3232+Try it out — pick an accent and base color:
3333+3434+
···11+### Changing globally
22+33+To change the color for your entire app, add the class to your `<html>` or `<body>` element:
44+55+```html
66+<html class="__ACCENT__ __BASE__">
77+```
···11+### Custom colors
22+33+Override the CSS variables directly for full control:
44+55+```css
66+:root {
77+ --accent-500: oklch(0.65 0.2 250);
88+ /* set all shades 50-950 for best results */
99+}
1010+```
1111+1212+## Border Radius
1313+1414+All components use three radius tokens that you can override:
1515+1616+- `--ui-radius` — `1rem` (16px) — Buttons, inputs, cards, boxes
1717+- `--ui-radius-lg` — `1.25rem` (20px) — Modals, sidebars, large containers
1818+- `--ui-radius-sm` — `0.75rem` (12px) — Inner elements, menu items, small controls
1919+2020+### Changing globally
2121+2222+```css
2323+:root {
2424+ --ui-radius: 0.5rem;
2525+ --ui-radius-lg: 0.75rem;
2626+ --ui-radius-sm: 0.25rem;
2727+}
2828+```
2929+3030+### Using presets
3131+3232+Add a class to any ancestor element:
3333+3434+```svelte
3535+<!-- Sharp corners -->
3636+<div class="sharp">
3737+ <Button>Sharp</Button>
3838+</div>
3939+4040+<!-- Fully rounded (pill) -->
4141+<div class="pill">
4242+ <Button>Pill</Button>
4343+</div>
4444+```
4545+4646+### Scoped overrides
4747+4848+Like colors, radius can be scoped to any subtree:
4949+5050+```svelte
5151+<Button>Default radius</Button>
5252+5353+<div class="sharp">
5454+ <Button>Sharp radius</Button>
5555+ <Badge>Also sharp</Badge>
5656+</div>
5757+```
5858+5959+## Fonts
6060+6161+foxui ships with [Geist](https://vercel.com/font) as the default font. You can change fonts two ways: apply a preset class, or define your own.
6262+6363+### Using presets
6464+6565+Add a class to any ancestor element to scope the font — same pattern as colors and radius:
6666+6767+```svelte
6868+<!-- Default (Geist) -->
6969+<Button>Geist</Button>
7070+7171+<!-- Use system fonts -->
7272+<div class="system-font">
7373+ <Button>System font</Button>
7474+</div>
7575+7676+<!-- Use a serif -->
7777+<div class="serif-font">
7878+ <Button>Serif</Button>
7979+</div>
8080+8181+<!-- Use a monospace font everywhere -->
8282+<div class="mono-font">
8383+ <Button>Mono</Button>
8484+</div>
8585+```
8686+8787+**Built-in presets:** `geist` (default), `system-font`, `serif-font`, `mono-font`
8888+8989+### Defining your own font class
9090+9191+Create a class that sets the font variables — works anywhere in the DOM tree:
9292+9393+```css
9494+@import '@fontsource-variable/inter';
9595+9696+.inter {
9797+ --ui-font-sans: 'Inter Variable', sans-serif;
9898+}
9999+```
100100+101101+Then use it like any other class:
102102+103103+```svelte
104104+<div class="inter">
105105+ <Button>Inter font</Button>
106106+ <Badge>Also Inter</Badge>
107107+</div>
108108+```
109109+110110+### Changing globally
111111+112112+To change the default font for your entire app, override the variables on `:root` or add the class to `<html>`:
113113+114114+```css
115115+/* via CSS variable */
116116+:root {
117117+ --ui-font-sans: 'My Custom Font', sans-serif;
118118+}
119119+```
120120+121121+```html
122122+<!-- via class -->
123123+<html class="system-font">
124124+```
125125+126126+### The variables
127127+128128+- `--ui-font-sans` — Body text, UI elements (default: Geist)
129129+- `--ui-font-mono` — Code blocks, monospace text (default: Geist Mono)
130130+131131+## Combining customizations
132132+133133+All customization layers compose together:
134134+135135+```svelte
136136+<!-- Blue accent, sharp corners, custom font -->
137137+<div class="blue sharp">
138138+ <Button>Fully customized</Button>
139139+</div>
140140+```
141141+142142+```css
143143+:root {
144144+ --ui-font-sans: 'My Custom Font', sans-serif;
145145+ --ui-radius: 0.5rem;
146146+ --ui-radius-lg: 0.75rem;
147147+ --ui-radius-sm: 0.25rem;
148148+}
149149+```
···11+# Using foxui with AI Assistants
22+33+foxui exposes its component documentation in a plain-text format that AI assistants can consume directly. This makes it easy to use foxui with tools like Claude, ChatGPT, Cursor, Copilot, and others.
44+55+## The index
66+77+A full index of all documentation pages and components is available at this URL:
+39
apps/docs/src/routes/(main)/docs/llms/Rest.md
···11+This lists every docs page (Quick Start, Philosophy, Customization, Haptics) plus every component across all categories, with direct links to each page's full documentation.
22+33+## Per-component documentation
44+55+Each component has its own `llms.txt` endpoint with:
66+77+- A description of what the component does
88+- The full API reference (props, types, defaults)
99+- A working code example
1010+- Links to the underlying `bits-ui` primitives when applicable
1111+1212+Access any component's docs by appending `/llms.txt` to its URL:
1313+1414+```
1515+https://flo-bit.dev/ui-kit/components/core/button/llms.txt
1616+https://flo-bit.dev/ui-kit/components/social/post/llms.txt
1717+```
1818+1919+You can also grab the URL from the "llms.txt" button at the top of any component page.
2020+2121+## Using with Claude
2222+2323+Paste the URL into your conversation and ask Claude to fetch it. For example:
2424+2525+> Use the Button component from foxui (docs: https://flo-bit.dev/ui-kit/components/core/button/llms.txt) to build a sign-in form.
2626+2727+Claude will fetch the docs and have the full API signature to work with.
2828+2929+## Using with Cursor
3030+3131+Add foxui to your Cursor docs:
3232+3333+1. Open Cursor settings → Features → Docs
3434+2. Add a new doc with URL: `https://flo-bit.dev/ui-kit/docs/llms.txt`
3535+3. Reference it in your prompts with `@foxui`
3636+3737+## Using with other tools
3838+3939+Any tool that can fetch URLs or ingest plain text can consume these endpoints. The format is deliberately simple — plain text, no authentication, CORS-friendly.