# ljkui

> ljkui — a React component library. Themeable, ESM-only, ships its own CSS. Import components from `ljkui`, import `ljkui/styles.css` once, wrap your app in `<Theme>`.

## Setup

```tsx
// 1. install:  bun add ljkui
// 2. at the root of your app:
import { Theme } from 'ljkui';
import 'ljkui/styles.css';

export default function App() {
  return (
    <Theme>
      <YourApp />
    </Theme>
  );
}
```

## Rules

Read these before writing code. Each one fails quietly if you get it wrong.

- Import everything from the package root: `import { Button, Card } from 'ljkui'`. There are no per-component paths.
- `ljkui/styles.css` must be imported exactly once, at the app root.
- Using Tailwind? Put the import in a layer, or the library reset silently beats every Tailwind utility:
  `@layer theme, base, ljkui, components, utilities;` then `@import 'ljkui/styles.css' layer(ljkui);`
- Size, variant and radius props are strings, not numbers: `size="2"`, not `size={2}`.
- `<color>` below means any of: danger, warning, success, info, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone.
- The gray scale is fixed. There is no prop for it and no token to override — just use `color="gray"` or `var(--gray-*)`.
- The library ships no icon set. Import icons from whatever library you like and pass them as children: `<Button><Search /> Search</Button>`. Inside a Button or IconButton they are sized automatically, so an icon that carries no width/height of its own still comes out right.
- The library ships no font. Text inherits the host page's font; `--font-mono` is used for code if you define it.
- ESM only. There is no CommonJS build.

## Components

One line each: the export, then its props and the values they accept, with the default in brackets. `parts:` lists the sub-components of a namespace, written as `Tabs.Root`.

