Skip to content
newt/ui
Esc
↑↓navigate↵open⌘Jpreview
Framework

newt/create

Six choices, one code. The code is not a theme file — it is a short list of overrides for tokens that already exist, so a project that never uses one looks exactly like a project whose preset is the defaults. Paste it into init and the project comes out already wearing it.

Framework
Brand
Radius
Font
Surfaces
Direction

Your preset

nt1.eyJ2IjoxLCJ0IjoibmV4dCIsImIiOiIjNTg2NWYyIiwiciI6Im1kIiwiZiI6ImludGVyIiwibSI6ImRhcmsiLCJkIjoibHRyIn0

Package manager
  1. pnpm dlx newtui@latest init --template next --preset nt1.eyJ2IjoxLCJ0IjoibmV4dCIsImIiOiIjNTg2NWYyIiwiciI6Im1kIiwiZiI6ImludGVyIiwibSI6ImRhcmsiLCJkIjoibHRyIn0

One command: it creates the project, writes the tokens, then the preset on top.

Already have a project?

pnpm dlx newtui@latest apply --preset nt1.eyJ2IjoxLCJ0IjoibmV4dCIsImIiOiIjNTg2NWYyIiwiciI6Im1kIiwiZiI6ImludGVyIiwibSI6ImRhcmsiLCJkIjoibHRyIn0

How it lands

Root class newt-btn
import { Button } from "@/registry/bases/newt/ui/button"

/* Inline so the demo never reaches out to the network for a placeholder. */
const EMOJI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23f0b232'/%3E%3C/svg%3E"

export default function ButtonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="success">Success</Button>
      <Button variant="danger">Danger</Button>
      <Button variant="secondary" emoji={EMOJI}>
        With emoji
      </Button>
      <Button variant="link">Link button</Button>
    </div>
  )
}
<script setup lang="ts">
import { Button } from "~~/registry/bases/newt/ui/button"

/* Inline so the demo never reaches out to the network for a placeholder. */
const EMOJI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23f0b232'/%3E%3C/svg%3E"
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <Button variant="primary">Primary</Button>
    <Button variant="secondary">Secondary</Button>
    <Button variant="success">Success</Button>
    <Button variant="danger">Danger</Button>
    <Button variant="secondary" :emoji="EMOJI">With emoji</Button>
    <Button variant="link">Link button</Button>
  </div>
</template>
Root class newt-select-menu
"use client"

import * as React from "react"

import { SelectMenu } from "@/registry/bases/newt/ui/select-menu"

/*
 * Drawn here rather than pulled from an icon package: the registry ships no
 * runtime dependency, and a device picker needs exactly two glyphs.
 */
const Monitor = () => (
  <svg viewBox="0 0 24 24" className="h-full w-full" aria-hidden="true">
    <path
      fill="currentColor"
      d="M4 5h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-6v2h3a1 1 0 1 1 0 2H7a1 1 0 1 1 0-2h3v-2H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm1 2v7h14V7H5Z"
    />
  </svg>
)

const Headset = () => (
  <svg viewBox="0 0 24 24" className="h-full w-full" aria-hidden="true">
    <path
      fill="currentColor"
      d="M12 3a8 8 0 0 0-8 8v6a3 3 0 0 0 3 3h1a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1H6v-1a6 6 0 1 1 12 0v1h-2a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h1a3 3 0 0 0 3-3v-6a8 8 0 0 0-8-8Z"
    />
  </svg>
)

const OPTIONS = [
  {
    value: "default",
    label: "System Default",
    description: "Speakers (Built-in Output)",
    note: "(Speakers)",
    icon: <Monitor />,
  },
  {
    value: "speakers",
    label: "Speakers",
    description: "Built-in Output",
    icon: <Monitor />,
  },
  {
    value: "headset",
    label: "Headset",
    description: "USB Audio Device",
    icon: <Headset />,
  },
  {
    value: "bluetooth",
    label: "Bluetooth Headset",
    description: "Not connected",
    icon: <Headset />,
    disabled: true,
  },
]

