Skip to content
jezuiMake it yours

Build from styled parts.

Use complete defaults, compose with children, and override only what your project needs.

Styled defaults, optional overrides

Install Card once to get every Card part. Content, typography, spacing, and actions already have styles. Native props and className pass through to each part.

Scroll horizontally for long lines
pnpm dlx shadcn@4.0.8 add http://localhost:3000/r/card.json
Scroll horizontally for long lines
import {Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter} from "@/components/jez-ui/ui/card";
import {Button} from "@/components/jez-ui/ui/button";

<Card>
  <CardHeader>
    <CardTitle>Your workspace</CardTitle>
    <CardDescription>A shared home for your projects.</CardDescription>
  </CardHeader>
  <CardContent>Invite your team when you are ready.</CardContent>
  <CardFooter><Button>Invite teammates</Button></CardFooter>
</Card>

Choose a shortcut or compose children

Tabs, Accordion, Select, menus, overlays, and other structural components include named child parts. Existing items, options, and trigger shortcuts still work. A component’s page lists every export included in its install.

Scroll horizontally for long lines
<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="activity">Activity</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">Your overview</TabsContent>
  <TabsContent value="activity">Your activity</TabsContent>
</Tabs>

Forms without spacing utilities

FormField connects a label, hint, and error to one input automatically. FieldGroup spaces several fields. FieldRow aligns a checkbox or switch with its label. For custom layouts use Field, FieldLabel, FieldDescription, and FieldError with matching IDs.

Scroll horizontally for long lines
<FieldGroup>
  <FormField label="Project" hint="Choose a memorable name.">
    <Input name="project" />
  </FormField>
  <FieldRow><Switch name="notifications" /> Email notifications</FieldRow>
</FieldGroup>

Sidebars with your own hierarchy

Use SidebarHeader for an organisation switcher, SidebarContent for groups and nested menus, and SidebarFooter for an account popout. Menu buttons accept asChild so your router links keep their behaviour. Add as many SidebarMenuItem and SidebarMenuSubItem children as needed.

Scroll horizontally for long lines
<SidebarProvider>
  <Sidebar>
    <SidebarHeader>Your organisation switcher</SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Projects</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton asChild><a href="/projects">All projects</a></SidebarMenuButton>
            <SidebarMenuSub>
              <SidebarMenuSubItem>
                <SidebarMenuSubButton asChild><a href="/projects/design">Design system</a></SidebarMenuSubButton>
              </SidebarMenuSubItem>
            </SidebarMenuSub>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>Your account menu</SidebarFooter>
  </Sidebar>
  <SidebarInset><SidebarTrigger />Your page</SidebarInset>
</SidebarProvider>

Every hero’s words are yours

All twenty heroes expose their headings, descriptions, action labels, and supporting copy. Use the exported Copy defaults to discover a hero’s named slots. Distortion Hero’s artworkText changes its rendered wordmark, including its static fallback. Product Demo Hero accepts children to replace the sample product interface.

Scroll horizontally for long lines
<DistortionHero title="Make a mark." description="An independent studio." actionLabel="Our work" artworkText="NORTH" copy={{brand:"NORTH STUDIO",meta:"EST. 2026"}} />