Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
105 commits
Select commit Hold shift + click to select a range
1af1ca3
fix: update breakpoint management to use CSS custom properties
hitomihiumi Aug 7, 2025
3b8a9ff
fix: add xs breakpoint support and related utility classes
hitomihiumi Aug 7, 2025
1855052
fix: moved breakpoints to global.scss to avoid errors during build
hitomihiumi Aug 8, 2025
5d9c368
fix: implement useResponsiveClasses hook for dynamic class management
hitomihiumi Aug 8, 2025
0736964
fix: add xs breakpoint support to ServerGrid for improved responsiveness
hitomihiumi Aug 8, 2025
3f5d12b
fix: update breakpoints to fixed pixel values and enhance responsive …
hitomihiumi Aug 10, 2025
9d9c53c
fix: update isDefaultBreakpoints to a function and fix hide
hitomihiumi Aug 10, 2025
0e5f6c9
code formating
hitomihiumi Aug 11, 2025
bbce1e0
fix: enhance useResponsiveClasses with property class management and …
hitomihiumi Aug 21, 2025
be9a10a
fix: enhance useResponsiveClasses with property class management and …
hitomihiumi Aug 21, 2025
1d09976
Merge remote-tracking branch 'origin/breakpoints-fix' into breakpoint…
hitomihiumi Aug 21, 2025
86faad2
fix: remove debug log from useResponsiveClasses
hitomihiumi Aug 21, 2025
a564b0e
feat: add UIBenchmark component for performance testing
hitomihiumi Aug 21, 2025
5170293
Merge branch 'pr/8' into 1.5
lorant-one Oct 6, 2025
19f7544
merge: Flex breakpoint and performance
lorant-one Oct 6, 2025
58079b9
ui: remove Card hover effect on mobile touch
lorant-one Oct 6, 2025
8413e98
feat: improve MegaMenu with better animations and custom content
lorant-one Oct 6, 2025
5c4df48
fix: CodeBlock better error handling
lorant-one Oct 6, 2025
c4e695c
feat: character count for input and textarea
lorant-one Oct 6, 2025
977be20
refact: semantics
lorant-one Oct 6, 2025
f10539c
feat: fade in tooltip
lorant-one Oct 6, 2025
f46c523
feat: Hover and Animation components
lorant-one Oct 8, 2025
84ec933
feat: native rounded support for button
lorant-one Oct 8, 2025
b774577
fix: CompareImage drag element height
lorant-one Oct 8, 2025
90410f1
feat: portal prop to Animation
lorant-one Oct 9, 2025
efa995f
feat: Animation, HoverCard and related components
lorant-one Oct 9, 2025
9fca021
docs: updates
lorant-one Oct 9, 2025
1a3a58b
fix: DropdownWrapper and Option accessibility (keyboard nav)
lorant-one Oct 11, 2025
37d86f5
feat: adjustable scrollbar style for Flex and Grid
lorant-one Oct 13, 2025
5f2a5d7
refact: dropdownWrapper accessibility and reliability
lorant-one Oct 13, 2025
5ea5a0a
feat: sharp border style
lorant-one Oct 13, 2025
98f800b
fix: allow keyboard nav and search at the same time
lorant-one Oct 13, 2025
576da86
docs: minor updates
lorant-one Oct 13, 2025
144af95
ui: Select improvement
lorant-one Oct 13, 2025
cd715ba
feat: default title for headingNav
lorant-one Oct 13, 2025
b502d6b
feat: attraction particle mode
lorant-one Oct 13, 2025
4384760
docs: updates
lorant-one Oct 13, 2025
be043b5
feat: MatrixFx component
lorant-one Oct 13, 2025
307d055
fix: MatrixFx barrel export
lorant-one Oct 13, 2025
9df7ae4
ui: typography adjustments
lorant-one Oct 14, 2025
cee17db
ui: docs design
lorant-one Oct 14, 2025
073d1ea
fix: apply flicker on mount in MatrixFx
lorant-one Oct 14, 2025
dc13408
feat: tiltFx intensity
lorant-one Oct 14, 2025
bde1c37
feat: new ShineFx and TypeFx
lorant-one Oct 14, 2025
4ad542c
docs: TypeFx example
lorant-one Oct 14, 2025
5f575d5
fix: ArrowNavigation overflow
lorant-one Oct 14, 2025
fb9d02e
docs: update effects docs
lorant-one Oct 14, 2025
d31a006
docs: update headline
lorant-one Oct 14, 2025
77f2d96
feat: Timeline component
lorant-one Oct 14, 2025
fe5aecc
docs: content updates
lorant-one Oct 14, 2025
7da6103
fix: add full radius option to separate border props
lorant-one Oct 15, 2025
8b67f13
ui: add padding for scrollbar in CodeBlocks
lorant-one Oct 15, 2025
ec12bc1
fix: better rendering for Lines in Background
lorant-one Oct 15, 2025
fc7b66a
docs: improve SideBar
lorant-one Oct 15, 2025
5297410
docs: improve loading state
lorant-one Oct 15, 2025
df40c52
docs: refact UI
lorant-one Oct 15, 2025
b59a431
docs: minor UI improvements
lorant-one Oct 15, 2025
64ed0ff
docs: restructure content
lorant-one Oct 15, 2025
b2c4391
docs: add redirects
lorant-one Oct 15, 2025
c725204
docs: update homepage ui
lorant-one Oct 15, 2025
ec57b94
docs: update OG UI
lorant-one Oct 15, 2025
97eff21
fix: add tabindex to Kbar
lorant-one Oct 15, 2025
78f8099
docs: update design and content
lorant-one Oct 15, 2025
7c3b00d
docs: Hover
lorant-one Oct 16, 2025
9345295
docs: minor content adjustments
lorant-one Oct 16, 2025
250a2f4
ui: adjust nested border
lorant-one Oct 16, 2025
4b2e361
refact: remove redundant props from Hover
lorant-one Oct 16, 2025
316f35a
fix: card border spreading
lorant-one Oct 16, 2025
422164d
docs: update default style
lorant-one Oct 16, 2025
c086928
docs: update descriptions
lorant-one Oct 16, 2025
f6aa6b4
refact: improve EmojiPicker performance
lorant-one Oct 16, 2025
454bad0
docs: HoverCard
lorant-one Oct 16, 2025
c0e01c7
fix: Kbar scrolling
lorant-one Oct 16, 2025
488fcc9
fix: remove scrollbar class when unnecessary
lorant-one Oct 16, 2025
d2f1360
refact: improve MegaMenu
lorant-one Oct 16, 2025
c192f95
fix: conditional rendering inside Flex and Grid
lorant-one Oct 16, 2025
b18bf9e
docs: better mobile nav
lorant-one Oct 16, 2025
6a5a81c
docs: refine animation
lorant-one Oct 16, 2025
5f36774
fix: ShineFx colors
lorant-one Oct 16, 2025
2743f42
docs: update content
lorant-one Oct 16, 2025
edc9088
docs: Timeline
lorant-one Oct 16, 2025
6987978
Kbar: open on tab enter
lorant-one Oct 18, 2025
cc5ce73
fix: disable UserMenu while loading
lorant-one Oct 18, 2025
bd05e5e
ui: dont render focus ring for interactive components on tap
lorant-one Oct 18, 2025
e3ea403
feat: new Swiper component
lorant-one Oct 18, 2025
547e0ed
refact: MatrixFx speed prop
lorant-one Oct 18, 2025
cffbe8f
fix: add Swiper export to barrel
lorant-one Oct 18, 2025
5c23749
refact: ColorInput semantics
lorant-one Oct 18, 2025
d49d149
fix: wait Animation until mounted
lorant-one Oct 18, 2025
b35f28d
fix: add Swiper module
lorant-one Oct 18, 2025
6a3bd05
docs: update content and ui
lorant-one Oct 18, 2025
2bf7b0a
docs: escape '
lorant-one Oct 18, 2025
d0b168f
feat: xs and xl support for labels
lorant-one Oct 19, 2025
a65b720
docs: update content
lorant-one Oct 19, 2025
28d61c1
refact: Timeline
lorant-one Oct 19, 2025
f052efa
fix: ToggleButton padding in MegaMenu
lorant-one Oct 19, 2025
ae765b2
fix: ToggleButton padding in MegaMenu (for real)
lorant-one Oct 19, 2025
974cdd5
docs: update assets and git info
lorant-one Oct 19, 2025
f27cb3d
docs: update logo size in README
lorant-one Oct 19, 2025
0563bb0
docs: update git info
lorant-one Oct 19, 2025
26a732a
docs: add swag promo
lorant-one Oct 19, 2025
8a60b5e
docs: compress assets
lorant-one Oct 19, 2025
74cf321
docs: micro adjustments
lorant-one Oct 19, 2025
3f04f6f
docs: tweak Sidebar positioning
lorant-one Oct 19, 2025
416bc9d
release: update version in package
lorant-one Oct 19, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/FUNDING.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
github: [once-ui-system, lorant-one]
45 changes: 45 additions & 0 deletions .github/ISSUE_TEMPLATE/bug_report.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
---
name: Bug report
about: Create a report to help us improve Once UI
title: '[BUG] '
labels: 'bug'
assignees: ''
---

