# NiceUI — full source

> NiceUI is a free, open-source library of premium React and Tailwind CSS components, blocks and templates. Copy the code or install with the shadcn CLI. MIT licensed, no account required.

---

## Avatar Group

Overlapping avatars with initials fallback, hover lift and a +N overflow counter.

URL: https://niceui.dev/components/avatar-group
Install: `npx shadcn@latest add https://niceui.dev/r/avatar-group.json`
File: `components/ui/avatar-group.tsx`

```tsx
import * as React from "react";

export interface AvatarGroupProps {
  people: { name: string; src?: string }[];
  max?: number;
  className?: string;
}

const initials = (name: string) =>
  name
    .split(" ")
    .map((part) => part[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();

export function AvatarGroup({ people, max = 4, className = "" }: AvatarGroupProps) {
  const shown = people.slice(0, max);
  const rest = people.length - shown.length;

  return (
    <div className={["flex", className].join(" ")}>
      {shown.map((person, i) => (
        <span
          key={person.name}
          title={person.name}
          className={[
            "grid size-[38px] place-items-center overflow-hidden rounded-full border-2 border-black",
            "text-[11px] font-medium transition-transform duration-200 hover:-translate-y-1",
            i === 0 ? "bg-sky-300 text-sky-950" : "-ml-2 bg-zinc-900 text-zinc-400",
          ].join(" ")}
        >
          {person.src ? <img src={person.src} alt={person.name} className="size-full object-cover" /> : initials(person.name)}
        </span>
      ))}
      {rest > 0 && (
        <span className="-ml-2 grid size-[38px] place-items-center rounded-full border-2 border-black bg-zinc-900 text-[11px] font-medium text-sky-300">
          +{rest}
        </span>
      )}
    </div>
  );
}
```

Usage:

```tsx
import { AvatarGroup } from "@/components/ui/avatar-group";

const people = ["Ada King", "Mia Jones", "Raj Shah", "Leo Park", "Noa Ito", "Sam Lee"];

export default function Example() {
  return <AvatarGroup people={people.map((name) => ({ name }))} max={4} />;
}
```

---

## Badge

Compact status labels in neutral, sky and outline variants, with an optional glowing status dot.

URL: https://niceui.dev/components/badge
Install: `npx shadcn@latest add https://niceui.dev/r/badge.json`
File: `components/ui/badge.tsx`

```tsx
import * as React from "react";

type Variant = "neutral" | "sky" | "outline";

const variants: Record<Variant, string> = {
  neutral: "bg-white/[.06] text-zinc-300",
  sky: "border border-sky-300/30 bg-sky-300/10 text-sky-300",
  outline: "border border-white/15 text-zinc-400",
};

export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  variant?: Variant;
  dot?: boolean;
}

export function Badge({ variant = "neutral", dot = false, className = "", children, ...props }: BadgeProps) {
  return (
    <span
      className={[
        "inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium",
        variants[variant],
        className,
      ].join(" ")}
      {...props}
    >
      {dot && <span className="size-1.5 rounded-full bg-current shadow-[0_0_8px_currentColor]" />}
      {children}
    </span>
  );
}
```

Usage:

```tsx
import { Badge } from "@/components/ui/badge";

export default function Example() {
  return (
    <div className="flex gap-1.5">
      <Badge variant="sky" dot>Live</Badge>
      <Badge>Draft</Badge>
      <Badge variant="outline">Archived</Badge>
    </div>
  );
}
```

---

## Button

A pill-shaped button with primary, outline and ghost variants in three sizes. Accessible focus ring, forwarded ref.

URL: https://niceui.dev/components/button
Install: `npx shadcn@latest add https://niceui.dev/r/button.json`
File: `components/ui/button.tsx`

