Getting started
Use your first component and make it interactive.
Complete Installation first. Components import from your app's source directory.
Your first interaction
Use a client component for state and event handlers:
'use client';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
export default function GettingStartedDemo() {
const [ready, setReady] = useState(false);
return (
<Button aria-pressed={ready} onClick={() => setReady(!ready)}>
{ready ? 'Ready' : 'Mark ready'}
</Button>
);
}Render <Example /> from your page. Use .jsx for JavaScript.
Make it yours
Edit the installed source or pass className to adjust a component. Use Theming for shared colors and fonts.
Component pages keep the example and its code together. Use Preview to interact and Code to copy the source you need.