Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Accordion

Yes. It adheres to the WAI-ARIA design pattern

Buttons

Displays a button or a component that looks like a button.

Action Buttons

Buttons

Code

Everything related to code,

Code Blocks

import { readFileSync } from "fs";
import { Pre } from "@components/ui/Pre";
import { getHighlighter, highlight } from "@lib/shiki";

export default async function Preview() {
  const code = await getCode();
  return (
    <div className="h-full w-full p-4">
      <div className="overflow-x-scroll rounded-lg border border-border pb-3 pt-4">
        <Pre htmlCode={code} />
      </div>
    </div>
  );
}

async function getCode() {
  const highlighter = await getHighlighter();
  const code = readFileSync("src/examples/code/Pre.tsx", "utf8");
  return await highlight(highlighter, code);
}

Code Blocks with Tabs

import { readFileSync } from "fs";
import { Pre } from "@components/ui/Pre";
import { getHighlighter, highlight } from "@lib/shiki";

export default async function Preview() {
  const code = await getCode();
  return (
    <div className="h-full w-full p-4">
      <div className="overflow-x-scroll rounded-lg border border-border pb-3 pt-4">
        <Pre htmlCode={code} />
      </div>
    </div>
  );
}

async function getCode() {
  const highlighter = await getHighlighter();
  const code = readFileSync("src/examples/code/Pre.tsx", "utf8");
  return await highlight(highlighter, code);
}

Inputs

Displays a form input field or a component that looks like an input field.

Form Inputs

Checkboxes

Radio Group

Custom Radio Group

Sliders

Select

Displays a list of options for the user to pick from—triggered by a button.

Select

Switch with Tooltip Label

A control that allows the user to toggle between checked and not checked. (Note: container queries are messing with layout)

Switch

Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Animated Horizontal Tabs

Animated Vertical Tabs

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut enim numquam, ratione laborum ducimus cupiditate, eligendi ea fugit quibusdam aut ipsum consequatur possimus eum voluptatum omnis ab soluta obcaecati qui!

Toasts

A succinct message that is displayed temporarily.

Default Toasts