- `Accordion` — multiple=boolean (false), type=single|multiple, disabled=boolean (false), keepMounted=boolean (false), orientation=horizontal|vertical (vertical) — parts: Content, Item, Root, Trigger
- `Alert` — color=<color> — parts: Action, Actions, Description, Icon, Root, Title
- `AlertDialog` — size=1|2|3|4 (3) — parts: Action, Cancel, Close, Content, Description, Root, Title, Trigger
- `AspectRatio`
- `Autocomplete` — size=1|2|3 (2), variant=solid|translucent (translucent), color=<color> — parts: Clear, Content, Empty, Group, GroupLabel, Icon, Input, Item, List, Root, Row, Separator, Status, Trigger
- `Avatar` — size=0|1|2|3|4|5|6|7|8|9 (3), shape=circle|square (circle), color=<color>, highContrast=boolean, fallback=ReactNode
- `AvatarGroup` — color=<color> (gray), size=1|2|3|4|5|6|7|8|9 (3), shape=circle|square (circle) — parts: Avatar, Root
- `AvatarStack` — size=0|1|2|3|4|5|6|7|8|9 (3) — parts: Avatar, Root
- `Badge` — size=1|2 (1), variant=solid|soft|surface|outline (soft), color=<color>, highContrast=boolean
- `Bleed` — side=all|x|y|top|bottom|left|right (all), size=Responsive<"1" | "2" | "3" | "4"> (3)
- `Breadcrumb` — color=<color> (gray) — parts: Dropdown, DropdownItem, Item, Root
- `Button` — size=1|2|3|4 (2), variant=classic|solid|soft|surface|ghost (surface), color=<color>, highContrast=boolean
- `ButtonGroup` — orientation=horizontal|vertical (horizontal) — parts: Root, Separator, Text
- `Calendar` — isDisabled=boolean (false), isReadOnly=boolean (false), autoFocus=boolean (false), isInvalid=boolean, pageBehavior=visible|single (visible), firstDayOfWeek=sun|mon|tue|wed|thu|fri|sat — parts: Range, Root
- `Card` — size=1|2|3|4|5 (1), variant=surface|outline|ghost|soft (surface)
- `Carousel` — defaultValue=string | number (0), value=string | number, loop=boolean (false), orientation=horizontal|vertical (horizontal), scrollBehavior=smooth|instant (smooth) — parts: Item, Next, Previous, Root, ScrollMarker, ScrollMarkerGroup, Viewport
- `Chart` — data=ChartData[]
- `Checkbox` — size=1|2|3 (2), color=<color>, highContrast=boolean
- `CircularProgress` — size=1|2|3|4|5|6|7|8|9 (3), color=<color>, highContrast=boolean
- `Collapsible` — open=boolean, defaultOpen=boolean (false), disabled=boolean (false) — parts: Content, Root, Trigger
- `Combobox` — variant=solid|soft (soft), color=<color>, highContrast=boolean, size=1|2|3|4 (2) — parts: Chip, Chips, ChipsInput, Clear, Collection, Content, Empty, Group, GroupLabel, Icon, Input, InputRoot, InputSlot, Item, ItemIndicator, List, Root, Separator, Status, Trigger, Value
- `Command` — heading=ReactNode, value=string, disabled=boolean (false) — parts: Dialog, Empty, Group, Input, Item, List, Root, Separator, Shortcut
- `Container` — size=Responsive<"1" | "2" | "3" | "4"> (4), align=left|center|right (center)
- `ContextMenu` — shortcut=string, size=1|2|3 (2), color=<color>, variant=solid|translucent (translucent) — parts: CheckboxItem, Content, Group, GroupLabel, Item, RadioGroup, RadioItem, Root, Separator, Sub, SubContent, SubTrigger, Trigger
- `CreditCard` — face=front|back, defaultFace=front|back (front) — parts: Back, BackContent, Brand, BrandLogo, CVVField, Content, Errors, ExpiryField, Field, FieldError, FieldGroup, FieldLabel, Fieldset, Front, FrontFooter, FrontHeader, Input, LastFour, Logo, MagStripe, NumberField, Root, Title, Trigger
- `DataTable` — align=start|center|end|baseline|stretch, color=<color>, highContrast=boolean, orientation=horizontal|vertical (horizontal), size=1|2|3 (2), trim=normal|start|end|both — parts: Item, Label, Root, Value
- `DateField` — size=1|2|3|4 (2), color=<color>
- `DatePicker` — size=1|2|3|4 (2), color=<color>
- `DateRangePicker` — size=1|2|3|4 (2), color=<color>
- `Dialog` — size=1|2|3|4 (3) — parts: Close, Content, Description, Root, Title, Trigger
- `Drawer` — open=boolean, defaultOpen=boolean (false), disablePointerDismissal=boolean (false) — parts: Body, Close, Content, Header, Root, StickyFooter, Title, Trigger
- `DropdownMenu` — shortcut=string, size=1|2|3 (2), color=<color>, variant=solid|translucent (translucent) — parts: CheckboxItem, Content, Group, GroupLabel, Item, RadioGroup, RadioItem, Root, Separator, Sub, SubContent, SubTrigger, Trigger
- `Empty` — parts: Actions, Description, Header, Media, Root, Title
- `Field` — name=string, disabled=boolean (false), invalid=boolean — parts: Control, Description, Error, Item, Label, Root, Validity
- `Fieldset` — variant=legend|label (legend) — parts: Legend, Root
- `FilterChip` — size=1|2|3 (2), color=<color>
- `Form` — validationMode=onSubmit|onBlur|onChange (onSubmit)
- `Grid` — alignment=center|leading|trailing|top|bottom|topLeading|topTrailing|bottomLeading|bottomTrailing|centerFirstTextBaseline|centerLastTextBaseline|leadingFirstTextBaseline|leadingLastTextBaseline|trailingFirstTextBaseline|trailingLastTextBaseline (center) — parts: Item, Root, Row
- `HStack` — alignment=top|center|bottom|firstTextBaseline|lastTextBaseline (center)
- `HoverCard` — size=1|2|3 (2), variant=solid|translucent (translucent) — parts: Content, Root, Trigger
- `IconButton` — size=1|2|3|4 (2), variant=classic|solid|soft|surface|ghost (surface), color=<color>, highContrast=boolean
- `Input` — size=1|2|3|4 (2), variant=surface|soft (surface), color=<color> (gray) — parts: Control, Root, Slot
- `InputGroup` — size=1|2|3|4 (1), variant=classic|solid|soft|surface|ghost (ghost), color=<color> (gray) — parts: Addon, Button, Input, Root, Text, Textarea
- `InputOTP` — color=<color> (gray) — parts: Group, Root, Separator, Slot
- `Inset` — side=all|x|y|top|bottom|left|right (all), clip=border-box|padding-box (border-box), p=current|0, px=current|0, py=current|0, pt=current|0, pr=current|0, pb=current|0, pl=current|0
- `Item` — size=1|2|3 (2), variant=plain|outline|muted (plain) — parts: Actions, Content, Description, Group, Media, Root, Separator, Title
- `Kbd` — size=1|2|3|4|5|6|7|8|9
- `Lightbox` — open=boolean, defaultOpen=boolean (false), value=string | number, defaultValue=string | number (0), loop=boolean (false), viewTransition=boolean (false), morphTo=active|origin|closest (active), awaitImageDecode=boolean (true) — parts: Caption, Close, Content, Counter, Item, ItemGroup, Next, Previous, Root, Thumbnail, ThumbnailGroup, Trigger, Zoom, ZoomIn, ZoomOut
- `Link` — size=0|1|2|3|4|5|6|7|8|9, weight=light|regular|medium|semi-bold|bold, trim=normal|start|end|both, underline=auto|hover|always (auto), color=<color>, highContrast=boolean
- `Menubar` — orientation=horizontal|vertical (horizontal), modal=boolean (true), loopFocus=boolean (true) — parts: CheckboxItem, Content, Group, GroupLabel, Item, Menu, RadioGroup, RadioItem, Root, Separator, Sub, SubContent, SubTrigger, Trigger
- `Meter` — size=1|2|3|4|5|6 (4), color=<color>, highContrast=boolean
- `NavigationMenu` — delay=string | number (50), closeDelay=string | number (50), orientation=horizontal|vertical (horizontal) — parts: Content, Item, Link, List, Root, Trigger, Viewport
- `NumberField` — size=1|2|3|4 (2), variant=surface|soft (surface), color=<color> (gray), buttonLayout=split|trailing|none (trailing) — parts: Decrement, Increment, Input, Root, Slot
- `Overlay` — alignment=center|leading|trailing|top|bottom|topLeading|topTrailing|bottomLeading|bottomTrailing|centerFirstTextBaseline|centerLastTextBaseline|leadingFirstTextBaseline|leadingLastTextBaseline|trailingFirstTextBaseline|trailingLastTextBaseline (center) — parts: Content, Root
- `Pagination` — size=1|2|3 (2) — parts: Content, Ellipsis, Item, Link, Next, Previous, Root
- `Popover` — size=1|2|3|4 (2), variant=solid|translucent (translucent) — parts: Close, Content, Root, Trigger
- `Portal`
- `Progress` — size=1|2|3|4|5|6 (6), color=<color>, highContrast=boolean
- `RadioButtonGroup` — color=<color>, highContrast=boolean — parts: Icon, Item, Root
- `RadioGroup` — size=1|2|3 (2), color=<color>, highContrast=boolean — parts: Item, Root
- `Resizable` — withHandle=boolean, defaultSize=string | number (50), minSize=string | number (10), direction=horizontal|vertical (horizontal) — parts: Handle, Panel, Root
- `Result` — status=success|error|warning|info (info) — parts: Actions, Description, Header, Icon, Root, Title
- `ScrollArea` — size=1|2|3 (1), scrollbars=vertical|horizontal|both (both), type=auto|always|scroll|hover (hover), fadeEdges=false|true|vertical|horizontal (false)
- `Section` — size=Responsive<"1" | "2" | "3" | "4"> (3)
- `Select` — highContrast=boolean, size=1|2|3|4 (2), variant=classic|surface|soft|ghost (surface), color=<color> — parts: Content, Group, GroupLabel, Item, Root, Separator, Trigger
- `Separator` — size=1|2|3|4 (1), color=<color> (gray)
- `Sheet` — open=boolean, defaultOpen=boolean (false), dismissible=boolean (true) — parts: Body, Close, Content, Description, Header, NestedRoot, Root, Title, Trigger
- `Shine`
- `Sidebar` — side=start|end (start), variant=sidebar|floating|inset (sidebar), collapsible=offcanvas|icon|none (offcanvas) — parts: Content, Footer, Group, GroupAction, GroupContent, GroupLabel, Header, Input, Inset, Menu, MenuAction, MenuBadge, MenuButton, MenuItem, MenuSkeleton, MenuSub, MenuSubButton, MenuSubItem, Provider, Rail, Root, Separator, Trigger
- `Skeleton` — size=0|1|2|3|4|5|6|7|8|9 (3), shape=circle|square (circle), color=<color> (gray), highContrast=boolean — parts: Avatar, Box, Rect, Text
- `Slider` — size=1|2|3 (2), color=<color>, highContrast=boolean
- `Spacer`
- `Spinner` — size=1|2|3|4|5|6 (2), loading=boolean (true)
- `Stepper` — size=1|2|3 (2), orientation=horizontal|vertical (horizontal), color=<color>, highContrast=boolean
- `Switch` — size=1|2|3 (2), color=<color>, highContrast=boolean
- `Table` — justify=start|center|end, width=string | number, size=1|2 (2), variant=surface|ghost (surface), align=start|center|end|baseline — parts: Body, BottomBar, Cell, ColumnHeaderCell, ColumnHeaderCellButton, Footer, Header, Root, Row, RowHeaderCell, Table
- `Tabs` — size=1|2 (2), color=<color>, highContrast=boolean — parts: Content, List, Root, Trigger
- `TabsNav` — size=1|2 (2), color=<color>, highContrast=boolean — parts: Link, Root
- `Textarea` — size=1|2|3|4 (2), variant=surface|soft (surface), color=<color> (gray)
- `Theme` — hasBackground=boolean (true), appearance=inherit|light|dark (inherit), accentColor=<color> (blue), dangerColor=red|rose (red), warningColor=amber|yellow|orange (amber), successColor=green|emerald|teal (green), infoColor=sky|blue|cyan (sky)
- `Timeline` — size=1|2|3 (2) — parts: Item, Root
- `Toaster`
- `Toggle` — size=1|2|3|4 (2), variant=solid|soft|surface|ghost (soft), color=<color>, highContrast=boolean
- `ToggleGroup` — value=string, defaultValue=string — parts: Content, List, Root, Trigger
- `ToggleGroupNav` — parts: Link, Root
- `ToggleGroupRadioGroup` — value=string, disabled=boolean (false), defaultValue=string — parts: Item, Root
- `Tooltip` — content=ReactNode
- `TreeView` — size=1|2|3 (2), color=<color>, highContrast=boolean
- `Typography` — parts: Blockquote, Code, Em, Heading, Quote, Strong, Text
- `VStack` — alignment=leading|center|trailing (center)
- `VisuallyHidden`
- `WidgetStack` — orientation=horizontal|vertical (vertical) — parts: Item, Next, Prev, Root, Stack
- `ZStack` — alignment=center|leading|trailing|top|bottom|topLeading|topTrailing|bottomLeading|bottomTrailing|centerFirstTextBaseline|centerLastTextBaseline|leadingFirstTextBaseline|leadingLastTextBaseline|trailingFirstTextBaseline|trailingLastTextBaseline (center)

## More

- [llms-full.txt](https://ljkui.vercel.app/llms-full.txt): a working code example for every component, plus the full guides and prop descriptions.
- [https://ljkui.vercel.app](https://ljkui.vercel.app): the live component explorer.