Hyena Studio

hyenastudio

9.5k

ComponentsCode Block

Bundle

Default

const greeting = "Hello, Hyena";
console.log(greeting);

With Filename

utils.ts

export function cn(...inputs: ClassValue[]): string {
  return twMerge(clsx(inputs));
}

With Line Numbers

1import { useState } from "react";
2
3export function Counter() {
4  const [count, setCount] = useState(0);
5
6  return (
7    <button onClick={() => setCount(c => c + 1)}>
8      Count: {count}
9    </button>
10  );
11}

With Highlighting

1import { useState } from "react";
2
3export function useToggle(initial = false) {
4  const [value, setValue] = useState(initial);
5  const toggle = () => setValue(v => !v);
6  return [value, toggle] as const;
7}

Languages

component.tsx

export function Badge({ children }: { children: React.ReactNode }) {
  return <span className="badge">{children}</span>;
}

styles.css

.badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--color-muted);
}

install.sh

npm install @hyena-studio/ui
npx hyena-studio init

Interactive

counter.tsx

1import { useState } from "react";
2
3export function Counter() {
4  const [count, setCount] = useState(0);
5
6  return (
7    <button onClick={() => setCount(c => c + 1)}>
8      Count: {count}
9    </button>
10  );
11}