Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
257 commits
Select commit Hold shift + click to select a range
53e60c9
Button brutalist
aarongarciah Apr 17, 2026
9eb3999
Checkbox brutalist
aarongarciah Apr 17, 2026
ae8b3ea
Radio brutalist
aarongarciah Apr 17, 2026
9d7a180
Meter brutalist
aarongarciah Apr 17, 2026
c96afc7
Switch brutalist
aarongarciah Apr 17, 2026
fa18771
Button demos: remove active state
aarongarciah Apr 17, 2026
6a40485
Checkbox / Radio demos: avoid shrinking
aarongarciah Apr 17, 2026
30a8d94
Move styles around
aarongarciah Apr 22, 2026
0406cf7
Toggle and ToggleGroup brutalist
aarongarciah Apr 22, 2026
3cbdbf8
Accordion brutalist
aarongarciah Apr 22, 2026
884255f
Toggle: adjust icon size
aarongarciah Apr 22, 2026
23c49e4
Toggle: adjust icon size
aarongarciah Apr 22, 2026
9058b90
mergeProps brutalist
aarongarciah Apr 22, 2026
491f867
Avatar brutalist
aarongarciah Apr 22, 2026
1394a3a
Collapsible brutalist
aarongarciah Apr 22, 2026
662cdd6
Meter tweaks
aarongarciah Apr 22, 2026
df0142b
Progress brutalist
aarongarciah Apr 22, 2026
a83d5c3
Slider brutalist
aarongarciah Apr 23, 2026
3719e17
gray-50 -> white
aarongarciah Apr 23, 2026
5f39739
Explicit focus outline color
aarongarciah Apr 23, 2026
ce7c0f0
CheckboxGroup: update demos to use pure white and explicit outline color
aarongarciah Apr 23, 2026
f7f1070
Separator brutalist
aarongarciah Apr 23, 2026
3e2fec1
Tabs brutalist
aarongarciah Apr 23, 2026
35c098c
ScrollArea brutalist
aarongarciah Apr 23, 2026
55cd22e
Tabs: darker bg
aarongarciah Apr 23, 2026
6a38db3
Fix Button demo line-height
aarongarciah Apr 23, 2026
6e85bc7
Remove red-800 instances
aarongarciah Apr 23, 2026
7d23155
AlertDialog brutalist
aarongarciah Apr 23, 2026
d88bed6
ScrollArea brutalist
aarongarciah Apr 23, 2026
7bb754b
Select brutalist
aarongarciah Apr 23, 2026
6f46755
gray-900 -> gray-950
aarongarciah Apr 23, 2026
a64cf7c
Adjust buttons' paddings
aarongarciah Apr 23, 2026
d2e6fe1
ScrollArea: adjust paddings
aarongarciah Apr 23, 2026
45149c9
mergeProps: tweak buttons' paddings
aarongarciah Apr 23, 2026
09d73f7
Dialog brutalist
aarongarciah Apr 23, 2026
214ddb5
Input brutalist
aarongarciah Apr 24, 2026
7cf3610
DirectionProvider demo brutalist
aarongarciah Apr 24, 2026
b6c3825
Popover brutalist
aarongarciah Apr 24, 2026
57fe784
Tweak textarea in Dialog demo
aarongarciah Apr 24, 2026
d76bce8
Input: change outline offset
aarongarciah Apr 24, 2026
feab37e
Switch: fix outline color
aarongarciah Apr 24, 2026
781f720
All: remove outline offset
aarongarciah Apr 24, 2026
969ac5d
Collapsible: fix trigger's padding
aarongarciah Apr 24, 2026
5db1697
ScrollArea: adjustements
aarongarciah Apr 24, 2026
5da93f5
Dialog: remove unnecessary styles
aarongarciah Apr 24, 2026
4cedfbd
Dialog / AlertDialog: standardize backdrops
aarongarciah Apr 24, 2026
e9c4461
Reduce height of demo preview
aarongarciah Apr 24, 2026
7f27cdb
Button: new outline look
aarongarciah Apr 24, 2026
d11734c
Buttons: new outline style
aarongarciah Apr 24, 2026
0619ddc
Select: remove annoying popup outline
aarongarciah Apr 27, 2026
6219532
Select: adjust TW transition classes
aarongarciah Apr 27, 2026
8138687
AlertDialog: adjust TW transition classes
aarongarciah Apr 27, 2026
33b4200
Dialog: adjust TW transition classes
aarongarciah Apr 27, 2026
de96fc7
Select: tweak transitions
aarongarciah Apr 27, 2026
f8850a1
Popover: tweak transition
aarongarciah Apr 27, 2026
26df2b4
AlertDialog: tweak transition
aarongarciah Apr 27, 2026
4306b76
Dialog: tweak transition
aarongarciah Apr 27, 2026
000d6ce
Menu brutalist
aarongarciah Apr 27, 2026
e9d9604
Menu brutalist
aarongarciah Apr 27, 2026
4f0d9c1
ContextMenu brutalist
aarongarciah Apr 27, 2026
1110c93
useRender brutalist
aarongarciah Apr 27, 2026
b38154f
NumberField brutalist
aarongarciah Apr 27, 2026
f2b800c
Menu: fix arrow on dark mode
aarongarciah Apr 27, 2026
21e52bb
OTPField brutalist
aarongarciah Apr 27, 2026
add3a57
OTPField: tweak description color
aarongarciah Apr 27, 2026
ad2526c
Form brutalist
aarongarciah Apr 27, 2026
b624fea
Tooltip brutalist
aarongarciah Apr 27, 2026
a85aec2
Field brutalist
aarongarciah Apr 27, 2026
ab5fe3c
Fieldset brutalist
aarongarciah Apr 27, 2026
8e57688
Toolbar brutalist
aarongarciah Apr 27, 2026
82797f6
PreviewCard brutalist
aarongarciah Apr 27, 2026
2523e17
Dialog: remove remaining blur instances
aarongarciah Apr 28, 2026
72a6175
Dialog: improve inside scroll example
aarongarciah Apr 28, 2026
7dbb304
ContextMenu: remove unnecessary CSS
aarongarciah Apr 28, 2026
e54f39d
Prettier
aarongarciah Apr 28, 2026
57c0c0f
Remove unnecessary CSS
aarongarciah Apr 28, 2026
5b70d9c
Dialog: use regular button instead of ghost
aarongarciah Apr 28, 2026
5d7f1fa
Dialog: tweak nested transition
aarongarciah Apr 28, 2026
291260a
Toast brutalist
aarongarciah Apr 28, 2026
ae7800b
Menubar brutalist
aarongarciah Apr 28, 2026
e12ae4e
NavigationMenu brutalist
aarongarciah Apr 29, 2026
94a7964
Button: update hover, active, and disabled states
aarongarciah Apr 29, 2026
2d17e40
All: tweak hover, active, and disabled styles
aarongarciah Apr 29, 2026
2ed24bb
Menubar: chromeless
aarongarciah Apr 29, 2026
2e9533c
NavigationMenu: chromeless
aarongarciah Apr 29, 2026
ad43381
gray -> neutral
aarongarciah Apr 29, 2026
6845ad3
PreviewCard: remove leftover
aarongarciah Apr 29, 2026
641c15e
Remove unnecessary leading-* classes
aarongarciah Apr 29, 2026
d8901c3
Drawer brutalist
aarongarciah Apr 30, 2026
c790863
Drawer: remove outline
aarongarciah Apr 30, 2026
35e39f4
Autocomplete brutalist
aarongarciah Apr 30, 2026
12f7cc6
[REMOVE THIS BEFORE MERGING] Mark sidenav links
aarongarciah Apr 23, 2026
e68ba0a
Menubar: fix popup offset
aarongarciah Apr 30, 2026
63031e6
drop-shadow -> box-shadow
aarongarciah Apr 30, 2026
8d5cc50
Toast: fix offset in anchored demo
aarongarciah Apr 30, 2026
8f3b6d8
Toast: fix disabled icon button color
aarongarciah Apr 30, 2026
1551d60
px -> rem for shadows
aarongarciah Apr 30, 2026
f416403
Simplify TW class name
aarongarciah Apr 30, 2026
19846a8
Autocomplete: fix focus ring
aarongarciah Apr 30, 2026
1877654
Nicer TW shadow class names
aarongarciah Apr 30, 2026
02900a9
Autocomplete: improve grid layout demo
aarongarciah Apr 30, 2026
60d1b38
Select: change placeholder color
aarongarciah Apr 30, 2026
97dd5e0
Collapsible: improve chevron icon
aarongarciah Apr 30, 2026
6da2f3c
Combobox, icons & mooooore
aarongarciah May 5, 2026
fba9d16
Combobox: prevent group label obscuring scrollbar on iOS
aarongarciah May 5, 2026
d4c0312
Sticky group labels: avoid obscuring scrollbar on iOS
aarongarciah May 5, 2026
e5bdd68
Autocomplete: adjust button size
aarongarciah May 5, 2026
b1aec88
Autocomplete: tweaks
aarongarciah May 5, 2026
7ccfe2e
Autocomplete: command palette scrollbar tweaks
aarongarciah May 5, 2026
300dc86
data-[*] -> data-*
aarongarciah May 5, 2026
70e712d
Autocomplete: tweak alignment on command palette demo
aarongarciah May 5, 2026
d28d4a6
All: remove box-border TW classes
aarongarciah May 5, 2026
aa637ab
Autocomplete: improve spinner
aarongarciah May 5, 2026
a895340
Combobox: remove unnecessary code
aarongarciah May 5, 2026
6ae0b1e
Prettier
aarongarciah May 5, 2026
8190128
Autocomplete: tweak color
aarongarciah May 5, 2026
cb50213
Combobox: give some love to complex items
aarongarciah May 5, 2026
752f219
All: transparent -> explicit bg color for all text nputs
aarongarciah May 5, 2026
d75c741
Animation handbook page brutalist
aarongarciah May 5, 2026
b826653
Autocomplete: adjust items' padding
aarongarciah May 5, 2026
b9fc4da
Combobox: cleanup styles
aarongarciah May 5, 2026
7f383ff
Select: symetric padding on multiple demo
aarongarciah May 5, 2026
38c0cd9
Sticky group labels: fix on iOS
aarongarciah May 5, 2026
95c00a6
Drawer: no soft buttons
aarongarciah May 6, 2026
e493a74
Select: reduce left padding
aarongarciah May 6, 2026
fa0cac6
Forms handbook page brutalist
aarongarciah May 6, 2026
31db46b
Revert "[REMOVE THIS BEFORE MERGING] Mark sidenav links"
aarongarciah May 6, 2026
05b573c
All: improve field description color
aarongarciah May 6, 2026
7feadc4
All: tweak icons
aarongarciah May 6, 2026
c0f8508
Update snapshot
aarongarciah May 6, 2026
6af0f63
Menu: remove arrow and add separate demo
aarongarciah May 7, 2026
036d9f6
Remove unused var
aarongarciah May 7, 2026
c06adef
Tweak Tailwind sources
aarongarciah May 8, 2026
149b7ce
Accordion: make it outlined
aarongarciah May 8, 2026
16221d0
Buttons: line-height: 1
aarongarciah May 8, 2026
b226fa2
Remove sticky group labels
aarongarciah May 8, 2026
0b91400
Buttons: add gap
aarongarciah May 8, 2026
7e28a21
PreviewCard: fix button size
aarongarciah May 8, 2026
45d038b
Combobox: fix focus outline on TW demo
aarongarciah May 8, 2026
4a1b4b9
Group labels: remove uppercase and bold text
aarongarciah May 8, 2026
13a798e
Menu: fix separator margin on arrow demo
aarongarciah May 8, 2026
633e72b
Toast: add gap between title and desc
aarongarciah May 8, 2026
248ed49
PreviewCard: use high contrast text color
aarongarciah May 8, 2026
6a0850a
Dialog: spacing and typography tweaks
aarongarciah May 8, 2026
4d9540a
AlertDialog: spacing and typography tweaks
aarongarciah May 8, 2026
555ab95
NumberField: reduce padding
aarongarciah May 8, 2026
8ef2950
Popover: tweak spacing
aarongarciah May 8, 2026
34a4a97
Popover: use text buttons instead of icons buttons
aarongarciah May 8, 2026
39fdb98
Replace custom classes with TW counterpart
aarongarciah May 8, 2026
70a9968
Tabs: use text content instead of illustrations
aarongarciah May 8, 2026
f2a6c77
NumberField: tweak focus outline offset
aarongarciah May 11, 2026
0202f57
Prettier
aarongarciah May 11, 2026
92f986e
Drawer: realistic shadow
aarongarciah May 11, 2026
27d6352
Drawer: fix inline borders on nested drawers
aarongarciah May 11, 2026
71206e1
All: focus blue -> focus black/white
aarongarciah May 11, 2026
5d06f31
Remove unused CSS
aarongarciah May 11, 2026
40b0235
ScrollArea: make scrollbar thinner
aarongarciah May 11, 2026
c7fcc95
Accordion: remove active state
aarongarciah May 11, 2026
b0d1eee
Autocomplete / Combobox / Select: reduce block padding
aarongarciah May 11, 2026
ccb39b9
Autocomplete / Combobox: fix popup bg when overscrolling
aarongarciah May 11, 2026
6bfb111
Menu: use box-shadow instead of filter
aarongarciah May 11, 2026
07d86f9
All: drop-shadow -> box-shadow
aarongarciah May 11, 2026
4c7831f
All: fix colors
aarongarciah May 12, 2026
a51126c
Handbook: update code snippet
aarongarciah May 12, 2026
6ce66f0
All: 16px font-size for inputs on devices with coarse pointer
aarongarciah May 12, 2026
0ce7cb2
Bye light-dark()
aarongarciah May 12, 2026
b1ddd79
Toolbar: fix focus state
aarongarciah May 12, 2026
92d3604
Combobox / Autocomplete: placeholder styles
aarongarciah May 12, 2026
57cdf3d
Combobox: simplify placeholder
aarongarciah May 12, 2026
9ba6e5a
PreviewCard: better focus ring for links
aarongarciah May 12, 2026
a694354
Select: make popup cover trigger
aarongarciah May 12, 2026
efc76d6
Autocomplete / Combobox: fix virtualized list block padding
aarongarciah May 13, 2026
c9bed68
Combobox: fix trigger padding
aarongarciah May 13, 2026
b1df618
Select: fix popup width
aarongarciah May 13, 2026
d7ed2f1
Toast: fix arrow on anchored demo
aarongarciah May 13, 2026
cb38710
Icons: remove CSS dimensions
aarongarciah May 13, 2026
fe4d984
Remove unnecessary icon wrapper class names
aarongarciah May 13, 2026
dac18a6
Drawer: remove radius on iOS
aarongarciah May 13, 2026
12f056a
Tooltip: standardize scale instead of transform
aarongarciah May 13, 2026
96985e7
mergeProps: fix buttons styles
aarongarciah May 14, 2026
2114ae1
All: change focus rings
aarongarciah May 14, 2026
dcf9d5a
ToggleGroup: improve focus ring
aarongarciah May 14, 2026
5805a38
More focus rings
aarongarciah May 14, 2026
b143cb3
ScrollArea: fix focus ring
aarongarciah May 14, 2026
e6f60f7
Toolbar: fix focus ring
aarongarciah May 14, 2026
df18f75
Menubar: fix focus ring
aarongarciah May 14, 2026
f4d98fc
Toast: fix cut focus rings
aarongarciah May 14, 2026
1890c13
ToggleGroup: new icons
aarongarciah May 14, 2026
41fdd86
Select / Combobox: new caret up/down icon
aarongarciah May 14, 2026
97e5942
New Caret icons
aarongarciah May 14, 2026
a95b996
New ellipsis horizontal icon
aarongarciah May 14, 2026
184f12a
New plus and minus icons
aarongarciah May 14, 2026
f188c10
New check icon
aarongarciah May 14, 2026
1d2d19d
Select: new caret up/down icons for arrows
aarongarciah May 14, 2026
075f47c
New heart icon
aarongarciah May 14, 2026
effd059
New X icon
aarongarciah May 14, 2026
5112406
Select: reduce sideOffset to match Autocomplete/Combobox
aarongarciah May 14, 2026
59a758f
New Markdown icon
aarongarciah May 14, 2026
c4a982c
Tooltip: new icons
aarongarciah May 14, 2026
e2dfd7e
New npm icon
aarongarciah May 14, 2026
5ceebe2
New copy icon
aarongarciah May 14, 2026
d4b32a1
Website: new plus and minus icons
aarongarciah May 14, 2026
e7f268a
New GitHub icon
aarongarciah May 14, 2026
fe63c7d
New external link icon
aarongarciah May 14, 2026
1cf3075
New vertical ellipsis icon
aarongarciah May 14, 2026
59cd6f2
New check icon
aarongarciah May 14, 2026
fbbdfcf
New magnifying glass icon
aarongarciah May 14, 2026
df6a63a
New caret down icon
aarongarciah May 14, 2026
7c285c6
Prettier
aarongarciah May 15, 2026
bdb4228
NavigationMenu: undo some transition related changes
aarongarciah May 15, 2026
ae6feed
Select: remove padding from last group
aarongarciah May 15, 2026
d368b6f
Autocomplete / Combobox: fix popup height
aarongarciah May 15, 2026
649ff29
Autocomplete / Combobox: remove bottom padding from last group
aarongarciah May 15, 2026
e1704c0
Update snapshot tests
aarongarciah May 15, 2026
1ba540f
Dialog: fix focus ring on inside scroll demo
aarongarciah May 15, 2026
e32d23a
Prettier
aarongarciah May 15, 2026
3cf8f3f
Autocomplete: increase contrast on secondary text
aarongarciah May 15, 2026
14ccd76
Combobox: fix creatable gap
aarongarciah May 15, 2026
7db0ea4
Select: fix check icon column width
aarongarciah May 15, 2026
d15e767
Demo toolbar: replace Select caret icon and fix check icon size
aarongarciah May 15, 2026
7916d57
Select / Combobox: fix check icon column size
aarongarciah May 15, 2026
525797c
Combobox: fix scale transition
aarongarciah May 15, 2026
a3b8604
Switch: transition bg
aarongarciah May 15, 2026
af5beca
Tabs: fix focus ring on TW
aarongarciah May 15, 2026
9318f29
Update icons
aarongarciah May 15, 2026
0cae776
Autocomplete: center grid demo
aarongarciah May 15, 2026
fcff33a
Fix copy icon size
aarongarciah May 15, 2026
e54f05d
Remove unused CSS
aarongarciah May 15, 2026
1a6a563
New npm icon
aarongarciah May 15, 2026
d602f22
Menu: fix check icon column width
aarongarciah May 15, 2026
5a8951b
Autocomplete: reduce group bottom padding
aarongarciah May 15, 2026
88e250a
Clean up icons
aarongarciah May 15, 2026
0a724da
Autocomplete: tweak secondary text color
aarongarciah May 15, 2026
db7eee7
Demo toolbar: cursor:pointer on menu link items
aarongarciah May 15, 2026
3136414
Fix cursor on demo toolbar
aarongarciah May 15, 2026
b01369f
Remove `overflow: clip` from all popups and fix overflowing scrollbar
aarongarciah May 15, 2026
dfa8513
Dialog: reduce transition duration
aarongarciah May 15, 2026
676dcf2
Group labels: fix left padding
aarongarciah May 15, 2026
13d4715
Dialog: increase transition duration on outside scroll demo
aarongarciah May 15, 2026
07eaa34
Docs shell: make all outlines black
aarongarciah May 15, 2026
32ee10b
Search: add focus rings
aarongarciah May 15, 2026
04075f7
TypeRef: tweak focus ring
aarongarciah May 15, 2026
b368ac5
Quick nav focus ring
aarongarciah May 15, 2026
cf8ecae
Installation block focus ring
aarongarciah May 15, 2026
ec93ea9
Code block focus ring
aarongarciah May 15, 2026
dd2c6f9
Tooltip: move aria-label from icons to triggers
aarongarciah May 15, 2026
c52eb9d
Fix regression test box-sizing setup?
aarongarciah May 15, 2026
7c99b11
Bye CSS vars on CSS modules demos 🫡
aarongarciah May 15, 2026
21dcd93
Revert "Fix regression test box-sizing setup?"
aarongarciah May 15, 2026
6f41f59
Fix box-sizing on Tailwind regression tests
aarongarciah May 15, 2026
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
337 changes: 216 additions & 121 deletions docs/scripts/generateLlmTxt/__snapshots__/mdxToMarkdown.test.mjs.snap

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -1,15 +1,26 @@
.Accordion {
box-sizing: border-box;
display: flex;
width: 24rem;
max-width: calc(100vw - 8rem);
width: 20rem;
max-width: 100%;
flex-direction: column;
justify-content: center;
color: var(--color-gray-900);
border: 1px solid oklch(14.5% 0 0deg);
color: oklch(14.5% 0 0deg);

@media (prefers-color-scheme: dark) {
border: 1px solid white;
color: white;
}
}