```tsx
import * as React from "react";

type Variant = "primary" | "outline" | "ghost";
type Size = "sm" | "md" | "lg";

const variants: Record<Variant, string> = {
  primary:
    "bg-sky-300 text-sky-950 shadow-[0_0_0_1px_rgba(125,211,252,.4),0_8px_32px_-8px_rgba(56,189,248,.6)] hover:bg-sky-200",
  outline: "border border-white/15 text-zinc-100 hover:border-white/30 hover:bg-white/[.03]",
  ghost: "text-zinc-400 hover:bg-white/5 hover:text-zinc-100",
};

const sizes: Record<Size, string> = {
  sm: "h-8 px-3.5 text-xs",
  md: "h-10 px-5 text-sm",
  lg: "h-12 px-6 text-base",
};

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
  size?: Size;
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant = "primary", size = "md", className = "", ...props }, ref) => (
    <button
      ref={ref}
      className={[
        "inline-flex items-center justify-center gap-2 rounded-full font-medium",
        "transition-all duration-200 active:scale-[.98]",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/50",
        "disabled:pointer-events-none disabled:opacity-50",
        variants[variant],
        sizes[size],
        className,
      ].join(" ")}
      {...props}
    />
  )
);
Button.displayName = "Button";
```

Usage:

```tsx
import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <div className="flex gap-2">
      <Button>Get started</Button>
      <Button variant="outline">Learn more</Button>
      <Button variant="ghost">Cancel</Button>
    </div>
  );
}
```

---

## Command Palette

A ⌘K search palette with live filtering, arrow-key navigation and an Enter action per item.

URL: https://niceui.dev/components/command-palette
Install: `npx shadcn@latest add https://niceui.dev/r/command-palette.json`
File: `components/ui/command-palette.tsx`

```tsx
"use client";

import * as React from "react";

export interface CommandItem {
  label: string;
  hint?: string;
  onSelect?: () => void;
}

export interface CommandPaletteProps {
  items: CommandItem[];
  placeholder?: string;
  className?: string;
}

export function CommandPalette({ items, placeholder = "Search…", className = "" }: CommandPaletteProps) {
  const [query, setQuery] = React.useState("");
  const [active, setActive] = React.useState(0);
  const inputRef = React.useRef<HTMLInputElement>(null);

  const results = items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));

  React.useEffect(() => setActive(0), [query]);

  React.useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
        e.preventDefault();
        inputRef.current?.focus();
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const onKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "ArrowDown") {
      e.preventDefault();
      setActive((i) => Math.min(i + 1, results.length - 1));
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      setActive((i) => Math.max(i - 1, 0));
    } else if (e.key === "Enter") {
      results[active]?.onSelect?.();
    }
  };

  return (
    <div
      className={[
        "w-full max-w-[420px] overflow-hidden rounded-2xl border border-white/15 bg-zinc-950",
        "shadow-[0_30px_80px_-30px_rgba(56,189,248,.25)]",
        className,
      ].join(" ")}
    >
      <div className="flex items-center gap-2.5 border-b border-white/10 px-3.5 py-3 text-zinc-500">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <circle cx="11" cy="11" r="7" />
          <path d="m20 20-3.5-3.5" />
        </svg>
        <input
          ref={inputRef}
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onKeyDown={onKeyDown}
          placeholder={placeholder}
          className="min-w-0 flex-1 bg-transparent text-sm text-zinc-100 outline-none placeholder:text-zinc-500"
        />
        <kbd className="rounded-md border border-white/15 px-1.5 py-0.5 font-mono text-[11px] text-zinc-400">⌘K</kbd>
      </div>
      <ul role="listbox" className="p-1.5">
        {results.length === 0 && <li className="px-2.5 py-6 text-center text-[13px] text-zinc-500">No results</li>}
        {results.map((item, i) => (
          <li
            key={item.label}
            role="option"
            aria-selected={i === active}
            onMouseEnter={() => setActive(i)}
            onClick={item.onSelect}
            className={[
              "flex cursor-pointer justify-between rounded-lg px-2.5 py-2 text-[13px] transition-colors",
              i === active ? "bg-sky-300/10 text-zinc-100" : "text-zinc-400",
            ].join(" ")}
          >
            <span>{item.label}</span>
            {item.hint && (
              <span className={["font-mono text-[11px]", i === active ? "text-sky-300" : "text-zinc-500"].join(" ")}>
                {item.hint}
              </span>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}
```

Usage:

