DOCSEARCHbyAlgolia
Submit Docs

9ui Documentation

repository·main·Indexed 20 days ago

https://github.com/borabaloglu/9ui

A library of copy-and-paste UI components built on top of Base UI and Tailwind CSS. 9ui provides highly customizable components—including Accordion, Alert, Autocomplete, Avatar, and Charting tools—designed for developers to integrate directly into their projects without the constraints of a traditional installed package.

Tokens
30.6K
Snippets
147
Records
177
Agent score
71%

What's inside 9ui

  3. Autocomplete feature variations

    main

    The Autocomplete component supports several advanced patterns and configurations:

    • Groupped: Organize suggestions into logical groups.
    • Async: Fetch suggestions from an external API as the user types.
    • Inline Autocomplete: Display suggestions within the input context.
    • Fuzzy Matcher: Use fuzzy search logic to find matches that aren't exact.
    • Auto Highlight: Automatically highlight the matching portion of the text in the suggestions.
    • Limit Results: Restrict the number of suggestions shown to improve performance or focus.
    • With Rows: Display suggestions in a row-based layout.
    • Virtualized: Use virtualization to handle very large lists of suggestions efficiently.

  4. Carousel component anatomy

    main

    The Carousel component follows a specific hierarchy to function correctly:

    • Carousel: The main container component.
    • CarouselContent: The wrapper for the slides that handles the scrolling logic.
    • CarouselItem: Individual slides within the carousel.
    • CarouselPrevious: The button to navigate to the previous item.
    • CarouselNext: The button to navigate to the next item.

  7. Combobox variants and patterns

    main

    The Combobox component supports several specialized usage patterns:

    • Input inside popup: Moving the search input inside the dropdown content rather than having it as a standalone trigger.
    • Multiple selection: Allowing users to select more than one item, typically rendered using ComboboxChips and ComboboxChip.
    • Creatable: Enabling users to create new items that are not present in the initial list.

  8. Understand the semantic color token system

    main

    The 9ui theme system uses semantic color tokens that represent specific use cases rather than literal colors. This allows you to change the entire look of your application by swapping the underlying values of these tokens without changing your component code.

    Token Categories

    • Base Colors: Primary surface and text colors.

      • background / foreground: Primary background and text.
      • card / card-foreground: For card components.
      • popover / popover-foreground: For popovers, dropdowns, and dialogs.

    • Interactive Elements: Colors for user actions.

      • primary / primary-foreground: Main brand color for primary actions.
      • secondary / secondary-foreground: Less prominent actions.
      • muted / muted-foreground: Subdued elements like secondary text.
      • accent / accent-foreground: Highlighted or featured elements.
      • destructive / destructive-foreground: Dangerous actions.

    • Status Colors: Visual feedback for states.

      • danger / danger-foreground / danger-border: Error states.
      • warning / warning-foreground / warning-border: Warning messages.
      • info / info-foreground / info-border: Informational messages.
      • success / success-foreground / success-border: Success states.

    • Utility Colors: Structural colors.

      • border: Default border color.
      • input: Form input borders.
      • ring: Focus ring color.

    • Chart Colors: Data visualization colors.

      • chart-1 through chart-5: Predefined colors for charts.

  10. Set up dark mode in Astro

    main

    To implement dark mode in an Astro project, you need to prevent theme flashing by using an inline script in your main layout or page to apply the correct theme class before the page renders. This script checks localStorage for a saved preference or falls back to the system's prefers-color-scheme setting.

    1. Add an is:inline script to your Astro component (e.g., src/pages/index.astro) to manage the document.documentElement classes.
    2. Use a MutationObserver within that script to automatically persist theme changes to localStorage whenever the class attribute on the <html> element changes.
    <script is:inline>
  function getTheme() {
    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
      return localStorage.getItem("theme")
    }

		return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
  }

	const theme = getTheme()
	document.documentElement.classList.remove("light", "dark")
	document.documentElement.classList.add(theme)

	if (typeof localStorage !== "undefined") {
		const observer = new MutationObserver(() => {
			const isDark = document.documentElement.classList.contains("dark")
			localStorage.setItem("theme", isDark ? "dark" : "light")
		})
		observer.observe(document.documentElement, {
			attributes: true,
			attributeFilter: ["class"]
		})
	}
</script>

  11. Use the Radio Group component

    main

    The Radio Group component is composed of a RadioGroup container and individual RadioGroupItem components. This allows users to select exactly one option from a set of radio buttons.

    Import the components from your local UI directory (typically @/components/ui/radio-group) and nest RadioGroupItem elements inside a RadioGroup.

    import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

// Usage anatomy:
<RadioGroup>
  <RadioGroupItem value="option-1" />
  <RadioGroupItem value="option-2" />
</RadioGroup>