.Item {
border-bottom: 1px solid var(--color-gray-200);
& + & {
border-top: 1px solid oklch(14.5% 0 0deg);

@media (prefers-color-scheme: dark) {
border-top: 1px solid white;
}
}
}

.Header {
Expand All @@ -18,56 +29,63 @@

.Trigger {
box-sizing: border-box;
position: relative;
display: flex;
width: 100%;
gap: 1rem;
align-items: baseline;
align-items: center;
justify-content: space-between;
padding-block: 0.5rem;
padding-inline: 0.75rem 0.25rem;
color: var(--color-gray-900);
gap: 1rem;
padding: 0.5rem 0.75rem;
margin: 0;
border: none;
border-radius: 0;
background-color: transparent;
color: oklch(14.5% 0 0deg);
font-family: inherit;
font-size: 0.875rem;
font-weight: 400;
font-size: 1rem;
line-height: 1.5rem;
background: var(--color-gray-50);
border: none;
outline: none;
line-height: 1.25rem;
text-align: left;
user-select: none;

@media (prefers-color-scheme: dark) {
color: white;
}

@media (hover: hover) {
&:hover {
background-color: var(--color-gray-100);
&:hover:not([data-disabled]) {
background-color: oklch(97% 0 0deg);

@media (prefers-color-scheme: dark) {
background-color: oklch(26.9% 0 0deg);
}
}
}

&:focus-visible {
outline: 2px solid var(--color-blue);
position: relative;
outline: 2px solid oklch(14.5% 0 0deg);
z-index: 1;

@media (prefers-color-scheme: dark) {
outline-color: white;
}
}
}

.TriggerIcon {
box-sizing: border-box;
flex-shrink: 0;
width: 0.75rem;
height: 0.75rem;
margin-right: 0.5rem;
transition: transform 150ms ease-out;
.Icon {
transition: transform 100ms ease-out;

[data-panel-open] > & {
transform: rotate(45deg) scale(1.1);
transform: rotate(45deg);
}
}

.Panel {
box-sizing: border-box;
height: var(--accordion-panel-height);
overflow: hidden;
color: var(--color-gray-600);
font-size: 1rem;
line-height: 1.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
transition: height 150ms ease-out;

&[data-starting-style],
Expand All @@ -77,5 +95,5 @@
}

.Content {
padding: 0.75rem;
padding: 0.5rem 0.75rem;
}
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function ExampleAccordion() {
<Accordion.Header className={styles.Header}>
<Accordion.Trigger className={styles.Trigger}>
What is Base UI?
<PlusIcon className={styles.TriggerIcon} />
<PlusIcon className={styles.Icon} />
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel className={styles.Panel}>
Expand All @@ -24,7 +24,7 @@ export default function ExampleAccordion() {
<Accordion.Header className={styles.Header}>
<Accordion.Trigger className={styles.Trigger}>
How do I get started?
<PlusIcon className={styles.TriggerIcon} />
<PlusIcon className={styles.Icon} />
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel className={styles.Panel}>
Expand All @@ -39,7 +39,7 @@ export default function ExampleAccordion() {
<Accordion.Header className={styles.Header}>
<Accordion.Trigger className={styles.Trigger}>
Can I use it for my project?
<PlusIcon className={styles.TriggerIcon} />
<PlusIcon className={styles.Icon} />
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel className={styles.Panel}>
Expand All @@ -52,8 +52,18 @@ export default function ExampleAccordion() {

function PlusIcon(props: React.ComponentProps<'svg'>) {
return (
<svg viewBox="0 0 12 12" fill="currentColor" {...props}>
<path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
strokeLinecap="square"
strokeLinejoin="round"
{...props}
style={{ display: 'block', ...props.style }}
>
<path d="M1.5 8h13M8 14.5v-13" />
</svg>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,46 +3,46 @@ import { Accordion } from '@base-ui/react/accordion';

export default function ExampleAccordion() {
return (
<Accordion.Root className="flex w-96 max-w-[calc(100vw-8rem)] flex-col justify-center text-gray-900">
<Accordion.Item className="border-b border-gray-200">
<Accordion.Root className="flex w-80 max-w-full flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white">
<Accordion.Item>
<Accordion.Header>
<Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
<Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
What is Base UI?
<PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
<PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
<div className="p-3">
<Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
<div className="px-3 py-2">
Base UI is a library of high-quality unstyled React components for design systems and
web apps.
</div>
</Accordion.Panel>
</Accordion.Item>

<Accordion.Item className="border-b border-gray-200">
<Accordion.Item className="border-t border-neutral-950 dark:border-white">
<Accordion.Header>
<Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
<Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
How do I get started?
<PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
<PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
<div className="p-3">
<Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
<div className="px-3 py-2">
Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
you’ll feel at home.
</div>
</Accordion.Panel>
</Accordion.Item>

<Accordion.Item className="border-b border-gray-200">
<Accordion.Item className="border-t border-neutral-950 dark:border-white">
<Accordion.Header>
<Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
<Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
Can I use it for my project?
<PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
<PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
<div className="p-3">Of course! Base UI is free and open source.</div>
<Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
<div className="px-3 py-2">Of course! Base UI is free and open source.</div>
</Accordion.Panel>
</Accordion.Item>
</Accordion.Root>
Expand All @@ -51,8 +51,18 @@ export default function ExampleAccordion() {

function PlusIcon(props: React.ComponentProps<'svg'>) {
return (
<svg viewBox="0 0 12 12" fill="currentColor" {...props}>
<path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
strokeLinecap="square"
strokeLinejoin="round"
{...props}
style={{ display: 'block', ...props.style }}
>
<path d="M1.5 8h13M8 14.5v-13" />
</svg>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function ExampleAccordion() {
<Accordion.Header className={styles.Header}>
<Accordion.Trigger className={styles.Trigger}>
What is Base UI?
<PlusIcon className={styles.TriggerIcon} />
<PlusIcon className={styles.Icon} />
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel className={styles.Panel}>
Expand All @@ -24,7 +24,7 @@ export default function ExampleAccordion() {
<Accordion.Header className={styles.Header}>
<Accordion.Trigger className={styles.Trigger}>
How do I get started?
<PlusIcon className={styles.TriggerIcon} />
<PlusIcon className={styles.Icon} />
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel className={styles.Panel}>
Expand All @@ -39,7 +39,7 @@ export default function ExampleAccordion() {
<Accordion.Header className={styles.Header}>
<Accordion.Trigger className={styles.Trigger}>
Can I use it for my project?
<PlusIcon className={styles.TriggerIcon} />
<PlusIcon className={styles.Icon} />
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel className={styles.Panel}>
Expand All @@ -52,8 +52,18 @@ export default function ExampleAccordion() {

function PlusIcon(props: React.ComponentProps<'svg'>) {
return (
<svg viewBox="0 0 12 12" fill="currentColor" {...props}>
<path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
strokeLinecap="square"
strokeLinejoin="round"
{...props}
style={{ display: 'block', ...props.style }}
>
<path d="M1.5 8h13M8 14.5v-13" />
</svg>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,47 +5,47 @@ export default function ExampleAccordion() {
return (
<Accordion.Root
multiple
className="flex w-96 max-w-[calc(100vw-8rem)] flex-col justify-center text-gray-900"
className="flex w-80 max-w-full flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white"
>
<Accordion.Item className="border-b border-gray-200">
<Accordion.Item>
<Accordion.Header>
<Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
<Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
What is Base UI?
<PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
<PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
<div className="p-3">
<Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
<div className="px-3 py-2">
Base UI is a library of high-quality unstyled React components for design systems and
web apps.
</div>
</Accordion.Panel>
</Accordion.Item>

<Accordion.Item className="border-b border-gray-200">
<Accordion.Item className="border-t border-neutral-950 dark:border-white">
<Accordion.Header>
<Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
<Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
How do I get started?
<PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
<PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
<div className="p-3">
<Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
<div className="px-3 py-2">
Head to the “Quick start” guide in the docs. If you’ve used unstyled libraries before,
you’ll feel at home.
</div>
</Accordion.Panel>
</Accordion.Item>

<Accordion.Item className="border-b border-gray-200">
<Accordion.Item className="border-t border-neutral-950 dark:border-white">
<Accordion.Header>
<Accordion.Trigger className="group relative flex w-full items-baseline justify-between gap-4 bg-gray-50 py-2 pr-1 pl-3 text-left font-normal hover:bg-gray-100 focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-blue-800">
<Accordion.Trigger className="group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:hover:not-data-disabled:bg-neutral-800">
Can I use it for my project?
<PlusIcon className="mr-2 size-3 shrink-0 transition-all ease-out group-data-[panel-open]:scale-110 group-data-[panel-open]:rotate-45" />
<PlusIcon className="shrink-0 transition-transform duration-100 ease-out group-data-panel-open:rotate-45" />
</Accordion.Trigger>
</Accordion.Header>
<Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-base text-gray-600 transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0">
<div className="p-3">Of course! Base UI is free and open source.</div>
<Accordion.Panel className="h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0">
<div className="px-3 py-2">Of course! Base UI is free and open source.</div>
</Accordion.Panel>
</Accordion.Item>
</Accordion.Root>
Expand All @@ -54,8 +54,18 @@ export default function ExampleAccordion() {

function PlusIcon(props: React.ComponentProps<'svg'>) {
return (
<svg viewBox="0 0 12 12" fill="currentColor" {...props}>
<path d="M6.75 0H5.25V5.25H0V6.75L5.25 6.75V12H6.75V6.75L12 6.75V5.25H6.75V0Z" />
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
strokeLinecap="square"
strokeLinejoin="round"
{...props}
style={{ display: 'block', ...props.style }}
>
<path d="M1.5 8h13M8 14.5v-13" />
</svg>
);
}
Loading
Loading