```tsx
import { CommandPalette } from "@/components/ui/command-palette";

export default function Example() {
  return (
    <CommandPalette
      placeholder="Search components…"
      items={[
        { label: "Hero — Horizon", hint: "Block" },
        { label: "Pricing — Minimal", hint: "Block" },
        { label: "Command Palette", hint: "Component" },
      ]}
    />
  );
}
```

---

## Floating Input

A text input whose label floats above the value on focus. Pure CSS peer states, no JavaScript needed for the animation.

URL: https://niceui.dev/components/floating-input
Install: `npx shadcn@latest add https://niceui.dev/r/floating-input.json`
File: `components/ui/floating-input.tsx`

```tsx
import * as React from "react";

export interface FloatingInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "placeholder"> {
  label: string;
}

export const FloatingInput = React.forwardRef<HTMLInputElement, FloatingInputProps>(
  ({ label, id, className = "", ...props }, ref) => {
    const autoId = React.useId();
    const inputId = id ?? autoId;
    return (
      <div className={["relative w-full", className].join(" ")}>
        <input
          ref={ref}
          id={inputId}
          placeholder=" "
          className={[
            "peer h-[52px] w-full rounded-xl border border-white/15 bg-zinc-950 px-3.5 pb-1 pt-5",
            "text-sm text-zinc-100 outline-none transition",
            "focus:border-sky-300 focus:ring-4 focus:ring-sky-300/10",
          ].join(" ")}
          {...props}
        />
        <label
          htmlFor={inputId}
          className={[
            "pointer-events-none absolute left-3.5 top-1.5 text-[11px] text-sky-300 transition-all",
            "peer-placeholder-shown:top-[15px] peer-placeholder-shown:text-sm peer-placeholder-shown:text-zinc-500",
            "peer-focus:top-1.5 peer-focus:text-[11px] peer-focus:text-sky-300",
          ].join(" ")}
        >
          {label}
        </label>
      </div>
    );
  }
);
FloatingInput.displayName = "FloatingInput";
```

Usage:

```tsx
import { FloatingInput } from "@/components/ui/floating-input";

export default function Example() {
  return <FloatingInput label="Email address" type="email" />;
}
```

---

## Marquee

An infinite, edge-faded horizontal scroller for logos, tags or testimonials. Pauses on hover.

URL: https://niceui.dev/components/marquee
Install: `npx shadcn@latest add https://niceui.dev/r/marquee.json`
File: `components/ui/marquee.tsx`

```tsx
import * as React from "react";

export interface MarqueeProps {
  children: React.ReactNode;
  duration?: number;
  pauseOnHover?: boolean;
  className?: string;
}

export function Marquee({ children, duration = 24, pauseOnHover = true, className = "" }: MarqueeProps) {
  return (
    <div
      className={[
        "group w-full overflow-hidden",
        "[mask-image:linear-gradient(90deg,transparent,black_15%,black_85%,transparent)]",
        className,
      ].join(" ")}
    >
      <style>{"@keyframes nice-marquee{to{transform:translateX(calc(-50% - 6px))}}"}</style>
      <div
        className={["flex w-max gap-3", pauseOnHover ? "group-hover:[animation-play-state:paused]" : ""].join(" ")}
        style={{ animation: "nice-marquee " + duration + "s linear infinite" }}
      >
        {children}
        <div aria-hidden className="contents">
          {children}
        </div>
      </div>
    </div>
  );
}
```

Usage:

```tsx
import { Marquee } from "@/components/ui/marquee";

const tags = ["Accordion", "Dialog", "Tooltip", "Sidebar", "Command", "Toast"];

export default function Example() {
  return (
    <Marquee>
      {tags.map((tag) => (
        <span key={tag} className="rounded-lg border border-white/15 px-3.5 py-2 text-sm">
          {tag}
        </span>
      ))}
    </Marquee>
  );
}
```

---

## Segmented Control

A pill tab switcher with a sliding sky indicator that springs between options.

URL: https://niceui.dev/components/segmented-control
Install: `npx shadcn@latest add https://niceui.dev/r/segmented-control.json`
File: `components/ui/segmented-control.tsx`