export default function SelectMenuDemo() {
  const [value, setValue] = React.useState<string>("default")

  return (
    <SelectMenu
      options={OPTIONS}
      value={value}
      onValueChange={setValue}
      label="Output device"
    />
  )
}
<script setup lang="ts">
import { h, markRaw, ref } from "vue"
import {
  SelectMenu,
  type SelectMenuOption,
} from "~~/registry/bases/newt/ui/select-menu"

/*
 * Drawn here rather than pulled from an icon package: the registry ships no
 * runtime dependency, and a device picker needs exactly two glyphs.
 */
const Monitor = markRaw({
  render: () =>
    h(
      "svg",
      { viewBox: "0 0 24 24", class: "h-full w-full", "aria-hidden": "true" },
      [
        h("path", {
          fill: "currentColor",
          d: "M4 5h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-6v2h3a1 1 0 1 1 0 2H7a1 1 0 1 1 0-2h3v-2H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm1 2v7h14V7H5Z",
        }),
      ]
    ),
})

const Headset = markRaw({
  render: () =>
    h(
      "svg",
      { viewBox: "0 0 24 24", class: "h-full w-full", "aria-hidden": "true" },
      [
        h("path", {
          fill: "currentColor",
          d: "M12 3a8 8 0 0 0-8 8v6a3 3 0 0 0 3 3h1a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1H6v-1a6 6 0 1 1 12 0v1h-2a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h1a3 3 0 0 0 3-3v-6a8 8 0 0 0-8-8Z",
        }),
      ]
    ),
})

const OPTIONS: SelectMenuOption[] = [
  {
    value: "default",
    label: "System Default",
    description: "Speakers (Built-in Output)",
    note: "(Speakers)",
    icon: Monitor,
  },
  {
    value: "speakers",
    label: "Speakers",
    description: "Built-in Output",
    icon: Monitor,
  },
  {
    value: "headset",
    label: "Headset",
    description: "USB Audio Device",
    icon: Headset,
  },
  {
    value: "bluetooth",
    label: "Bluetooth Headset",
    description: "Not connected",
    icon: Headset,
    disabled: true,
  },
]

const value = ref("default")
</script>

<template>
  <SelectMenu v-model="value" :options="OPTIONS" label="Output device" />
</template>
import { ChatWindow } from "@/registry/bases/newt/blocks/chat-window/chat-window"

/* Placeholder names and text: no real account, and no Discord asset. */
const MESSAGES = [
  {
    id: "1",
    author: "username",
    initials: "U",
    body: "Welcome to the channel.",
    sentAt: "2026-09-07T14:23:00.000Z",
    displayTime: "Today at 14:23",
  },
  {
    id: "2",
    author: "someone",
    initials: "S",
    body: "The deploy finished — logs look clean.",
    sentAt: "2026-09-07T14:25:00.000Z",
    displayTime: "Today at 14:25",
  },
] as const

export default function ChatWindowDemo() {
  return (
    <ChatWindow
      className="w-full max-w-lg"
      channelName="general"
      topic="Say hello and tell us what you are building."
      messages={MESSAGES}
    />
  )
}
<script setup lang="ts">
import { ChatWindow } from "~~/registry/bases/newt/blocks/chat-window"

/* Placeholder names and text: no real account, and no Discord asset. */
const MESSAGES = [
  {
    id: "1",
    author: "username",
    initials: "U",
    body: "Welcome to the channel.",
    sentAt: "2026-09-07T14:23:00.000Z",
    displayTime: "Today at 14:23",
  },
  {
    id: "2",
    author: "someone",
    initials: "S",
    body: "The deploy finished — logs look clean.",
    sentAt: "2026-09-07T14:25:00.000Z",
    displayTime: "Today at 14:25",
  },
]
</script>

<template>
  <ChatWindow
    class="w-full max-w-lg"
    channel-name="general"
    topic="Say hello and tell us what you are building."
    :messages="MESSAGES"
  />
</template>