## Describe the bug
A clear and concise description of what the bug is.

## To reproduce
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

## Expected behavior
A clear and concise description of what you expected to happen.

## Screenshots
If applicable, add screenshots to help explain your problem.

## Environment
Please complete the following information:
- **OS**: [e.g. macOS, Windows, Linux]
- **Browser**: [e.g. Chrome 120, Safari 17, Firefox 121]
- **Once UI Version**: [e.g. 1.5.0]
- **Next.js Version**: [e.g. 14.0.0]
- **Node.js Version**: [e.g. 18.17.0]

## Code Sample
```tsx
// Please provide a minimal code example that reproduces the issue
```

## Additional context
Add any other context about the problem here. For example:
- Does this happen consistently or intermittently?
- Did this work in a previous version?
- Are there any console errors or warnings?

## Possible solution
If you have an idea of what might be causing the issue or how to fix it, please share it here.
11 changes: 11 additions & 0 deletions .github/ISSUE_TEMPLATE/config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
blank_issues_enabled: false
contact_links:
- name: 📚 Documentation
url: https://docs.once-ui.com
about: Check out our documentation for guides and API references
- name: 💬 Discord Community
url: https://discord.com/invite/5EyAQ4eNdS
about: Join our Discord for help, support and discussion with the community
- name: 🔍 Discussions
url: https://github.com/once-ui-system/core/discussions
about: Ask questions and discuss ideas with the community
37 changes: 37 additions & 0 deletions .github/ISSUE_TEMPLATE/feature_request.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
name: Feature request
about: Suggest an idea for Once UI
title: '[FEATURE] '
labels: 'feature request'
assignees: ''
---

## Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

## Describe the solution you'd like
A clear and concise description of what you want to happen.

## Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

## Use Case
Describe the use case for this feature. How would it benefit Once UI users?

## Example API (if applicable)
```tsx
// Show how you envision the feature being used
<Component
newProp="value"
>
Content
</Component>
```

## Additional context
Add any other context, screenshots, or examples about the feature request here.

## Would you be willing to contribute?
- [ ] Yes, I'd like to work on this feature
- [ ] No, but I can help test it
- [ ] No, just suggesting the idea
31 changes: 31 additions & 0 deletions .github/ISSUE_TEMPLATE/question.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
---
name: Question or Help
about: Ask a question about using Once UI
title: '[QUESTION] '
labels: 'question'
assignees: ''
---

## Your Question
A clear and concise description of what you're trying to achieve or understand.

## What I've tried
Describe what you've already attempted:
- [ ] Checked the [documentation](https://docs.once-ui.com)
- [ ] Searched existing issues
- [ ] Asked in Discord

## Code Example
```tsx
// Share relevant code if applicable
```

## Expected outcome
What are you trying to accomplish?

## Additional context
Add any other context, screenshots, or links that might help us understand your question.

---

💡 **Tip**: For faster responses, consider asking in our [Discord community](https://discord.com/invite/5EyAQ4eNdS) where community members can help!
10 changes: 2 additions & 8 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
# Use symlinks instead of junctions on Windows
symlink=true

# Disable strict peer dependencies
strict-peer-dependencies=false

# Hoist all dependencies to the root node_modules
shamefully-hoist=false

# Use node-linker=hoisted to avoid Windows symlink issues
node-linker=hoisted
# Use shamefully-hoist for better Windows compatibility
shamefully-hoist=true
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ Before submitting a PR:

### Best practices

- Follow our [component conventions](https://docs.once-ui.com/once-ui/components) and file structure.
- Follow our [component conventions](https://docs.once-ui.com/once-ui/basics/components) and file structure.
- Use the naming system and design tokens already defined in the project.

## Join the community
Expand Down
2 changes: 1 addition & 1 deletion packages/core/LICENSE → LICENSE.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
SOFTWARE.
77 changes: 33 additions & 44 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,65 +1,54 @@
## Once UI monorepo
<br/>

This monorepo hosts the official Once UI package and its internal development sandbox. It is designed for testing, development, and contribution—not for production deployment.
<div align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://docs.once-ui.com/trademark/icon-dark.svg" width="64" height="64">
<source media="(prefers-color-scheme: light)" srcset="https://docs.once-ui.com/trademark/icon-light.svg" width="64" height="64">
<img alt="Once UI Logo" src="https://docs.once-ui.com/trademark/icon-dark.svg" width="64" height="64">
</picture><picture>
<source media="(prefers-color-scheme: dark)" srcset="https://docs.once-ui.com/trademark/type-dark.svg" width="200" height="64">
<source media="(prefers-color-scheme: light)" srcset="https://docs.once-ui.com/trademark/type-light.svg" width="200" height="64">
<img alt="Once UI Wordmark" src="https://docs.once-ui.com/trademark/type-dark.svg" width="200" height="64">
</picture>

## Developer notice
<br/>

It includes:
The indie design system for Next.js apps

- `packages/core`: the published [@once-ui-system/core](https://www.npmjs.com/package/@once-ui-system/core) package
- `apps/docs`: the official documentation of Once UI and Magic templates built with [Magic Docs](https://once-ui.com/products/magic-docs)
- `apps/dev`: a simple sandbox app wired via symlink for testing components
[![npm version](https://img.shields.io/npm/v/@once-ui-system/core.svg)](https://www.npmjs.com/package/@once-ui-system/core)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE.md)
[![npm downloads](https://img.shields.io/npm/dm/@once-ui-system/core.svg)](https://www.npmjs.com/package/@once-ui-system/core)
[![Discord](https://img.shields.io/discord/1083398120035074148?color=7289da&logo=discord&logoColor=white)](https://discord.com/invite/5EyAQ4eNdS)
</div>

This setup is intended for contributors and maintainers.
If you're building a real project, we recommend using:

1. [Once UI Starter](https://github.com/once-ui-system/nextjs-starter)
2. or install via your package manager:

```bash
npm install @once-ui-system/core
# or
yarn add @once-ui-system/core
# or
pnpm add @once-ui-system/core
```

### For contributors

Fork this repo, install dependencies, and run apps:

```bash
pnpm install
pnpm dev
```

The components will update automatically when you make changes to the Core library. If you modify the CSS modules, you'll have to run `pnpm build` in the `packages/core` directory.
<br/>

## Documentation

Start here: [docs.once-ui.com](https://docs.once-ui.com/once-ui/quick-start).

## Creators
Learn how to set up and build with Once UI at [docs.once-ui.com](https://docs.once-ui.com/once-ui/quick-start).

**Lorant One**: [Portfolio](https://lorant.one) / [Threads](https://www.threads.net/@lorant.one) / [LinkedIn](https://www.linkedin.com/in/lorant-one/)
## Installation

**Collaborators**: [Once UI Frontiers](https://once-ui.com/about)
```bash
npm install @once-ui-system/core
```

## Join the movement
## Authors

![Design Engineers Club](https://docs.once-ui.com/images/docs/vibe-coding-dark.jpg)
Built and maintained by [**Lorant One**](https://lorant.one).

Join the [Design Engineers Club](https://discord.com/invite/5EyAQ4eNdS) on Discord. Build with intention. Share with integrity.
## Community

## Feedback & Bugs
Join the [Design Engineers Club](https://discord.com/invite/5EyAQ4eNdS) for help, support and discussion.

Found a bug? [Report it](https://github.com/once-ui-system/core/issues/new?labels=bug&template=bug_report.md)
Got an idea? [Submit a request](https://github.com/once-ui-system/core/issues/new?labels=feature%20request&template=feature_request.md)
Found a bug? Report it [here](https://github.com/once-ui-system/core/issues/new?labels=bug&template=bug_report.md). Got a feature request? Submit it [here](https://github.com/once-ui-system/core/issues/new?labels=feature%20request&template=feature_request.md).

## Support us
## Contributing

Once UI is an indie project. [Sponsor us](https://github.com/sponsors/once-ui-system) and get featured on our site!
Please read our [CONTRIBUTING.md](./CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to Once UI.

## License
## Sponsors

Distributed under the MIT License. See `LICENSE.txt`.
Once UI is an indie project. [Sponsor us](https://github.com/sponsors/once-ui-system) and get featured on our site!
27 changes: 26 additions & 1 deletion apps/dev/src/app/(main)/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,9 @@ import {
MasonryGrid,
TagInput,
Avatar,
Background,
} from "@once-ui-system/core";
import { style } from "@/resources/once-ui.config";

export default function Home() {
const [selectedEmoji, setSelectedEmoji] = React.useState<string>("");
Expand Down Expand Up @@ -113,16 +115,39 @@ export default function Home() {

return (
<Column fill center padding="l" gap="l" maxWidth="m">
<Column fillWidth m={{direction: "row"}}>
<Flex hide l={{hide: false}}>hide by default, show on l</Flex>
<Flex hide m={{hide: false}}>hide by default, show on m</Flex>
<Flex hide l={{hide: false}}>hide by default, show on l</Flex>
<Flex hide m={{hide: false, style: {background: "red"}}}>hide by default, show on m</Flex>
<Flex hide m={{hide: false, style: {background: "red"}}}>hide by default, show on m</Flex>
<Flex hide s={{hide: false}}>hide by default, show on s</Flex>
<Flex hide s={{hide: false}}>hide by default, show on s</Flex>
<Flex hide xs={{hide: false}}>hide by default, show on xs</Flex>
<Flex hide xs={{hide: false}}>hide by default, show on xs</Flex>
</Column>
<Feedback icon title="Feedback" description="This is a feedback"></Feedback>

<Column maxWidth="s">
<Media src="/images/cover-01.jpg" caption="Caption" radius="xl" />
</Column>

<DropdownWrapper
placement="bottom-end"
trigger={
<Row>
<IconButton data-border="rounded" variant="secondary" icon="bell"/>
<Row data-solid="inverse" minWidth="8" minHeight="8" radius="full" solid="brand-strong" position="absolute" top="2" right="2"/>
</Row>
}
dropdown={
<Column width={20} background="surface" radius="l" gap="2" padding="4" border="neutral-alpha-weak">
<Option value="1">Option 1</Option>
<Option value="2">Option 2</Option>
<Option value="3">Option 3</Option>
</Column>
}
/>


<CodeBlock
fullscreenButton
Expand Down
2 changes: 1 addition & 1 deletion apps/dev/src/components/Providers.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { DataThemeProvider, IconProvider, LayoutProvider, ThemeProvider, ToastPr
export function Providers({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider>
<LayoutProvider>
<LayoutProvider breakpoints={{xs: 420, s: 560, m: 960, l: 1280, xl: 1600}}>
<DataThemeProvider>
<ToastProvider>
<IconProvider>
Expand Down
Loading