```tsx
"use client";

import * as React from "react";

export interface SegmentedControlProps {
  options: string[];
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  className?: string;
}

export function SegmentedControl({
  options,
  value,
  defaultValue,
  onValueChange,
  className = "",
}: SegmentedControlProps) {
  const [inner, setInner] = React.useState(defaultValue ?? options[0]);
  const active = value ?? inner;
  const refs = React.useRef<(HTMLButtonElement | null)[]>([]);
  const [box, setBox] = React.useState({ left: 0, width: 0 });

  React.useLayoutEffect(() => {
    const el = refs.current[options.indexOf(active)];
    if (el) setBox({ left: el.offsetLeft, width: el.offsetWidth });
  }, [active, options]);

  const select = (option: string) => {
    if (value === undefined) setInner(option);
    onValueChange?.(option);
  };

  return (
    <div
      role="tablist"
      className={["relative inline-flex rounded-full border border-white/15 p-[3px]", className].join(" ")}
    >
      <span
        aria-hidden
        className="absolute bottom-[3px] top-[3px] rounded-full bg-sky-300 transition-all duration-500 [transition-timing-function:cubic-bezier(.2,1.2,.4,1)]"
        style={{ left: box.left, width: box.width }}
      />
      {options.map((option, i) => (
        <button
          key={option}
          ref={(el) => {
            refs.current[i] = el;
          }}
          role="tab"
          aria-selected={active === option}
          onClick={() => select(option)}
          className={[
            "relative z-10 rounded-full px-[18px] py-1.5 text-[13px] transition-colors duration-300",
            active === option ? "font-medium text-sky-950" : "text-zinc-400 hover:text-zinc-200",
          ].join(" ")}
        >
          {option}
        </button>
      ))}
    </div>
  );
}
```

Usage:

```tsx
import { SegmentedControl } from "@/components/ui/segmented-control";

export default function Example() {
  return <SegmentedControl options={["Day", "Week", "Month"]} />;
}
```

---

## Shimmer Button

A dark button with a sweeping sky-blue shimmer and a glowing bottom edge. Zero dependencies, keyframes included.

URL: https://niceui.dev/components/shimmer-button
Install: `npx shadcn@latest add https://niceui.dev/r/shimmer-button.json`
File: `components/ui/shimmer-button.tsx`

```tsx
import * as React from "react";

export interface ShimmerButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}

export function ShimmerButton({ children, className = "", ...props }: ShimmerButtonProps) {
  return (
    <button
      className={[
        "group relative inline-flex h-11 items-center gap-2 overflow-hidden rounded-full",
        "border border-sky-300/30 bg-black px-6 text-sm font-medium text-sky-100",
        "transition-colors duration-300 hover:border-sky-300/60",
        className,
      ].join(" ")}
      {...props}
    >
      <style>{"@keyframes nice-shimmer{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}"}</style>
      <span
        aria-hidden
        className="absolute inset-0 bg-gradient-to-r from-transparent via-sky-300/25 to-transparent"
        style={{ animation: "nice-shimmer 2.6s ease-in-out infinite" }}
      />
      <span
        aria-hidden
        className="absolute inset-x-6 -bottom-px h-px bg-gradient-to-r from-transparent via-sky-300 to-transparent"
      />
      <span className="relative inline-flex items-center gap-2">{children}</span>
    </button>
  );
}
```

Usage:

```tsx
import { ShimmerButton } from "@/components/ui/shimmer-button";

export default function Example() {
  return <ShimmerButton>Join the beta</ShimmerButton>;
}
```

---

## Slider

A minimal range slider with a sky fill, soft halo thumb and a live value readout.

URL: https://niceui.dev/components/slider
Install: `npx shadcn@latest add https://niceui.dev/r/slider.json`
File: `components/ui/slider.tsx`

```tsx
"use client";

import * as React from "react";

export interface SliderProps {
  label?: string;
  min?: number;
  max?: number;
  step?: number;
  defaultValue?: number;
  format?: (value: number) => string;
  onValueChange?: (value: number) => void;
  className?: string;
}

export function Slider({
  label,
  min = 0,
  max = 100,
  step = 1,
  defaultValue = 50,
  format = (v) => String(v),
  onValueChange,
  className = "",
}: SliderProps) {
  const [value, setValue] = React.useState(defaultValue);
  const pct = ((value - min) / (max - min)) * 100;

  return (
    <div className={["w-full", className].join(" ")}>
      {label && (
        <div className="mb-3.5 flex justify-between text-[13px] text-zinc-400">
          <span>{label}</span>
          <span className="font-mono text-zinc-100">{format(value)}</span>
        </div>
      )}
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={value}
        aria-label={label}
        onChange={(e) => {
          const next = Number(e.target.value);
          setValue(next);
          onValueChange?.(next);
        }}
        style={{ background: "linear-gradient(90deg,#7dd3fc " + pct + "%,#1c1e22 " + pct + "%)" }}
        className={[
          "h-1 w-full cursor-pointer appearance-none rounded-full outline-none",
          "[&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full",
          "[&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-[0_0_0_4px_rgba(125,211,252,.25)]",
          "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-white",
        ].join(" ")}
      />
    </div>
  );
}
```

Usage:

```tsx
import { Slider } from "@/components/ui/slider";

export default function Example() {
  return <Slider label="Opacity" defaultValue={64} format={(v) => v + "%"} />;
}
```

---

## Stat Card

A KPI card with label, value, delta and an inline sparkline generated from your data points.

URL: https://niceui.dev/components/stat-card
Install: `npx shadcn@latest add https://niceui.dev/r/stat-card.json`
File: `components/ui/stat-card.tsx`

```tsx
import * as React from "react";

export interface StatCardProps {
  label: string;
  value: string;
  delta?: string;
  trend?: number[];
  className?: string;
}

function toPath(points: number[], w = 120, h = 32) {
  const max = Math.max(...points);
  const min = Math.min(...points);
  const range = max - min || 1;
  return points
    .map((p, i) => {
      const x = (i / (points.length - 1)) * w;
      const y = h - 4 - ((p - min) / range) * (h - 8);
      return (i === 0 ? "M" : "L") + x.toFixed(1) + " " + y.toFixed(1);
    })
    .join(" ");
}

export function StatCard({ label, value, delta, trend, className = "" }: StatCardProps) {
  return (
    <div
      className={[
        "w-full max-w-[240px] rounded-xl border border-white/10 bg-zinc-950 p-[18px]",
        className,
      ].join(" ")}
    >
      <div className="flex items-center justify-between">
        <span className="text-xs text-zinc-400">{label}</span>
        {delta && <span className="font-mono text-[11px] text-sky-300">{delta}</span>}
      </div>
      <div className="mb-2.5 mt-0.5 text-[30px] font-medium tabular-nums tracking-[-0.04em] text-zinc-100">
        {value}
      </div>
      {trend && trend.length > 1 && (
        <svg viewBox="0 0 120 32" preserveAspectRatio="none" className="h-8 w-full">
          <path d={toPath(trend)} fill="none" stroke="#7dd3fc" strokeWidth="1.5" />
        </svg>
      )}
    </div>
  );
}
```

Usage:

```tsx
import { StatCard } from "@/components/ui/stat-card";

export default function Example() {
  return (
    <StatCard
      label="Monthly revenue"
      value="$48,290"
      delta="+12.4%"
      trend={[4, 8, 6, 14, 12, 20, 18, 26, 24]}
    />
  );
}
```

---

## Switch

An accessible toggle with a springy thumb. Works controlled or uncontrolled and uses role="switch".

URL: https://niceui.dev/components/switch
Install: `npx shadcn@latest add https://niceui.dev/r/switch.json`
File: `components/ui/switch.tsx`

```tsx
"use client";

import * as React from "react";

export interface SwitchProps {
  checked?: boolean;
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  disabled?: boolean;
  label?: string;
  className?: string;
}

export function Switch({
  checked,
  defaultChecked = false,
  onCheckedChange,
  disabled,
  label,
  className = "",
}: SwitchProps) {
  const [inner, setInner] = React.useState(defaultChecked);
  const on = checked ?? inner;

  const toggle = () => {
    if (checked === undefined) setInner(!on);
    onCheckedChange?.(!on);
  };

  return (
    <button
      type="button"
      role="switch"
      aria-checked={on}
      aria-label={label}
      disabled={disabled}
      onClick={toggle}
      className={[
        "relative inline-flex h-5 w-[34px] shrink-0 items-center rounded-full transition-colors duration-200",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/50 disabled:opacity-50",
        on ? "bg-sky-300" : "bg-zinc-800 ring-1 ring-inset ring-white/15",
        className,
      ].join(" ")}
    >
      <span
        className={[
          "absolute left-[3px] size-3.5 rounded-full transition-all duration-300",
          "[transition-timing-function:cubic-bezier(.2,1.4,.4,1)]",
          on ? "translate-x-3.5 bg-sky-950" : "bg-zinc-400",
        ].join(" ")}
      />
    </button>
  );
}
```

Usage:

```tsx
import { Switch } from "@/components/ui/switch";

export default function Example() {
  return (
    <label className="flex items-center justify-between gap-6 text-sm">
      Notifications
      <Switch defaultChecked label="Notifications" />
    </label>
  );
}
```

---

## Hero — Horizon

A cinematic landing hero with serif-italic accent, dual CTAs and the signature glowing horizon arc.

URL: https://niceui.dev/blocks/hero-horizon
Install: `npx shadcn@latest add https://niceui.dev/r/hero-horizon.json`
File: `components/hero-horizon.tsx`

```tsx
import * as React from "react";

export interface HeroHorizonProps {
  eyebrow?: string;
  title?: string;
  accent?: string;
  rest?: string;
  description?: string;
  primary?: { label: string; href: string };
  secondary?: { label: string; href: string };
}

export function HeroHorizon({
  eyebrow = "Now in public beta",
  title = "Ship faster,",
  accent = "beautifully",
  rest = "built.",
  description = "The platform for teams who care about craft. Everything you need to launch, nothing you do not.",
  primary = { label: "Get started", href: "#" },
  secondary = { label: "Read the docs", href: "#" },
}: HeroHorizonProps) {
  return (
    <section className="relative overflow-hidden bg-black px-6 pt-28 text-center text-zinc-100">
      <p className="inline-flex items-center gap-2.5 rounded-full border border-white/10 px-3.5 py-1.5 font-mono text-xs text-zinc-400">
        <span className="size-1.5 rounded-full bg-sky-300 shadow-[0_0_12px_#7dd3fc]" />
        {eyebrow}
      </p>
      <h1 className="mx-auto mt-8 max-w-4xl text-5xl font-medium leading-[.98] tracking-[-0.055em] sm:text-7xl md:text-8xl">
        {title}
        <br />
        <span className="font-serif font-normal italic text-sky-300">{accent}</span> {rest}
      </h1>
      <p className="mx-auto mt-7 max-w-md text-[17px] leading-relaxed text-zinc-400">{description}</p>
      <div className="mt-10 flex flex-wrap justify-center gap-3">
        <a
          href={primary.href}
          className="inline-flex h-11 items-center rounded-full bg-sky-300 px-5 text-sm font-medium text-sky-950 shadow-[0_0_0_1px_rgba(125,211,252,.4),0_8px_32px_-8px_rgba(56,189,248,.6)] transition hover:bg-sky-200"
        >
          {primary.label}
        </a>
        <a
          href={secondary.href}
          className="inline-flex h-11 items-center rounded-full border border-white/15 px-5 text-sm font-medium transition hover:border-white/30"
        >
          {secondary.label}
        </a>
      </div>
      <div aria-hidden className="relative mt-12 h-64 [mask-image:linear-gradient(black_55%,transparent)]">
        <div className="absolute left-1/2 top-24 size-[1500px] -translate-x-1/2 rounded-full border-t border-sky-200/90 bg-black shadow-[0_-1px_40px_rgba(125,211,252,.55),inset_0_30px_60px_-30px_rgba(125,211,252,.25)]" />
        <div className="absolute left-1/2 top-8 h-64 w-[900px] -translate-x-1/2 bg-[radial-gradient(50%_60%_at_50%_70%,rgba(56,189,248,.35),transparent_70%)] blur-xl" />
      </div>
    </section>
  );
}
```

Usage:

```tsx
import { HeroHorizon } from "@/components/hero-horizon";

export default function Page() {
  return <HeroHorizon />;
}
```

---

## Pricing — Minimal

Three-tier pricing with a monthly/yearly toggle, featured plan glow and checkmark feature lists.

URL: https://niceui.dev/blocks/pricing-minimal
Install: `npx shadcn@latest add https://niceui.dev/r/pricing-minimal.json`
File: `components/pricing-minimal.tsx`

```tsx
"use client";

import * as React from "react";

export interface Tier {
  name: string;
  monthly: number;
  yearly: number;
  description: string;
  features: string[];
  cta: string;
  featured?: boolean;
}

const defaultTiers: Tier[] = [
  { name: "Starter", monthly: 0, yearly: 0, description: "For side projects.", features: ["3 projects", "Community support", "Basic analytics"], cta: "Start free" },
  { name: "Pro", monthly: 24, yearly: 19, description: "For growing products.", features: ["Unlimited projects", "Priority support", "Advanced analytics", "Custom domains"], cta: "Upgrade to Pro", featured: true },
  { name: "Team", monthly: 59, yearly: 49, description: "For teams at scale.", features: ["Everything in Pro", "SSO and audit log", "Dedicated manager"], cta: "Contact sales" },
];

export function PricingMinimal({ tiers = defaultTiers }: { tiers?: Tier[] }) {
  const [yearly, setYearly] = React.useState(true);

  return (
    <section className="bg-black px-6 py-20 text-zinc-100">
      <div className="mx-auto max-w-5xl text-center">
        <h2 className="text-4xl font-medium tracking-[-0.045em] sm:text-5xl">
          Simple, <span className="font-serif font-normal italic text-sky-300">honest</span> pricing.
        </h2>
        <div className="mt-8 inline-flex rounded-full border border-white/15 p-[3px] text-[13px]">
          {["Monthly", "Yearly"].map((label) => {
            const on = (label === "Yearly") === yearly;
            return (
              <button
                key={label}
                onClick={() => setYearly(label === "Yearly")}
                className={["rounded-full px-4 py-1.5 transition", on ? "bg-sky-300 font-medium text-sky-950" : "text-zinc-400"].join(" ")}
              >
                {label}
              </button>
            );
          })}
        </div>
      </div>
      <div className="mx-auto mt-12 grid max-w-5xl gap-4 md:grid-cols-3">
        {tiers.map((tier) => (
          <div
            key={tier.name}
            className={[
              "flex flex-col rounded-2xl border p-6 text-left",
              tier.featured
                ? "border-sky-300/40 bg-zinc-950 shadow-[0_30px_80px_-30px_rgba(56,189,248,.35)]"
                : "border-white/10",
            ].join(" ")}
          >
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium">{tier.name}</span>
              {tier.featured && (
                <span className="rounded-full border border-sky-300/30 bg-sky-300/10 px-2 py-0.5 text-[11px] text-sky-300">
                  Popular
                </span>
              )}
            </div>
            <div className="mt-5 flex items-baseline gap-1">
              <span className="text-4xl font-medium tracking-[-0.04em]">${yearly ? tier.yearly : tier.monthly}</span>
              <span className="text-sm text-zinc-500">/ mo</span>
            </div>
            <p className="mt-1.5 text-sm text-zinc-400">{tier.description}</p>
            <ul className="mt-6 flex-1 space-y-2.5 border-t border-white/10 pt-6 text-sm text-zinc-300">
              {tier.features.map((feature) => (
                <li key={feature} className="flex items-center gap-2.5">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7dd3fc" strokeWidth="2.5">
                    <path d="M5 12l5 5L20 7" />
                  </svg>
                  {feature}
                </li>
              ))}
            </ul>
            <button
              className={[
                "mt-8 h-10 rounded-full text-sm font-medium transition",
                tier.featured ? "bg-sky-300 text-sky-950 hover:bg-sky-200" : "border border-white/15 hover:border-white/30",
              ].join(" ")}
            >
              {tier.cta}
            </button>
          </div>
        ))}
      </div>
    </section>
  );
}
```

Usage:

```tsx
import { PricingMinimal } from "@/components/pricing-minimal";

export default function Page() {
  return <PricingMinimal />;
}
```